Reputation: 77
I'm building a vuetify <v-data-table>
with button icons on the right-most column. The button icons appear when a data row is hovered. I'd like the data row to expand when the row is clicked, but it's not working.
Current codepen implementation here
The code creates a <v-data-table>
as follows:
<v-data-table
:headers="headers"
:items="desserts"
item-key="name"
class="elevation-1"
:items-per-page="5"
:expanded.sync="expanded"
>
And this is the slot to expand the row:
<template v-slot:expanded-item="{ headers, item }">
<td :colspan="headers.length">More info about {{ item.name }}</td>
</template>
I'm hoping someone with vuetify experience can help me get the data table rows to expand when clicked. Thanks!
Upvotes: 2
Views: 5931
Reputation: 39
hey because you want to expand your row maybe you can try the vuetify expansionpanel?
it cloud look something like this
<template v-slot:item="{index, item}">
<v-expansion-panels>
<v-expansion-panel>
<v-expansion-panel-header>{{ item.name }}</v-expansion-panel-header>
<v-expansion-panel-content>
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<td>Calories</td>
<td>Fat (g)</td>
<td>Carbs (g)</td>
<td>Protein (g)</td>
<td>Iron (%)</td>
</tr>
</thead>
<tbody>
<tr @mouseover="toolsIndex=index" @mouseleave="toolsIndex=null">
<td @click="expandRow(index)">{{ item.calories }}</td>
<td @click="expandRow(index)">{{ item.fat }}</td>
<td @click="expandRow(index)">{{ item.carbs }}</td>
<td @click="expandRow(index)">{{ item.protein }}</td>
<td @click="expandRow(index)">{{ item.iron }}</td>
<td>
<v-icon
v-show="index==toolsIndex"
small
class="mr-2"
@click.stop="dialog = true"
>mdi-pencil</v-icon
>
<v-icon
v-show="index==toolsIndex"
small
@click.stop="dialog = true"
>mdi-delete</v-icon
>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</template>
</v-data-table>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</template>
Upvotes: 1
Reputation: 2823
just change your code block like below, problem solved here
<template v-slot:item="{index, item, isExpanded, expand}">
<tr @mouseover="toolsIndex=index"
@click="expand(!isExpanded)"
@mouseleave="toolsIndex=null">
<td @click="expandRow(index)">{{ item.name }}</td>
<td @click="expandRow(index)">{{ item.calories }}</td>
<td @click="expandRow(index)">{{ item.fat }}</td>
<td @click="expandRow(index)">{{ item.carbs }}</td>
<td @click="expandRow(index)">{{ item.protein }}</td>
<td @click="expandRow(index)">{{ item.iron }}</td>
<td>
<v-icon
v-show="index==toolsIndex"
small
class="mr-2"
@click.stop="dialog = true"
>mdi-pencil</v-icon
>
<v-icon
v-show="index==toolsIndex"
small
@click.stop="dialog = true"
>mdi-delete</v-icon
>
</td>
</tr>
</template>
Upvotes: 1
Reputation: 14289
You should change your code like this:
<template v-slot:item="{index, item, isExpanded, expand}">
<tr
@mouseover="toolsIndex=index"
@mouseleave="toolsIndex=null"
@click="expand(!isExpanded)"
>
<td>{{ item.name }}</td>
<td>{{ item.calories }}</td>
<td>{{ item.fat }}</td>
<td>{{ item.carbs }}</td>
<td>{{ item.protein }}</td>
<td>{{ item.iron }}</td>
.....
Upvotes: 2