Collapse or expand Groups in vuetify 2 data-table

2
votes

I have a table where I have a number of items shown all grouped by a string property. By default these groups are all expanded.

https://vuetifyjs.com/en/components/data-tables/#grouped-rows

Is there anyway to collapse all the groups or expand them at once ?

Ie have a collapse all button above the table. I have search but can't find a solution.

Thanks

2
vue.jsvuetify.js
I have just found an example codepen.io/lzhoucs/pen/aadaJx but it uses a fork of vuetify which makes me think it my not be possible. My code with complexities taken out is pretty much the vuetify example for groups ie codepen.io/pen/?&editable=true&editors=101 - Glenn Pierce

2 Answers

7
votes

The latest Vuetify does pass the isOpen and toggle values in the group.header slot. You could customize this slot to track $refs for each group that can then be bound to a toggle all (or expand/collapse all) function....

  <template v-slot:group.header="{ group, headers, toggle, isOpen }">
        <td :colspan="headers.length">
            <v-btn @click="toggle" small icon :ref="group">
                <v-icon v-if="isOpen">mdi-chevron-up</v-icon>
                <v-icon v-else>mdi-chevron-down</v-icon>
            </v-btn>
            {{ group }}
        </td>
  </template>

  methods: {
    toggleAll () {
        Object.keys(this.$refs).forEach(k => {
            this.$refs[k].$el.click()
        })
    }
  }

Demo: https://codeply.com/p/ys4Df2OLiE

-3
votes

Codeply-er answer may work but I didn't want to track $refs for each group. In the end I add this hack

private expandAll() {
    const self = this;

    for (const name of Object.keys(self.$refs.expandableTable.openCache)) {
        self.$refs.expandableTable.openCache[name] = true;
    }
}

private collapseAll() {
    const self = this;

    for (const name of Object.keys(self.$refs.expandableTable.openCache)) {
        self.$refs.expandableTable.openCache[name] = false;
    }
}

This probably relies on an internal method openCache so not ideal.