TableGrowthRate

by grazieelak

HTML

<div id="app">
  <b-table responsive :items="employees" :fields="fields" caption-top class="mb-0">

    <template #cell(january)="data">
      <span :class="classNameRate" class="d-block">
        {{ data.item.january.rate | porcent }}
      </span>
      <small>
        {{ data.item.january.value | currency }}
      </small>
    </template>

    <template #cell(february)="data">
      <span class="d-block">
        {{ data.item.february.rate | porcent }}
      </span>
      <small>
        {{ data.item.february.value | currency }}
      </small>
    </template>

    <template #cell(march)="data">
      <span class="d-block">
        {{ data.item.march.rate | porcent }}
      </span>
      <small>
        {{ data.item.march.value | currency }}
      </small>
    </template>

    <template #cell(april)="data">
      <span class="d-block">
        {{ data.item.april.rate | porcent }}
      </span>
      <small>
        {{ data.item.april.value | currency }}
      </small>
    </template>

    <template #cell(may)="data">
      <span class="d-block">
        {{ data.item.may.rate | porcent }}
      </span>
      <small>
        {{ data.item.may.value | currency }}
      </small>
    </template>

    <template #cell(june)="data">
      <span class="d-block">
        {{ data.item.june.rate | porcent }}
      </span>
      <small>
        {{ data.item.june.value | currency }}
      </small>
    </template>

    <template #cell(july)="data">
      <span class="d-block">
        {{ data.item.july.rate | porcent }}
      </span>
      <small>
        {{ data.item.july.value | currency }}
      </small>
    </template>

    <template #cell(august)="data">
      <span class="d-block">
        {{ data.item.august.rate | porcent }}
      </span>
      <small>
        {{ data.item.august.value | currency }}
      </small>
    </template>

    <template #cell(september)="data">
      <span class="d-block">
        {{ data.item.september.rate | porcent }}
      </span>
     ...

SCSS

#table-growth-rate {
    .table {
      thead {
        th {
          border-top: none !important;
          padding-top: 0;
          font-weight: 600;
          border-color: #E3E3E7;
          border-width: 1px;
        }

        td {
          border-color: #E3E3E7;

          small {
            color: #495057;
          }

        }
      }
      tbody {
        tr:last-child {
          td {            
            padding-bottom: 0;
          }
        }
      }
    }
  }

JavaScript

var app = new Vue({
  el: '#app',
  name: "TableGrowthRate",
  data: () => ({    
    employees: dados,
    fields: [
      { key: 'type_name', label: '' },
      { key: 'january', label: 'Janeiro' },
      { key: 'february', label: 'Fevereiro' },
      { key: 'march', label: 'Março' },
      { key: 'april', label: 'Abril' },
      { key: 'may', label: 'Maio' },
      { key: 'june', label: 'Junho' },
      { key: 'july', label: 'Julho' },
      { key: 'august', label: 'Agosto' },
      { key: 'september', label: 'Setembro' },
      { key: 'october', label: 'Outubro' },
      { key: 'november', label: 'Novembro' },
      { key: 'december', label: 'Dezembro' },
    ],
  }),
  computed: {
    classNameRate() {
     if (this.employees[0].january.rate > 0) {
       return 'text-success'
      }
    	else if (this.employees[0].january.rate < 0) {
      	return 'text-danger'
    	}
    },
  }
});



const dados = [
  { 'type_name': 'Saldo',  
    january: { value: -99, rate: -2 },
    february: { value: -73, rate: -1 },
    march: { value: 150, rate: 3 },
    april: { value: 5370, rate: 100 },
    may: { value: 290, rate: 4 },
    june: { value: 752, rate: 12 },
    july: { value: 143, rate: -3 },
    august: { value: 240, rate: 5 },
    september: { value: 520, rate: 11 },
    october: { value: 470, rate: -3 },
    november: { value: 534, rate: 13 },
    december: { value: 805, rate: 5 },
  },
  { 'type_name': 'Entrada',  
    january: { value: 5300, rate: -2 },
    february: { value: 5350, rate: 1 },
    march: { value: 6010, rate: 6 },
    april: { value: 5370, rate: -6 },
    may: { value: 5399, rate: 1 },
    june: { value: 6005, rate: 6 },
    july: { value: 5300, rate: -6 },
    august: { value: 5350, rate: 1 },
    september: { value: 6010, rate: 5 },
    october: { value: 5370, rate: -5 },
    november: { value: 5399, rate: 1 },
    december: { value: 6005, rate: 6 },
  },
  { 'type_name': 'Saída',  
    january: { value: -5399, rate: -12 },
    february: {...