Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vuetify / DataTable: Changing style for 'show-group-by' button?

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.

like image 535
borsTiHD Avatar asked Oct 20 '25 02:10

borsTiHD


1 Answers

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>
like image 174
M3HDI Avatar answered Oct 22 '25 06:10

M3HDI



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!