Vuetify Table sortable column is not working-CodePudding

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 ?

CodePudding user response：

You set up your 'Link Count' column to count field and use item.count slot in component, but internal table sorter has no idea what is this count field.

If you are sure that your details column will never has specific values like null, undefined, etc, you can change your code this way:

...
{ text: 'Link Count', value: 'details.length', width: '10%', sortable: true},
...
<template v-slot:item.details.length="{ item }">
  {{ item.details.length }}
</template>
...

(Or you don't even need to override this slot)

Otherwise, if you care about null/undefined, it'd be better to create computed property with your current data plus additional calculated count column, and use it instead of items in component.

CodePudding user response：

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/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/@mdi/[email protected]/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"
        
      ></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.