Vuetify DataTable sorting - vue.js

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

Answer 2

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.