I am currently trying to customize the select all checkbox for a Vue Datatable (v-datatable). All I'd really like to do is add a label or perhaps a tooltip to the checkbox itself. To do this, I'd like to utilize the Header Data Table Select Slot/header.data-table-select, and change the element from a v-simple-checkbox to a regular v-checkbox.
When I add in a template that uses the v-simple-checkbox, the checkbox works perfectly fine. You can click it and select/deselect all of the rows without an issue. Here is a Codepen showcasing this.
However, if I use the regular v-checkbox, then the select/deselect all functionality leaves entirely. This Codepen showcases this.
What do I have to hook the on value up to in order to get it to work correctly in this case since v-on does not seem to doing it? Or is there an easier way to customize this checkbox that I'm missing?
Setup your v-checkbox like this
<v-checkbox
:input-value="props.value"
:indeterminate="props.indeterminate"
@change="on.input"
>
</v-checkbox>