Vuetify DataTable sorting-CodePudding

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.

CodePudding user response：

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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

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

CodePudding user response：

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"
    
></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.