vue-datatable-exemple.js

/*
Actually the code was correct but the component needs you to do all the dirty work
data splitting for pagination
data ordering and filtering
I had to look at their mock data exemple to understand 

ping us if you still need ...
*/

//https://github.com/OneWayTech/vue2-datatable/blob/master/examples/src/_mockData/index.js
 
 new Vue({
    el: '#app10',
    data: function () {
      return {
        //change these collumns accordingly
        columns: [
          { title: 'firstField', field: 'firstField', sortable: true },
          { title: 'secondField', field: 'secondField' },
          { title: 'thirdField', field: 'thirdField', sortable: true }
        ],
        data: [],
        baseData: [],
        total: 0,
        query: {}
      }
    },

    created: function(){
        //load  the data
        const self = this
        fetch('data.json')
        .then(function(response) {
            return response.json();
        })
        .then(function(data) {
            // do your transformation here for adding dynamicField to the data
            //TODO data = data.map()...

            self.baseData = data
            //display first 10 items
            self.data = self.baseData.slice(0, 10) //10 is the default page size you could change it
            self.total = self.baseData.length
        });
    },

    watch: {
        query: {
            handler (query) {
                const { limit = 10, offset = 0, sort = '', order ='', keyword } = query
                //set initially to all available data
                let data = this.baseData
                
                //apply filter
                if(keyword){
                    data = this.baseData.filter(obj => {
                        return Object.keys(obj).some(key => obj[key].toString().includes(keyword))
                    })
                }
                //TODO apply sorting using loadash for instance

                //apply pagination
                data = data.slice(offset, offset + limit)
                

                //set final data
                this.data = data
                this.total = this.baseData.length
            },
            deep: true
        }
    },
    methods: {
        someHandler: function (evt) {
            const {query} = this
            this.$set(query, 'keyword', evt.target.value)
            query.offset = 0 
        }
    }
    
  })