CallingPage.vue

<template>
    <feathers-data-table
      model="agents"
      :headers="headers"
      :footer-props="footerProps"
      :must-sort="true"
      class="elevation-2"
      fixed-header
      :height="height"
      :search="$store.get('app/search')"
    >
    </feathers-data-table>
</template>

<script>
import { get } from 'vuex-pathify'
import FeathersDataTable from '@/components/general/FeathersDataTable'
export default {
  components: { FeathersDataTable },
  data() {
    return {
      footerProps: {
        itemsPerPageOptions: [10, 25, 50, 100],
      },
      headers: [
        { text: 'First Name', value: 'firstName' },
        { text: 'Last Name', value: 'lastName' },
        { text: 'Company', value: 'companyName' },
        { text: 'Email', value: 'email' },
      ],
    }
  },
  computed: {
    height() {
      const tableFooter = 59
      return this.mainContentHeight - tableFooter
    },
    mainContentHeight: get('app/mainContentHeight'),
  },
}
</script>

FeathersDataTable.vue

<template>
  <v-data-table
    :items="items"
    :loading="loading"
    :options.sync="options"
    :server-items-length="serverItemsLength"
    v-bind="$attrs"
    v-on="$listeners"
  >
  </v-data-table>
</template>
<script>
export default {
  name: 'FeathersDataTable',
  props: {
    model: {
      type: String,
      default: '',
    },
    search: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      items: [],
      loading: true,
      options: {},
      qid: '',
      serverItemsLength: 0,
    }
  },
  watch: {
    options: {
      handler() {
        this.load()
      },
      deep: true,
    },
    search() {
      this.load()
    },
  },
  mounted() {
    this.qid = Math.random()
      .toString(36)
      .substring(7)
    this.load()
  },
  methods: {
    async load() {
      this.loading = true
      const query = {}
      const { page, itemsPerPage, sortBy, sortDesc } = this.options
      query.$skip = (1 - page) * itemsPerPage
      query.$limit = itemsPerPage
      if (sortBy.length) {
        query.$sort = sortBy.reduce((acc, fld, idx) => {
          acc[fld] = sortDesc[idx] ? -1 : 1
          return acc
        }, {})
      } else {
        query.$sort = { [this.$attrs.headers[0].value]: 1 } // default to first column
      }

      if (this.search) {
        query.$or = this.$attrs.headers.map(h => ({
          [h.value]: { $regex: `^.*${this.search}.*$`, $options: 'i' },
        }))
      }

      const { data, total } = await this.$store.dispatch(`${this.model}/find`, {
        query,
        qid: this.qid,
      })
      this.items = data
      this.serverItemsLength = total
      this.loading = false
    },
  },
}
</script>