I have these vuetify table, this is how I configure the header
JavaScript
x
13
13
1
headers: [
2
{
3
text: 'Name',
4
align: 'start',
5
sortable: false,
6
value: 'name',
7
width: '20%'
8
},
9
{ text: 'Link Count', value: 'count', width: '10%', sortable: true },
10
{ text: 'URL', value: 'details', width: '50%' },
11
{ text: 'Actions', value: 'id', width: '20%' }
12
]
13
JavaScript
1
7
1
<v-data-table :headers="headers" :items="items" :search="search">
2
3
<template v-slot:item.count="{ item }">
4
{{ item.details.length }}
5
</template>
6
7
As you can see I have sortable: true
for Link Count column.
Some how it is not working…
How can I debug this further ?
Advertisement
Answer
By default, <v-data-table>
comes with a sortable functionality for all the columns. By your question what I understood if that by default you want count
column sorted in ascending/descending order when grid loads.
If Yes, You can achieve that by using external-sorting feature of data grid.
Working demo :
JavaScript
1
47
47
1
new Vue({
2
el: '#app',
3
vuetify: new Vuetify(),
4
data () {
5
return {
6
sortBy: 'count',
7
sortDesc: false,
8
headers: [
9
{
10
text: 'Name',
11
align: 'start',
12
value: 'name',
13
width: '20%'
14
},
15
{ text: 'Link Count', value: 'count', width: '10%' },
16
{ text: 'URL', value: 'details', width: '50%' },
17
{ text: 'Actions', value: 'id', width: '20%' }
18
],
19
items: [
20
{
21
name: 'Frozen Yogurt',
22
count: 159,
23
details: 'Detail 1',
24
id: 24
25
},
26
{
27
name: 'Ice cream sandwich',
28
count: 237,
29
details: 'Detail 2',
30
id: 37
31
},
32
{
33
name: 'Eclair',
34
count: 262,
35
details: 'Detail 3',
36
id: 23
37
},
38
{
39
name: 'Cupcake',
40
count: 305,
41
details: 'Detail 4',
42
id: 67
43
}
44
],
45
}
46
}
47
})
JavaScript
1
18
18
1
<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
2
<script src="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.js"></script>
3
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.css"/>
4
<link rel="stylesheet" href="https://unpkg.com/@mdi/font@6.x/css/materialdesignicons.min.css"/>
5
<div id="app">
6
<v-app id="inspire">
7
<div>
8
<v-data-table
9
:headers="headers"
10
:items="items"
11
:sort-by.sync="sortBy"
12
:sort-desc.sync="sortDesc"
13
class="elevation-1"
14
></v-data-table>
15
</div>
16
</div>
17
</v-app>
18
</div>
Please let me know if my understanding is not correct or any further changes required as per the requirement.