I have a vuetify v-data-table that I would like to prevent from sorting when some other action is occuring (isLoading is true).

The action that I'm trying to achieve is resizing the grid which has a grabhandle that is a child element of the table header and when clicked and dragged to resize it still fires the sort event on the table header. Looking for a solution to either exclude the child element from triggering the sort or to handle it through the update:sort-by event and prevent it when I have the flag set.

<v-data-table :items=items 
              :headers="headers" 
              @update:sort-by="preventSorting"
></v-data-table>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [ ...],
      items: [ ...],
      isLoading: false
    }
  },
  methods: {
    preventSorting() {
      if (this.isLoading) {
        //prevent sorting from happening
      }
    }
  }
})

codepen here

Have tried adding even modifiers like .stop and .prevent but it doesn't seem to be passing the $event object to the method I've specified. Have also tried explicitly passing the $event object e.g., @update:sort-by="preventSorting($event)" Have tried setting the disable-sort data table prop to the isLoading, but the sort event still happens

CodePudding user response：

This can be achieved using the custom-sort prop. You'll have to manually handle the sorting of every column type, but you'll have complete control over whether to sort or not sort based on some other state in your component or app.

See this updated codepen (when sorting it only does the number type columns correctly, but it's also not meant to be a complete example)

customSort(items, index, isDesc) {
  if (this.isLoading) {
    return items;
  }
  items.sort((a, b) => {
    if (isDesc != 'false') {
      return a[index] < b[index] ? -1 : 1;
    } else {
      return b[index] < a[index] ? -1 : 1;
    }
  });
  return items;
}