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

user_7625095 0
Viewed 5001

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.

vuetify.js vue.js datatable
3 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>
user_43943290

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>

user_109335650

For someone using the Vuetify 2 here is the code that worked for me

<template v-slot:header="{ props: { headers }, on } ">
  <tr>
    <th v-for="header in headers" :class="header.class" :width="header.width" >
        {{header.text}}
        <v-icon @click="on.group(header.value)"> {{ header.icon }} </v-icon>
    </th>
  </tr>
</template>
user_128482130
Related