[Vuejs]-Vuetify / Vue (2) data table not sorting / paginating upon new bound prop

by

0👍

✅

  1. When your component mounts, you need to fetch the total number of items available on the server and the first page of data, and set these as :items and :server-items-length. The latter will (as you observed) disable paging and sorting, as your server will take care of it, and it is used to calculate the total number of pages given a selected page size.
  2. Now you need to know when to reload data. For this, you either bind options to the v-data-table with two-way binding (.sync) and set a watcher on it, or you listen to the update:options event. And whenever options change, you fetch the selected data from the server.

That’s basically all it takes.

In your template:

       <v-data-table
           :items="items" 
           :headers="headers" 
           :loading="true"
           :server-items-length="numberOfItemsOnServer"
           @update:options="options => loadPage(options)"
       />

In your component:

methods: {
  async loadPage(options){
    this.items = [] // if you want to show DataTable's loading-text
    this.items = await fetch('yourUrl' + new URLSearchParams({
      // build url params from the options object
      offset: (options.page - 1) * options.itemsPerPage,
      limit: options.itemsPerPage,
      orderBy: options.sortBy.map((sb,ix) => [sb, options.sortDesc[ix] ? 'desc' : 'asc'])
    }))
  }
}

Leave a comment