I have a data-table of items, I'm wanting to expand only the selected row to show extra information but it ends up expanding all existing row items instead.
EDIT Sorry Im wanting to single-expand without the use of the dropdown icon
Here is my code:
<v-data-table
v-if="selectedItem"
dense
:headers="headers"
:items="itemsList"
item-key="name"
class="elevation-1"
single-expand
mobile-breakpoint="0"
>
<template v-slot:item="row">
<tr
@click="
() => {
row.expand(!row.isExpanded);
}
"
>
<td>{{ row.item.date}}</td>
<td>{{ row.item.firstName}}</td>
<td>{{ row.item.lastName}}</td>
<td>{{ row.item.email? `Yes` : `No` }}</td>
<td><v-icon small> mdi-pencil </v-icon></td>
</tr>
</template>
<template v-slot:expanded-item="{ headers, item }">
<td class="pa-4" :colspan="headers.length">
<tr v-if="item.date">
<h4 style="font-size: 12px">
<span style="color: #888"> Issued Date: </span>
{{ item.date}}
</h4>
</tr>
<tr v-if="item.firstName">
<h4 style="font-size: 12px">
<span style="color: #888"> First Name: </span>
{{ item.firstName}}
</h4>
</tr>
<tr v-if="item.lastName">
<h4 style="font-size: 12px">
<span style="color: #888"> Last Name: </span>
{{ item.lastName}}
</h4>
</tr>
<tr v-if="item.email">
<h4 style="font-size: 12px">
<span style="color: #888"> Email: </span>
{{ item.email}}
</h4>
</tr>
</td>
</template>
You can use the demo provided by vuetify In the website https://vuetifyjs.com/en/components/data-tables/#expandable-rows
Var: expanded=[ ] This is the template
<template>
<v-data-table :headers="dessertHeaders"
:items="desserts" :single-expand="false" :expanded.sync="expanded" item-key="name" show-expand class="elevation-1" >
<template v-slot:top>
<v-toolbar flat>
<v-toolbar-title>Expandable Table</v-toolbar-title> <v-spacer></v-spacer>
<v-switch v-model="singleExpand" label="Single expand" class="mt-2" ></v-switch> </v-toolbar>
</template>
<template v-slot:expanded-item="{ headers, item }">
<td :colspan="headers.length"> More info about {{ item.name }} </td>
</template>
</v-data-table>
</template>
If you want to expand row without the use of expand icon you can use this
<v-data-table @click:row="expandRow">
...
</v-data-table>
expandRow(item, event) {
if(event.isExpanded)
{ var index = this.expanded.findIndex(i => i === item);
this.expanded.splice(index, 1) }
else
{ this.expanded.push(item); } }