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
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>