Vuetify - how to reset sort in v-datatable

Question

I need to create a button out of the table and upon click of the button I need to reset all the sort applied in any column of the v-datatable.

I am using the header config array to set sortable for one of the column in the datatable.

headers = [
  {
    text: 'Name'
    sortable: true,
    value: 'name',
  },
  
    text: 'Age'
    sortable: false,
    value: 'number',
  },
];

Tried searching for the api to reset the sort applied here, but couldn't find any way to achieve this.

Edit:

PS: I don't need to sort the table on load it should only sort the when the user clicks on the sortable column and should reset that sort upon clicking on an external button.

Ref JsFiddle: https://jsfiddle.net/9sydvo7g/12/

Any help is appreciated, Thanks

score 0 · Answer 1 · answered Aug 09 '22 at 16:03

You can configure your v-data-table to let you control the sorting externally. Please refer to the External sorting example in Vuetify's documentation: https://vuetifyjs.com/en/components/data-tables/#external-sorting

Basically, sorting can be controlled externally by using the individual props, or by using the the options prop. Remember that you must apply the .sync modifier.

<v-data-table
    :headers="headers"
    :items="desserts"
    :sort-by.sync="sortBy"
    :sort-desc.sync="sortDesc"
    class="elevation-1"
></v-data-table>

This way you can link the sorting configuration to those variables in your data array, if multi-sort prop is enabled they will work as arrays.

data () {
    return {
      sortBy: 'fat',
      sortDesc: false,
      ...
    }
}

Then if you want to clear the sorting from an external button all you need to do is set those vars to '' or [] if you're working with multi-sort.

methods: {
    clearSort () {
        this.sortBy = ''
        this.sortDesc = false
        // Or if you are using multi-sort
        //this.sortBy = []
        //this.sortDesc = []
    },
    ...
}

Vuetify - how to reset sort in v-datatable

1 Answers1