I am able to group header inside datatable.
The working code and output is at vuetify playground
<script>
export default {
data () {
return {
groupBy: [
{
key: 'gluten',
order: 'asc',
},
],
headers: [
{
title: 'Dessert (100g serving)',
align: 'start',
sortable: false,
key: 'name',
},
{ title: 'Calories', key: 'calories' },
{ title: 'Fat (g)', key: 'fat' },
{ title: 'Carbs (g)', key: 'carbs' },
{ title: 'Protein (g)', key: 'protein' },
{ title: 'Iron (%)', key: 'iron' },
],
desserts: [{name:'FrozenYogurt',calories:159,fat:6.0,carbs:24,protein:4.0,iron:'1%',gluten:false,},{name:'Icecreamsandwich',calories:237,fat:9.0,carbs:37,protein:4.3,iron:'1%',gluten:false,},{name:'Eclair',calories:262,fat:16.0,carbs:23,protein:6.0,iron:'7%',gluten:true,more:{name:'Eclair1',calories:11,fat:12,carbs:1,protein:5.0,iron:'17%',gluten:true},},{name:'Cupcake',calories:305,fat:3.7,carbs:67,protein:4.3,iron:'8%',gluten:true,},{name:'Gingerbread',calories:356,fat:16.0,carbs:49,protein:3.9,iron:'16%',gluten:true,},{name:'Jellybean',calories:375,fat:0.0,carbs:94,protein:0.0,iron:'0%',gluten:false,},{name:'Lollipop',calories:392,fat:0.2,carbs:98,protein:0,iron:'2%',gluten:false,},{name:'Honeycomb',calories:408,fat:3.2,carbs:87,protein:6.5,iron:'45%',gluten:true,},{name:'Donut',calories:452,fat:25.0,carbs:51,protein:4.9,iron:'22%',gluten:true,},{name:'KitKat',calories:518,fat:26.0,carbs:65,protein:7,iron:'6%',gluten:true,},],
}
},
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<v-container fluid>
<v-data-table
:headers="headers"
:items="desserts"
:group-by="groupBy"
item-value="name"
>
<template v-slot:group-header="{ item, columns, toggleGroup, isGroupOpen }" >
<tr>
<td :colspan="columns.length">
<VBtn
size="small"
variant="text"
:icon="isGroupOpen(item) ? '$expand' : '$next'"
@click="toggleGroup(item)"
></VBtn>
{{item}}
{{ item.value ? 'Contains gluten' : 'Gluten free' }}
</td>
</tr>
</template>
</v-data-table>
</v-container>
</template>
And, the expected output should be:
(I don't mind to arrange data according to requirement, i can arrange data from server)
"Gluten free" is parent having 4 data, but the nested 2 data should be grouped again with "High calories" header. And so on...
I am using vuetify 3.4.6 version. I even don't mind to have solution for version 2.x.x.
Appreciate any help.