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

January 9, 2024

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>