Show/hide grouped rows on header click Vuetify2 (v-data-table component) - vuejs2

Question

Here is an example of datatable with rows grouped by category. I want to expand/collapse it by group header click. Tried to replace the default rendering of a row using v-slot:item but seems it's not working.
The second way is to replace the default rendering of grouped rows using v-slot:group, but I hope should be another way.
Here's the code:
<v-data-table
dense
:headers="headers"
:items="desserts"
item-key=name
group-by="category"
class="elevation-1"
>
<template v-slot:item="{ item }">
<template v-if="item.show">
Show row
</template>
<template v-else>
</template>
</template>
<template v-slot:group.header="{ items }">
<td #click="expandRows(items[0])"
class="text-xs-right"
>
<strong>{{ items[0].category }}</strong>
</td>
<td class="text-xs-right">22%</td>
<td class="text-xs-right">24%</td>
<td class="text-xs-right">25%</td>
</template>
</v-data-table>
Please suggest how can I solve that?

Answer 1

The solution is to replace the default rendering of group headers and grouped rows using v-slot:group.
<template v-slot:group="{ items, expand }">
<tr #click="toggle(items[0].category)">
<td class="text-xs-right"><strong>{{ items[0].category }}</strong></td>
<td class="text-xs-right">22%</td>
<td class="text-xs-right">24%</td>
<td class="text-xs-right">25%</td>
</tr>
<tr v-for="(item, index) in items" :key="item.id" v-show="!item.hide">
<td v-for="header in headers">
{{ item[header.value] }}
</td>
</tr>
</template>
Here is codepen