CODEWITHSUNDEEP
vue.jsvuetify.js
Ron
Ron

Reputation: 51

Using Vuetify v-data-table, I would like to collapse/expand a single group?

I have a data-table with a group-by and a custom group header. I would like to collapse and expand individual groups similar to the functionality of the standard group header

I created a collapse btn, but I;m not sure which command or property will do the collapse (and later expand)

...v-data-table with group-by clause....

<template v-slot:group.header="grp">
   <v-btn text icon small color="white" @click="<not sure what to place here>">
      <v-icon>mdi-minus</v-icon> 
   </v-btn>
   <span class="mx-2 subtitle-1">{{grp.items[0].startTime | dateString}}</span>
      <span class="mx-2 subtitle-1"> Group {{grp.items[0].grpCode}}</span>
</template>

Upvotes: 4

Views: 5402

Answers (2)

GreenTurtle
GreenTurtle

Reputation: 1262

Even if the question is a bit older I want to show a full working solution:

...v-data-table with group-by clause....

<template v-slot:group.header="{items, isOpen, toggle}">
   <th colspan="100%">
      <v-btn text icon small color="white" @click="toggle">
         <v-icon>{{ isOpen ? 'mdi-minus' : 'mdi-plus' }}</v-icon> 
      </v-btn>
      <span class="mx-2 subtitle-1">{{items[0].startTime | dateString}}</span>
      <span class="mx-2 subtitle-1"> Group {{items[0].grpCode}}</span>
   </th>
</template>

Upvotes: 5

v.s.
v.s.

Reputation: 121

The group.header has a prop called toggle. Its a function that controls the expansion of the group items. All you have to do is call that in your button:

<template v-slot:group.header="{ group, toggle }">
    <v-btn text icon small color="white" @click="toggle">

More info: https://vuetifyjs.com/en/components/data-tables

Upvotes: 4

Related Questions