Hey I need some help with using two data-tables on the same page. What I need to happen is when table 1 (T1) has a row (R1) expanded I need R1 to collapse when the user expands a row (R2) on table 2 (T2). Here is a codepen set up with 2 data-tables that expand with my solution: https://codepen.io/BrandiW/pen/WgLPej?editors=1010 As you can see in this codepen I am using a variable called Expanded to currently hide the v-card in the extended row that needs to be shut, but the problem is that it is not actually shutting this row. Thus if you want to open this row back up, you have to double click it (once to shut it and another time to reopen it).
Example problem:
- Works: click T1 - R1 then T2 - R2 Then T1 - R3
- Doesn't work: click T1 - R1 then T2 - R2 and then either T1 - R1 or T1 - R2
Code (html then java script):
<div id="app">
<v-app id="inspire">
<h1> Table 1 </h1>
<v-data-table
:headers="headers"
:items="desserts1"
hide-actions
item-key="name"
>
<template slot="items" slot-scope="props">
<tr @click="(Expanded = 'D')&&(props.expanded = !props.expanded)">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</tr>
</template>
<template slot="expand" slot-scope="props">
<v-card flat>
<v-card-text v-if="Expanded == 'D'"><h2>Row in table 1 expanded</h2></v-card-text>
</v-card>
</template>
</v-data-table>
<h1> Table 2 </h1>
<v-data-table
:headers="headers"
:items="desserts2"
hide-actions
item-key="name"
>
<template slot="items" slot-scope="props">
<tr @click="(Expanded = 'A')&&(props.expanded = !props.expanded)">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</tr>
</template>
<template slot="expand" slot-scope="props">
<v-card flat>
<v-card-text v-if="Expanded == 'A'"><h2>Row in table 2 expanded</h2></v-card-text>
</v-card>
</template>
</v-data-table>
</v-app>
</div>
new Vue({
el: '#app',
data () {
return {
Expanded: "",
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name'
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' }
],
desserts1: [
{
value: false,
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%'
},
{
value: false,
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%'
},
{
value: false,
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%'
},
{
value: false,
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%'
},
],
desserts2: [
{
value: false,
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%'
},
{
value: false,
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%'
},
{
value: false,
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%'
},
{
value: false,
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%'
}
]
}
}})
