How can I add the parent checkbox to the Vuetify datagrid group table?

[eguvenc]

When I use the vuetify data datable group feature, the following view is obtained by default.

But I want to add a checkbox to grouped rows and add a parent checkbox to have child rows marked with a single selection

The default example is available at this address. https://codepen.io/ersin-g-ven-/pen/PoREoNj

<div id="app">
  <v-app id="inspire">
    <h5>Selected: {{selected}}</h5>
    <v-data-table
      v-model="selected"
      :headers="headers"
      :items="desserts"
      item-key="name"
      show-select
      @click:row="handleClick"
      group-by="category"
      class="elevation-1"
      show-group-by
    >
     
    </v-data-table>
  </v-app>
</div><div id="app">
  <v-app id="inspire">
    <h5>Selected: {{selected}}</h5>
    <v-data-table
      v-model="selected"
      :headers="headers"
      :items="desserts"
      item-key="name"
      show-select
      @click:row="handleClick"
      class="elevation-1"
    >
     
    </v-data-table>
  </v-app>
</div>

[KaelWD]

You can use the group.header slot, the default implementation looks like this: https://codepen.io/kaelwd/pen/OJvMOOr?editors=1010

[eguvenc]

Hi, Thanks for your answer.
But,
When the top group checkbox is selected, I want the checkboxes below it to be selected as well.

How can i do this. Any idea ?

Here is my code.
https://codepen.io/ersin-g-ven-/pen/LYdeWor?editors=1010