Implementing a checkbox in v-data-table header - vue.js

Question

I have a v-data-table in which I have the rows with checkboxes. I'm trying to implement a checkbox in the table header where selecting the checkbox would select the entire checkboxes in the table row.
This is my code:
<v-data-table
v-model="model"
styles="font-size:5px;"
:headers="headers"
:items="items"
single-select
:items-per-page="10"
class="elevation-1" hide-default footer
>
<template slot="headers" slot-scope="props">
<tr>
<th> <v-checkbox :input-value="props.all"> </v-checkbox>
</tr>
</template>
<template v-slot:item="row" :activator="{ on, attrs }">
<!-- <tr #click="highlightRow(item.item, item)"> -->
<tr>
<td>{{ row.item.DisplayValue }}</td>
<td>
<label class="form-checkbox">
<input type="checkbox" :value="row.item.DataValue" v-model="preselected1" >
<i class="form-icon"></i>
</label>
</td>
<td>
<label class="form-checkbox">
<input type="checkbox" :value="row.item.DataValue" v-model="preselected2">
<i class="form-icon"></i>
</label>
</td>
</tr>
</template>
</v-data-table>
I did try the solution from https://vuetifyjs.com/en/components/data-tables/#row-selection but what I'm trying to achieve is more like:
Need checkbox in highlighted places
Any pointers on achieving this would be appreciated.

Answer 1

According to Vuetify documentation, you can do something like this:
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template v-slot:header.colWithCheckbox_1="{ header }">
{{ header.text }}
<v-checkbox v-model="headerCheckboxes.colWithCheckbox_1" />
</template>
</v-data-table>