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.

Answer 1

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>