How can i add parent-child group checkbox to on vuetify datatable? - vue.js

Question

When i use the vuetify data datable group header feature and
when the top group checkbox is selected, i want the checkboxes below it to be selected as well.
Here is the code.
https://codepen.io/ersin-g-ven-/pen/LYdeWor?editors=1010
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
item-key="name"
sort-by="name"
group-by="category"
class="elevation-1"
show-select
show-group-by
>
<template v-slot:[`group.header`]="{items}">
<th colspan="2">
<v-checkbox
v-model="selected"
:label="items[0].category"
></v-checkbox>
</th>
</template>
</v-data-table>
</v-app>
</div>

Answer 1

Just came across your post. I think the combination of v-treeview with selection-type="leaf" can do the trick.
Check the documentation on: https://vuetifyjs.com/en/api/v-treeview/#props-selection-type
and see how it works: https://vuetifyjs.com/en/components/treeview/#selection-type

Answer 2

Using of the "v-model" with "watch" has worked for me:
<template v-slot:group.header="{group, items}">
<th colspan="4">
<v-checkbox
:label="items[0].category"
:value="group"
v-model="selected_groups"
>
</v-checkbox>
</th>
</template>
...
data() {
...
selected: [],
selected_groups: []
}
watch: {
selected_groups(node_new, node_old) {
if(node_new.length < node_old.length) {
let dif = node_old.filter(x => !node_new.includes(x))[0]
this.selected = this.selected.filter(item => { return !Object.values(item).includes(dif) })
} else if (node_new.length > node_old.length) {
this.items_arr.forEach(item => {
if(Object.values(item).includes(node_new.at(-1))) {
this.selected.push(item)
}
})
} else if (node_new.length == node_old.length) {
return this.selected
}
},
selected(selected_new, selected_old) {
if(selected_new.length < selected_old.length) {
let dif_NODE = selected_old.filter(x => !selected_new.includes(x))[0][this.groupable_col]
let arr_NODEs = []
selected_new.forEach(item => { arr_NODEs.push(item[this.groupable_col]) })
if(!arr_NODEs.includes(dif_NODE)) {
this.selected_groups= this.selected_groups.filter(item => item != dif_NODE)
}
} else if(selected_new.length > selected_old.length) {
if(!this.selected_groups.includes(selected_new.at(-1)[this.groupable_col])) {
this.selected_groups.push(selected_new.at(-1)[this.groupable_col])
}
}
}
}