[Feature Request] VDataTableHeader Tooltip

[jakesteele]

Problem to solve

I want to add tooltips to VDataTables through the VDataTableHeader. I can do this with a custom slot. However, it breaks the sorting icon. In my UI, I would like to describe what a header means using a tooltip on the table's header.

Proposed solution

Add a tooltip property that creates a tooltip on the VDataTable. Perhaps a nice icon that suggests there is more information available on hover.

[simonklimek]

Documentation clearly says: "Headers slot You can also override all the internal headers by using the headers slot. Remember that you will have to re-implement any internal functionality like sorting."

With example https://vuetifyjs.com/en/components/data-tables/headers/

<template v-slot:headers="{ columns, isSorted, getSortIcon, toggleSort }">
      <tr>
        <template v-for="column in columns" :key="column.key">
          <td>
            <span class="mr-2 cursor-pointer" @click="() => toggleSort(column)">{{ column.title }}</span>
            <template v-if="isSorted(column)">
              <v-icon :icon="getSortIcon(column)"></v-icon>
            </template>
            <v-icon v-if="column.removable" icon="$close" @click="() => remove(column.key)"></v-icon>
          </td>
        </template>
      </tr>
    </template>

[freezingjune]

@jakesteele How did you solve this issue? Can you share your fix?

[DSplawski92]

Documentation clearly says: "Headers slot You can also override all the internal headers by using the headers slot. Remember that you will have to re-implement any internal functionality like sorting."

What about fixed-header / sticky props? I noticed, that this functionality does not work as well when using #headers slot. Is there any solution to remain it?

[emelendez]

@jakesteele my solution is in the definition of header props: when defining the props of a header item

  const headers = [
      { 
        title: 'Name', 
        align: 'start', 
        sortable: false, 
        key: 'name' ,
        headerProps: {
          title: 'My tootip as a text'
        }
      },
      ....

that headerProps.title is the attr title of <th title="My tooltip as a text"> BUT, it can't be HTML...only strings