CODEWITHSUNDEEP
vuetify.js
Jan Garaj
Jan Garaj

Reputation: 28696

Customize grouped rows in v-data-table

I use v-data-table with grouped rows: https://codepen.io/jangaraj/pen/zYqOwBj?editors=1010

I would like to show also item count for each category, e.g. category: Candy (3 items in the group). Is there any slot for this kind of customization?

Upvotes: 0

Views: 1170

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362630

You can customize the group.header slot...

 <template v-slot:group.header="{ group, items, isOpen, toggle, remove }">
        <td colspan="2">
            <v-btn icon @click="toggle">
              <v-icon v-if="isOpen">
                mdi-minus
              </v-icon>
              <v-icon v-else>
                mdi-plus
              </v-icon>
            </v-btn>
            Category: {{ group }} {{ items.length }}
            <v-btn icon @click="remove">
              <v-icon>
                mdi-close
            </v-btn>
        </td>
 </template>

Codeply

Upvotes: 2

Related Questions