Search code examples
vuejs3vuetifyjs3vuetify-datatable

Is there way to hide the expand button in v-data-table with a condition?


With the help of prop "show-expand" in v-data-table expand button is displayed in all rows of a data table.

<v-data-table
      :expanded.sync="expanded1"
      :headers="headers1"
      :items="items"
      show-expand
      class="elevation-1"
>

Is there a way to render this based on a condition in Vuetify 3?

In Vuetify 2, the item.data-table-expand slot was used to achieve this.

<template #item.data-table-expand="{ item, expand, isExpanded }">
        <td v-if="item?.versions?.length > 0" class="text-start">
          <v-btn
            variant="text"
            density="comfortable"
            @click="expand(!isExpanded)"
            class="v-data-table__expand-icon"
            :class="{ 'v-data-table__expand-icon--active': isExpanded }"
          >
            <v-icon>mdi-chevron-down</v-icon>
          </v-btn>
        </td>
</template>

However, in Vuetify 3 using the same code block returns a type error saying Uncaught TypeError: expand is not a function


Solution

  • expand is now toggleExpand and expects the internalItem slot prop

    <template #item.data-table-expand="{ item, internalItem, toggleExpand, isExpanded }">
      <td v-if="item?.versions?.length > 0" class="text-start">
        <v-btn
          variant="text"
          density="comfortable"
          @click="toggleExpand(internalItem)"
          class="v-data-table__expand-icon"
          :class="{ 'v-data-table__expand-icon--active': isExpanded }"
        >
          <v-icon>mdi-chevron-down</v-icon>
        </v-btn>
      </td>
    </template>