item expand with v-slot:expanded-row and v-slot:item

Question

can anyone tell me how to expand in vuetify 3 data table please using both the item and expanded-row slots together? Just cant figure out why the expand doesn't show if I add the item slot and cant find anything that explains how to do this. Works if i just have the expanded- row slot but then i cant edit the items...thanks

          <template v-slot:expanded-row="{ columns, item }" >
            <tr>
                <td :colspan="columns.length">
                    More info about {{ item.name }}
                </td>
            </tr>
            </template>

            <template v-slot:item="{ item }">
            <tr>
                <td>{{ item.name }}</td>
                <td><v-chip :color="getColor(item.calories)">{{ item.calories }}</v-chip></td>
                <td>{{ item.fat }}</td>
                <td>{{ item.carbs }}</td>
                <td>{{ item.protein }}</td>
                <td>{{ item.iron }}</td> 
            </tr>

Answer 1

When overriding the default item row, you also have to override the button to expand rows.

The item slot has two slot props, isExpanded and toggleExpand, both are functions that take the internalItem, which is also passed to the slot. With this, you can build your own expand button:

<template #item="{item, columns, internalItem, isExpanded, toggleExpand}">
  <tr>
    <td v-for="column in columns">
      <v-btn
        v-if="column.key === 'data-table-expand'"
        :icon="isExpanded(internalItem) ? 'mdi-chevron-up' : 'mdi-chevron-down'"
        variant="plain"
        @click="toggleExpand(internalItem)"
      />
      <span v-else>{{item[column.key]}}</span>
    </td>
  </tr>
</template>

Here it is in a playground