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

2
votes

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.

2
vue.jsdatatablevuetify.js
You can use <template v-slot:top> to customize the html content in the table header - sugars
Oh thanks, never thought about that. :D Is there a way to see the default component of vuetify which is handling the header? So I could copy paste the default and just change the group by button? - borsTiHD
yes you can, try using v-slot:group and more specific details can be viewed in the document. - sugars
I found a similar question - vuetify-2-grouped-data-table-with-customized-group-header-and-item-rows - sugars
Sorry I didn't understand what you mean, do you mean the default template slot or no slot? If the v-slot specified in the document is not passed in, the template may be filtered and not rendered. - sugars

2 Answers

11
votes

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>
1
votes

I was able to replace the default sort icon and the group button (which just appears to be a span tag with the text 'group' inside) in the v-data-table headers row by using the hide_default_header prop on the v-data-table and then replacing the hidden headers row by using the header slot. v-data-table docs

<template v-slot:header="props">
    <thead>
        <tr>
            <template v-for="header in props.props.headers">
                <th :key="header.value">
                    <span>{{ header.text }}</span>
                    <v-btn @click.stop="props.on.sort(header.value)" icon><v-icon>keyboard_arrow_down</v-icon></v-btn>
                    <v-btn @click.stop="props.on.group(header.value)" icon><v-icon>flip_to_back</v-icon></v-btn>
                </th>
           </template>
        </tr>
    </thead>
</template>