Reusable Vue Table

Cara pake nya

<template lang="pug">
  div
    br
    .container-fluid
      my-table(:fields="table.tableFields" :button="table.actionButton" :url="table.url" :modules="modules")
        template(slot='header')
          filter-search(:modules="modules" :length="table.tableFields.length + 2" :filter-width='8')        
            el-button.pull-right(v-if="isAuthorized" type="primary" plain size="medium" @click="addNew") Input Kegiatan Baru
</template>

<script>
import filterSearch from '@@/components/layouts/FilterSearch'
import myTable from '@@/components/layouts/Table'

export default {
  head: {
    title: 'Kegiatan'
  },
  components: { filterSearch, myTable },
  data: () => ({
    modules: 'kegiatan/',
    table: {
      url: '/kegiatan/',
      tableFields: [
        { key: 'kode', label: 'Kode Kegiatan' },
        { key: 'nama_opd', label: 'OPD' },
        { key: 'nama_program', label: 'Program' },
        { key: 'nama', label: 'Kegiatan' },
        { key: 'tahun', label: 'Tahun' },
        { key: 'nilai_anggaran', label: 'Nilai Anggaran', decimal: true },
        { key: 'keterangan', label: 'Keterangan' }
      ],
      actionButton: {
        edit: true,
        delete: true
      }
    }
  }),
  methods: {
    addNew() {
      this.$router.push('/kegiatan/create')
    }
  }
}
</script>

Table Component

<template lang='pug'>
  div
    el-dialog(:visible.sync='dialogShow', title='Warning', width='30%', center='')
      span
        center Yakin ingin menghapus item ini ?
      span.dialog-footer(slot='footer')
        el-button(:loading='buttonLoading', @click='dialogShow = false') Batalkan
        el-button(:loading='buttonLoading', type='primary', @click='confirmDelete') Ya, Tentu
    table.table.table-hover(v-loading='isLoading' element-loading-text='Mohon tunggu ...')
      thead(bgcolor='#efefef') 
        slot(name='header')
        tr
          th(width='5%' @click="sort('id')")
            a(href='javascript: void(0)') No
              i(v-if="sortKey === 'id'" :class="sortType === 'asc' ? 'fa fa-sort-alpha-asc' : 'fa fa-sort-alpha-desc'")
          th(v-for='field in fields' :key='field.id' :width='field.width' @click='field.sort === false ? null : sort(field.key)')
            a(href='javascript: void(0)') {{ field.label }}
              i(v-if="sortKey === field.key" :class="sortType === 'asc' ? 'fa fa-sort-alpha-asc' : 'fa fa-sort-alpha-desc'")
          th.text-center(v-if='Object.getOwnPropertyNames(button).length > 1' width='15%') {{ actionName }}
      tbody
        tr(v-for='(data,index) in datas' :key='index' :class="data.deleted_at ? 'danger' : ''")
          td {{ parseInt(index) + 1 }}
          td(v-for='item in fields' :key='item.id' :class='item.class')
            el-tag(v-if="item.hasOwnProperty('tag')" :type="item.tag.danger == data[item.key] ? 'danger' : 'success'" size='mini') {{ data[item.key] }}
            span(v-else-if="item.hasOwnProperty('collection')")
              p(v-for='(data,index) in JSON.parse(data[item.key])' :key='index') {{ data.attr }} : {{ data.value }}
            span(v-else-if="item.hasOwnProperty('decimal')") {{ data[item.key] | money }}
            span(v-else-if="item.hasOwnProperty('check')")
              i.el-icon-success(v-if='data[item.key] === 1')
            span(v-else) {{ data[item.key] }}
          td.text-center(v-if='Object.getOwnPropertyNames(button).length > 1')
            slot(name='customAction' :datarow='data')
            el-button.elbutton(v-if="isAuthorized && button.edit" type='info' size='mini' @click='editPressed(data.id)')
              i.el-icon-edit
            el-button.elbutton(v-if="isAuthorized && button.delete" type='danger' size='mini' @click='deletePressed(data.id)')
              i.el-icon-delete
      tfoot(bgcolor="#efefef")
        pagination(:modules="modules" :length="fields.length + 2" @reload="callAction")
</template>

<script>
import pagination from '@@/components/layouts/Pagination'

export default {
  filters: {
    money(val) {
      return parseFloat(val)
        .toFixed(2)
        .replace(/\d(?=(\d{3})+\.)/g, '$&,')
    }
  },
  components: { pagination },
  props: {
    actionName: {
      type: String,
      default: 'Actions'
    },
    fields: {
      type: Array,
      default() {
        return []
      }
    },
    button: {
      type: Object,
      default() {
        return {}
      }
    },
    url: {
      type: String,
      default: ''
    },
    modules: {
      type: String,
      default: ''
    }
  },
  data: () => ({
    buttonLoading: false,
    dialogShow: false,
    completeShow: false,
    completeID: null,
    deleteID: null
  }),
  computed: {
    datas() {
      return this.$store.getters[`${this.modules}getData`]
    },
    sortKey() {
      return this.$store.getters[`${this.modules}getTable`].sortKey
    },
    sortType() {
      return this.$store.getters[`${this.modules}getTable`].sortType
    }
  },
  created() {
    this.callAction()
  },
  methods: {
    callAction() {
      this.isLoading = true
      this.$store.dispatch(`${this.modules}loadTable`).then(() => {
        this.isLoading = false
      })
    },
    completePressed(val) {
      this.completeID = val
      this.completeShow = true
    },
    editPressed(val) {
      this.$router.push(`${this.url + val}/edit`)
    },
    deletePressed(val) {
      this.deleteID = val
      this.dialogShow = true
    },
    showPressed(val) {
      this.$router.push(`${this.url + val}/detail`)
    },
    laporan(val) {
      this.$axios
        .get(`/laporan${this.url}${val}`)
        .then(response => {
          console.log(response)
        })
        .catch(error => {
          this.$message.error(error.response.data)
        })
    },
    async confirmDelete() {
      this.buttonLoading = true
      await this.$axios
        .delete(this.url + this.deleteID)
        .then(() => {
          this.callAction()
          this.$message({
            showClose: true,
            message: 'Proses delete berhasil.',
            type: 'success'
          })
        })
        .catch(error => {
          this.$message.error(error.response.data)
        })
      this.buttonLoading = false
      this.dialogShow = false
    },
    confirmComplete() {
      this.buttonLoading = true
      this.$axios
        .put(`${this.url}document-complete/${this.completeID}`, {
          document_status: 1
        })
        .then(() => {
          this.buttonLoading = false
          this.completeShow = false
          this.callAction()
          this.$message({
            showClose: true,
            message: 'Proses completing document berhasil.',
            type: 'success'
          })
        })
        .catch(error => {
          this.$message.error(error.response.data)
          this.buttonLoading = false
        })
    },
    sort(key) {
      let type = null
      this.sortType === 'asc' ? (type = 'desc') : (type = 'asc')
      const obj = {
        sortKey: key,
        sortType: type
      }
      this.$store.commit(`${this.modules}setSort`, obj)
      this.callAction()
    }
  }
}
</script>

<style scoped>
table {
  font-size: 85%;
  border-spacing: 0;
  background-color: white;
}
.elbutton {
  padding: 5px;
}
</style>