I've been struggling for a while to create nested data tables using VueJs and Vuetify data tables.
Here's what I'm trying to achieve:
I would like to have one main data-table, with filters, search, and everything else (I got that part right I think, using computed properties and reusing my filtered data in the data table), and some other data tables nested under the main one.
To achieve that, I used the 'expand' ability of Vuetify's data tables and created child tables under this expand scope.
While I've been able to achieve the nesting part, at least visually talking, I can't seem to wrap my head around a problem: I would like to add a checkbox on the parent row (that is a row of the parent data table) and be able to select everything that's in its expand slot. It certainly 'works', as it effectively selects the data binded to the row, but it doesn't mark the data under the expand scope as selected.
Here's a screenshot of what I would like to happen when I select the 'Desserts' row.
And what happens instead is that the row is selected, but not the children elements under the expand scope.
In summary: I would like a checkbox that acts like the 'select all' checkbox that's on the headers of the child data table. While keeping in mind I would need to have 3 nested data tables (here there's only two), where the parent always selects all children elements and where children can be unselected or reselected at will.
I made a pen for you guys to understand what I'm trying to do, maybe you can help out? (https://codepen.io/Synkied/pen/qGLNBv?editors=1010)
And here's the code:
<div id="app">
<v-app id="inspire">
<v-data-table
v-model="selected"
:headers="headers"
:items="treats"
:pagination.sync="pagination"
expand="true"
select-all
item-key="category"
class="elevation-1"
hide-actions
>
<template v-slot:items="props">
<tr @click="props.expanded = !props.expanded">
<td>
<!-- This one should select every items under the expand slot -->
<v-checkbox
@click.stop="props.selected = !props.selected"
:input-value="props.selected"
primary
hide-details
></v-checkbox>
</td>
<td class="text-xs-right">{{ props.item.category }}</td>
</tr>
</template>
<template v-slot:expand="props">
<v-data-table
v-model="selected"
:headers="headers"
:items="props.item.food"
:pagination.sync="pagination"
expand="true"
select-all
item-key="category"
class="elevation-1"
hide-actions
>
<!-- I should be able to hide headers and have the parent row checkbox act like the select all headers' checkbox -->
<template v-slot:items="props">
<tr @click="props.expanded = !props.expanded">
<td>
<v-checkbox
:input-value="props.selected"
primary
hide-details
></v-checkbox>
</td>
<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>
</v-data-table>
</template>
</v-data-table>
{{ selected }}
</v-app>
</div>
new Vue({
el: '#app',
data: () => ({
pagination: {
sortBy: 'name'
},
selected: [],
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
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' }
],
treats: [
{
category: 'Desserts',
food: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%'
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%'
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%'
}
]
},
{
category: 'Entries',
food: [
{
name: 'Melon',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%'
},
{
name: 'Hummus',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%'
}
]
}
]
})
})
Thanks so much, awesome community!
