Has anyone successfully utilized grouped rows with v-slot in the most recent Vuetify versions? The example they provide is as follows:
<template>
<v-data-table
:headers="headers"
:items="desserts"
item-key="name"
group-by="category"
class="elevation-1"
show-group-by
></v-data-table>
</template>
<script>
export default {
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
value: 'name',
},
{ text: 'Category', value: 'category' },
],
desserts: [
{
name: 'Frozen Yogurt',
category: 'Ice cream',
},
{
name: 'Ice cream sandwich',
category: 'Ice cream',
},
{
name: 'Eclair',
category: 'Cookie',
},
{
name: 'Cupcake',
category: 'Pastry',
},
{
name: 'Gingerbread',
category: 'Cookie',
},
{
name: 'Jelly bean',
category: 'Candy',
},
{
name: 'Lollipop',
category: 'Candy',
},
{
name: 'Honeycomb',
category: 'Toffee',
},
{
name: 'Donut',
category: 'Pastry',
},
{
name: 'KitKat',
category: 'Candy',
},
],
}
},
}
</script>
This method works, but I would like to customize it with my own style. I attempted something like this:
<template v-slot:group="data">
{{data}}
</template>
I am able to view the object, but the styles are not displaying. It seems that the documentation does not cover this aspect.
If anyone has already implemented a solution for this, I would greatly appreciate any assistance.