How to add tooltip to datatable header in vuetify?
How to add tooltip to datatable header in vuetify?
1 answer
by
dalton_moen ,
2 months ago
@aniya.jaskolski
To add a tooltip to a datatable header in Vuetify, you can use the v-tooltip component provided by Vuetify. Here is an example of how you can add a tooltip to a datatable header:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<template>
<v-data-table
:headers="headers"
:items="items"
item-key="name"
>
<template v-slot:header="{ header }">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<span v-on="on">{{ header.text }}</span>
</template>
<span>{{ header.tooltip }}</span>
</v-tooltip>
</template>
</v-data-table>
</template>
<script>
export default {
data() {
return {
headers: [
{ text: 'Name', value: 'name', tooltip: 'This is the name column' },
{ text: 'Age', value: 'age', tooltip: 'This is the age column' },
// Add more headers as needed
],
items: [
{ name: 'John Doe', age: 30 },
{ name: 'Jane Smith', age: 25 },
// Add more items as needed
],
};
},
};
</script>
|
In this example, the v-tooltip component is used inside the v-data-table component's header slot. The v-tooltip component takes a bottom prop to position the tooltip below the header text. The activator slot is used to specify the element that triggers the tooltip (in this case the header text). The header.tooltip property is used to store the tooltip text for each header.