Vuetify / DataTable: Mudando o estilo do botão 'show-group-by'?

Question

Eu quero usar a função de agrupamento padrão na tabela de dados vuetify.
Funciona bem, mas quero alterar o estilo de botão padrão para agrupamento e substituí-lo por um ícone.
Isso é possível? Se eu inspecionar o botão nas ferramentas de desenvolvimento, ele apenas aparecerá <span>group</span>.
Encontrado apenas isto nos documentos:https://vuetifyjs.com/en/components/data-tables/#grouped-rows

Edit: Até agora eu sei o que eu gostaria. Estou procurando o modelo padrão para o v-slot:header. É aqui que o botão que mencionei acima é gerado para iniciar o agrupamento.

Answer 1

Você pode usar o group.headerslot e fornecer seu próprio modelo para o cabeçalho do grupo, incluindo o botão de alternância e usar o togglemétodo dos adereços como:

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

Answer 2

Consegui substituir o ícone de classificação padrão e o botão de grupo (que apenas parece ser uma tag de span com o texto 'grupo' dentro) na linha de cabeçalhos da tabela v-data usando o hide_default_headerprop no v-data-tablee substituindo o oculto linha de cabeçalhos usando o headerslot. 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>