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
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