list.vue

<template>
  <div>
    <vx-card class="mb-base">
      <div class="flex justify-end">
        <div class="text-right">
          <table class="text-center">
            <tr>
              <td rowspan="2" class="text-left">Karyawan<br/>Aktif</td>
              <th rowspan="2" class="text-left">
                <h1>{{ jumlahKaryawan.all }}</h1>
              </th>
              <td rowspan="2">&emsp;</td>
              <th>STAFF</th>
              <th>KBT</th>
              <th>KHT</th>
              <th>KHK</th>
              <th>KHL</th>
              <th>KBO</th>
              <th>KBK</th>
            </tr>
            <tr>
              <td>{{ jumlahKaryawan.STAFF }}</td>
              <td>{{ jumlahKaryawan.KBT }}</td>
              <td>{{ jumlahKaryawan.KHT }}</td>
              <td>{{ jumlahKaryawan.KHK }}</td>
              <td>{{ jumlahKaryawan.KHL }}</td>
              <td>{{ jumlahKaryawan.KBO }}</td>
              <td>{{ jumlahKaryawan.KBK }}</td>
            </tr>
          </table>
        </div>
      </div>
    </vx-card>

    <vx-card>
      <smart-grid id="grid"></smart-grid>
    </vx-card>
  </div>
</template>

<script>
import 'smart-webcomponents/source/styles/smart.default.css'
import 'smart-webcomponents/source/modules/smart.grid.js'

export default {
  model: {
    prop: 'pages'
  },
  data () {
    return {
      jumlahKaryawan: [],
      optionsUnit: []
    }
  },
  created () {
    this.$store.watch(
      () => {
        return this.$store.state.unit
      },
      () => {
        console.log(this.$store.state.unit)
      }
    )
  },
  mounted () {
    this.getJumlah()
    window.Smart('#grid', class {
      get properties () {
        return {
          columns: [
            {
              label: 'UNIT',
              dataFiled: 'options_work_unit',
              displayField: 'options_work_unit_label',
              width: '300px'
            },
            {label: 'NIK', dataFiled: 'options_nik_id', width: '150px'},
            {label: 'FP ID', dataFiled: 'options_fp_id', width: '150px'},
            {label: 'KTP', dataFiled: 'options_citizen_int', width: '150px'},
            {label: 'NAMA LENGKAP', dataFiled: 'firstname', width: '200px'},
            {label: 'JENIS KELAMIN', dataFiled: 'gender', width: '150px'},
            {label: 'TPT LAHIR', dataFiled: 'options_birth_city_label', width: '150px', sortable: false},
            {label: 'TGL LAHIR', dataFiled: 'birth', width: '150px'},
            {label: 'KARIR', dataFiled: 'type', width: '100px'},
            {label: 'BAGIAN', dataFiled: 'options_work_job_label', width: '150px', sortable: false},
            {label: 'PENDIDIKAN', dataFiled: 'options_edu_level', width: '150px'},
            {label: 'STATUS', dataFiled: 'statut', width: '150px'}
          ],
          dataSource: new window.Smart.DataAdapter({
            dataSource: `${process.env.VUE_APP_API_URL  }api/index.php/members?limit=10`,
            dataSourceType: 'json',
            dataFields: [
              {name: 'options_work_unit', map: 'array_options>options_work_unit', type: 'number'},
              {name: 'options_work_unit_label', map: 'array_options>options_work_unit_label', type: 'number'},
              {name: 'options_nik_id', map: 'array_options>options_nik_id'},
              {name: 'options_fp_id', map: 'array_options>options_fp_id'},
              {name: 'options_citizen_int', map: 'array_options>options_citizen_int'},
              {name: 'options_birth_city_label', map: 'array_options>options_birth_city_label'},
              {name: 'options_work_job_label', map: 'array_options>options_work_job_label'},
              {name: 'options_edu_level', map: 'array_options>options_edu_level'},
              {name: 'firstname'},
              {name: 'type'},
              {name: 'statut'},
              {name: 'gender'},
              {name: 'birth', type: 'date'}
            ]
          })
        }
      }
    })
  },
}
</script>

<style scoped>
.pagination-container {
  background: white;
  padding-top: 1rem;
}

.small-padding .vs-con-input .vs-inputx {
  padding: 0.4rem !important;
}

.center {
  margin: auto;
  width: 100%;
  padding-left: 10%;
  padding-right: 10%;
}
</style>