Vuetify DataTable sorting

Question

i'm working with https://vuetifyjs.com/en/components/data-tables/ and i set prop

:options.sync="filter_values"
@update:options="updateFilterValues()"

the problem i have, is that i want to disable the sorting for some columns, so i set the headers as this, with prop sortable: false:

headers: [
          {
            value: "checkbox",
            sortable: false,
            width: '10%'
          },
          {
            value: "userId",
            sortable: true,
            width: '30%'
          },
          {
            value: "clientId",
            sortable: true,
            width: '30%'
          },
          {
            value: "clientInformation",
            sortable: false,
            width: '30%',
          },
        ],

I don't know exactly why this is not getting my prop sortable: false and all the columns are sortable, i'm trying to find documentation but there is nothing related to this.

score 0 · Accepted Answer · answered Sep 12 '22 at 13:42

Ideally it should work, Here is the working demo. Kindly have a look and please try to find out the root cause of the issue you are facing by referencing the below demo.

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: () => ({
    headers: [ { text: 'Bool', sortable: false, value: 'status' }, { text: 'String', sortable: true, value: 'val' } ],
    items: [ { status: "True", val: "Alpha" }, { status: "False", val: "Beta" }, { status: "True", val: "Gamma" } ],
  })
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<v-app id="app">
  <v-data-table 
    :headers="headers" 
    :items="items"
  >
  </v-data-table>
</v-app>

score 0 · Answer 2 · answered Sep 12 '22 at 15:14

Check this codepen I made: https://codepen.io/cmfc31/pen/zYjKOjx?editors=1010

<v-data-table
    dense
    :headers="headers"
    :items="desserts"
    :options.sync="filter_values"
    item-key="name"
    class="elevation-1"
></v-data-table>

If you use the .sync modifier in your options prop, theres no need to listen for the @update:options event. Your variable filter_values will automatically be in sync with the component and update on changes.

Vuetify DataTable sorting

2 Answers2