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

by

4👍

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

👤Michal Levý

Leave a comment