Custom sort function not working in vuetify3

Question

I have a v-data-table with headers set, but I can't get the custom sort function to work.

<v-data-table v-else :items-per-page="itemsPerPage" density="compact" :headers="headers" :items="rows" :no-data-text="t('label_no_data')" sticky class="elevation-1 text-caption" :class="{'mobile-table':IsMobile}" />

const headers = ref([
  { key: "PersonID", title: "EDB Person ID", sortable:true }, 
  { key: "FirstName", title: "Name", sortable:true },
  { key: "PersonPersonTimekeeperMaps", title: "Timekeeper ID", sortable:false },
  { key: "Created", title: "Created", sortable:true, sort:(d1: string | null | undefined, d2: string | null | undefined) => {
        const date1 = new Date(d1 as string);
        const date2 = new Date(d2 as string);
        if (date1 > date2) return -1;
        if (date1 < date2) return 1;
        return 0;
    } }
]);

It never hits the breakpoint in the function in dev tools. And it is not respecting the logic I set. It seems to just do the default sort on its own.

Answer 1

In Vuetify 3, the sort functions have moved from the header declaration to the :custom-key-sort property, which takes an object mapping column key to sort function.

So in your case, that would be:

const customKeySort = {
  Created: (d1: string | null | undefined, d2: string | null | undefined) => {
    ...
  }
}

and

<v-data-table
  :custom-key-sort="customKeySort"
  ...
/>

Here it is in a snipet:

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
  setup(){
    const headers = ref([{key: 'name', title: 'Name'}, {key: 'date', title: 'Date'}])
  
    const items = ref(Array.from({length:10}, (_,i) => ({
      name: `Item ${1 + i}`,
      date: new Date(new Date() - Math.random()*(1e+12)).toString()
    })))

    const customKeySort = {
      date: (d1,d2) => new Date(d1).getTime() - new Date(d2).getTime()
    }

    return {headers, items, customKeySort,}
  }

}
createApp(app).use(vuetify).mount('#app')

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify-labs.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-data-table
    :headers="headers"
    :items="items"
    item-title="name"
    item-value="name"
    :custom-key-sort="customKeySort"
  ></v-data-table>
  </v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify-labs.js"></script>