I want to use the default grouping function in the vuetify datatable.
It works fine, but I want to change the default button style for grouping and replace it with an icon.
Is that possible? If I inspect the button in the dev tools, it just shows <span>group</span>
.
Found only this in the docs: https://vuetifyjs.com/en/components/data-tables/#grouped-rows
Edit: By now I know what I would like. I am looking for the default template for the v-slot:header
. This is where the button I mentioned above is generated that starts the grouping.
You can use the group.header
slot and provide your own template for the group header including the toggle button and use the toggle
method from the props like :
<template v-slot:group.header="{ group, headers, toggle, isOpen }">
<td :colspan="headers.length">
<v-btn @click="toggle" x-small icon :ref="group">
<v-icon v-if="isOpen">mdi-plus</v-icon>
<v-icon v-else>mdi-minus</v-icon>
</v-btn>
<span class="mx-5 font-weight-bold">{{ group }}</span>
</td>
</template>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With