Vuetify Table sortable column is not working

I have these vuetify table, this is how I configure the header

         headers: [
            {
                text: 'Name',
                align: 'start',
                sortable: false,
                value: 'name',
                width: '20%'
            },
            { text: 'Link Count', value: 'count', width: '10%', sortable: true },
            { text: 'URL', value: 'details', width: '50%' },
            { text: 'Actions', value: 'id', width: '20%' }
        ]

---

<v-data-table :headers="headers" :items="items" :search="search">
    ...
    <template v-slot:item.count="{ item }">
        {{ item.details.length }}
    </template>
    ...

As you can see I have sortable: true for Link Count column.

Some how it is not working…

How can I debug this further ?

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 :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      sortBy: 'count',
      sortDesc: false,
      headers: [
            {
                text: 'Name',
                align: 'start',
                value: 'name',
                width: '20%'
            },
            { text: 'Link Count', value: 'count', width: '10%' },
            { text: 'URL', value: 'details', width: '50%' },
            { text: 'Actions', value: 'id', width: '20%' }
        ],
      items: [
        {
          name: 'Frozen Yogurt',
          count: 159,
          details: 'Detail 1',
          id: 24
        },
        {
          name: 'Ice cream sandwich',
          count: 237,
          details: 'Detail 2',
          id: 37
        },
        {
          name: 'Eclair',
          count: 262,
          details: 'Detail 3',
          id: 23
        },
        {
          name: 'Cupcake',
          count: 305,
          details: 'Detail 4',
          id: 67
        }
      ],
    }
  }
})

<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/@mdi/font@6.x/css/materialdesignicons.min.css"/>
<div id="app">
  <v-app id="inspire">
    <div>
      <v-data-table
        :headers="headers"
        :items="items"
        :sort-by.sync="sortBy"
        :sort-desc.sync="sortDesc"
        class="elevation-1"
      ></v-data-table>
      </div>
    </div>
  </v-app>
</div>

Please let me know if my understanding is not correct or any further changes required as per the requirement.