[Feature Request] v-data-table group by multiple columns

[cluidold]

Environment

Vuetify Version: 2.1.6 Vue Version: 2.6.10 Browsers: Google Chrome OS: Windows 10

Steps to reproduce

1. Create a v-data-table with grouping
2. Group by multiple columns
3. See, that the table groups only by the first element in the array

Expected Behavior

The v-data-table should group the table by all specified columns (nested groups).

Actual Behavior

If multiple groups are specified by an array as described in the documentation, the elements will be grouped only by the first element in the array.

Reproduction Link

https://codepen.io/cluidold/pen/gOOWdZd?editors=1010

[cbehrs]

Hi, is there a way to "delete" or "hide" that "X" (for deleting the 'group-by' function from the v-data-table")??? Also, it seems that in the last version all the groups are expanded by default and can't find a way to get them all collapsed when the v-data-table has been initialized.

[nekosaur]

@cbehrs Please come to our chat at discord, or create separate bug issues if you feel like something is not working as it should. This issue is specifically about grouping multiple columns.

@cluidold It doesn't look like I mentioned this anywhere in the documentation, but the current implementation of group-by only supports grouping by one column.

[cbehrs]

Hi @nekosaur How can I find you on discord? Need some questions to ask and maybe orientation for creating a bug issue. Thanks in advance for your help!

[GrRivero]

@cluidold It doesn't look like I mentioned this anywhere in the documentation, but the current implementation of group-by only supports grouping by one column.

But in the documentation says "string || array". What should be expected if it is not a multi-column sort?

[nekosaur]

The prop is defined as string | array in preparation for an eventual group by multiple functionality. But current nothing will happen if you give it an array with more than one string.

[GrRivero]

I understand but it can lead to confusion. Only the first array string element works.

[leocfox]

Any fix for this issue yet? I need multiple grouping to work.

[booscaaa]

I'm waiting for this feature too.

[paulsimongb]

I am also waiting for this feature. For the example given I would like to be able to put group-by="category,dairy" and then see eg

• Cookie
  • Yes Eclair
  • No Gingerbread

To make things clearer I would probably change the data to have Dairy instead of Yes and Non-Dairy instead of No.

I am looking at Vuetify to multi-dimensional analysis and nesting one dimension instead another is a very common requirement. I am not sure if it is possible to get the same using v-tree but that looks like it has the same limitations.

[jakeflorentine]

I'm waiting on this feature as well. Have data which has defined types and sub types, then in the sub types, there's various items.

[ibrahimBeladi]

Up

[Defcoun]

I'm also waiting

[lpfy]

I am also waiting

Hi, is there a way to "delete" or "hide" that "X" (for deleting the 'group-by' function from the v-data-table")??? Also, it seems that in the last version all the groups are expanded by default and can't find a way to get them all collapsed when the v-data-table has been initialized.

Hi @cbehrs and whoever like to remove "X". I am currently using v-slot to achieve this.

<template v-slot:[`group.header`]="{ group, headers, toggle, isOpen }">
  <td :colspan="headers.length">
    <v-btn @click="toggle" x-small icon :ref="group" :data-open="isOpen">
        <v-icon v-if="isOpen">mdi-minus</v-icon>
        <v-icon v-else>mdi-plus</v-icon>
    </v-btn>
    <span class="mx-5 font-weight-bold">{{ group }}</span>
  </td>
</template>

[dayre]

For those looking for a way to collapse the groups instead of having them open which is the default, V2 has an undocumented data property on v-data-table called "openCache", which is an object keyed by the group value you are using to group your items. If you slap a ref on the data table, you can toggle the isOpen state for the group by setting the value for the corresponding group to true/false. By default they will all be true.

<v-data-table ref="table">...</v-data-table>

afterMyItemsHaveLoaded() {
   Object.keys(this.$refs.table.openCache).forEach(g => this.$refs.table.openCache[g] = false)
}