How to trigger sort function in custom v-data-table column headers?

Question

I have a v-data-table that groups items. When using a custom header with v-slot like below - how do I enable the built in sort functionality that's on the default header?

is there a way I can trigger the built in sort function with my sortThisColumn function, or any other way? At the moment, my table headings are unclickable.

<v-app class="v-app-custom" v-if="myItems.length > 0">
      <div class="section">
        <v-data-table
          :headers="headers"
          :items="myItems"
          :items-per-page="30"
          hide-default-footer
          hide-default-header
          item-key="uuid"
          group-by="mentor_id"
          class="mentor-table"
        >
          <template v-slot:header="{ props }">
            <thead class="v-data-table-header">
              <tr>
                <th
                  class="text-start"
                  v-for="header in props.headers"
                  :key="header.value"
                  :style="{ width: `${header.width}px` }"
                  @click="sortThisColumn(header.value)"
                >
                  <span>{{ header.text }}</span>
                  <v-icon v-if="header.sortable" color="white" small>{{
                    sort[header.value] == "desc"
                      ? "fa-chevron-down"
                      : "fa-chevron-up"
                  }}</v-icon>
                </th>
              </tr>
            </thead>
          </template>
          <template
            v-slot:group.header="{ group, props, headers }"
            sort-icon="fa-chevron-down"
          >

Table headers:-

headers: [
  {
    text: "Status",
    value: "status",
    width: 82,
    sortable: false,
  },
  { text: "Type", value: "type", width: 140, sortable: true },
  { text: "Creator", value: "creator", width: 140, sortable: true },
  { text: "Date", value: "due_date", width: 141, sortable: true },
  { text: "Mentor", value: "mentor", width: 141, sortable: true },
],

Answer 1

Check this codesanbox I made: https://codesandbox.io/s/stack-70975751-p9msn?file=/src/components/CustomSorting.vue

You can define a custom sorting function in your headers array like this. I've done this in the past to add a custom sort to one of my date columns.

headers: [
   {
      text: 'Date',
      value: 'date',
      align: 'center',
      sort: (a, b) => {
         var date1 = a.replace(/(\d+)\/(\d+)\/(\d+)/, '$3/$2/$1')
         var date2 = b.replace(/(\d+)\/(\d+)\/(\d+)/, '$3/$2/$1')

         return date1 < date2 ? -1 : 1
      }
   }
]

Knowing this, you could do something like this in your case.

data: (vm) => ({
   headers: [
      {
         text: 'Date',
         value: 'date',
         sort: (a,b) => {
            return vm.myCustomSort(a,b)
         }
      },
   ]
})