Customize v-data-table headers and keep default functionality (sorting)

Question

I want the table headers of my v-data-table to be "tab-able".

Therefore I created a slot and put a tabindex on the columns.

Unfortunetely the sorting doesn't work anymore.

Is there a smart way to make the columns "tab-able" and keep the standard functionality of the headers?

Here is my code:

<template v-slot:header="{ props:{ headers}  }">
    <thead>
        <tr>
            <th v-for="header in headers" :key="header.value">
                <td sortable="true"  tabindex="0">{{header.text}}</td>
            </th>
        </tr>
    </thead>
</template>

Answer 1

If you want to keep default functionality, do not override header slot but instead override only header.<name> slot which generates only the header text.

To apply same slot template for all the columns, you can use a little trick with v-for and Dynamic Slot Names

<v-data-table
  :headers="headers"
  :items="desserts"
  class="elevation-1"
>
  <template v-for="header in headers" v-slot:[`header.${header.value}`]="{ header }">
    <span tabindex="0">{{ header.text }}</span>
  </template>
</v-data-table>

Demo