[Documentation] Provide additional documentation for VDataTable header slot and show sort icon on hover

[1Luc1]

Problem to solve

As stated here within the docs:

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.

I just don't know how to show the sort icon on hover the VDataTable header. Like the default functionality.

Proposed solution

Update the example to include this functionality.

[jakubmatisak]

I don't know if this will help you, but this is how I'm using sorting on mobile devices.
I hope that you can find here what you need.

And yes, it was hell to find out how to do it.

    <template
      #headers="{ columns, isSorted, getSortIcon, toggleSort, sortBy }"
    >
      <v-expansion-panels
        variant="accordion"
      >
        <v-expansion-panel
          elevation="1"
        >
          <v-expansion-panel-text>
            <v-list>
              <v-list-item
                v-for="item in columns"
                :key="item.key"
                :title="item.title"
                :value="item"
                @click="item.sortable ? toggleSort(item) : null "
              >
                <template
                  v-if="isSorted(item)"
                  #append
                >
                  <div class="align-center d-flex justify-center">
                    <v-badge
                      class="mx-3"
                      :content="sortBy.indexOf(sortBy.find(el => el.key === item.key)) + 1"
                    />
                    <v-icon :icon="getSortIcon(item)" />
                  </div>
                </template>
              </v-list-item>
            </v-list>
          </v-expansion-panel-text>
        </v-expansion-panel>
      </v-expansion-panels>
    </template>

[1Luc1]

thanks for your reply. This is kind of the same answer as here, but still this doesn't cover the hover effect like you have with the default behavior (see image below).

[MajesticPotatoe]

Same concept as both of those, just stick a v-hover around it and hide/show the icon.

<template v-for="column in columns" :key="column.key">
  <v-hover>
    <template v-slot:default="{ isHovering, props }">
      <td v-bind="props">
        <span
          class="mr-2 cursor-pointer"
          :class="isHovering ? '' : 'pr-6'"
          @click="() => toggleSort(column)"
        >{{ column.title }}</span>
        <v-icon
          v-show="isSorted(column) || isHovering"
          :icon="getSortIcon(column)"
        ></v-icon>
      </td>
    </template>
   </v-hover>
</template>

Mashing hover into this particular example gets kinda janky with the remove column icons being there. The sorting itself is still there the icon just pops up when it is sorted by clicking the header instead of on hover.

If you have any additional questions, please reach out to us in our Discord community