vuetify.jsvuetifyjs3vuetify-datatable

How to add tooltip to datatable header in vuetify 3?


How can I add I tooltip to Vuetify 3 datatable header without having to re-implement sort functionality?

There was an answer to similar question few years ago but its for Vuetify 2: https://stackoverflow.com/a/58718975/934257


Solution

  • Works the same as in the linked answer, except that the header.${string} slot is called column.${string} now, and the tooltip's activator slot now gets a props value instead of on:

    <v-data-table
      :headers="headers" 
      :items="items"
    >
      <template
        v-for="h in headers" 
        v-slot:[`column.${h.key}`]="{ column }"
      >
        <v-tooltip>
          <template v-slot:activator="{ props }">
            <span v-bind="props">{{ h.title }}</span>
          </template>
          <span>{{ h.title }}</span>
        </v-tooltip>
      </template>
    </v-data-table>
    

    Here it is in a playground