feat(VDataTable): always allow expand groupby

[Esgator]

added groupExpanded prop to allow to always render group rows expanded

Description

I added a prop to all VDataTables to pass along with groupBy to make the groups always expand when set.

Markup:

<template>
  <v-app>
    <v-container>
      <v-data-table
        :group-by="groupBy"
        :group-Expanded="groupExpanded"
        :headers="headers"
        :items="desserts"
        :sort-by="sortBy"
        class="elevation-1"
        item-value="name"
      ></v-data-table>
    </v-container>
  </v-app>
</template>

<script>
  export default {
    name: 'Playground',
    data: () => ({
      sortBy: [{ key: 'name', order: 'asc' }],
      groupBy: [{ key: 'dairy', order: 'asc' }],
      groupExpanded: true,
      headers: [
        {
          title: 'Dessert (100g serving)',
          align: 'start',
          key: 'name',
          groupable: false,
        },
        { title: 'Category', key: 'category', align: 'end' },
        { title: 'Dairy', key: 'dairy', align: 'end' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          category: 'Ice cream',
          dairy: 'Yes',
        },
        {
          name: 'Ice cream sandwich',
          category: 'Ice cream',
          dairy: 'Yes',
        },
        {
          name: 'Eclair',
          category: 'Cookie',
          dairy: 'Yes',
        },
        {
          name: 'Cupcake',
          category: 'Pastry',
          dairy: 'Yes',
        },
        {
          name: 'Gingerbread',
          category: 'Cookie',
          dairy: 'No',
        },
        {
          name: 'Jelly bean',
          category: 'Candy',
          dairy: 'No',
        },
        {
          name: 'Lollipop',
          category: 'Candy',
          dairy: 'No',
        },
        {
          name: 'Honeycomb',
          category: 'Toffee',
          dairy: 'No',
        },
        {
          name: 'Donut',
          category: 'Pastry',
          dairy: 'Yes',
        },
        {
          name: 'KitKat',
          category: 'Candy',
          dairy: 'Yes',
        },
      ],
    }),
  }
</script>

[nekosaur]

Thank you for the PR and your interest in improving Vuetify. Unfortunately this is not how we plan to introduce this functionality.

[Esgator]

Thank you for the PR and your interest in improving Vuetify. Unfortunately this is not how we plan to introduce this functionality.

Thanks for your response. Is it short term planned or can you share some informations how it should be done so i might help?

[SystemKeeper]

@nekosaur Are there any information available on how this should be implemented? I would be interested in having this as well and would be open to contribute.

[Employee87]

Me too, but also, I would like to control which specific groups are expanded by default too, and to control them via a boolean.

[SystemKeeper]

@nekosaur @johnleider Any chance to get some information on this so we could contribute the feature? (Or help in another way?)

[johnleider]

Right now we need a champion for the Data Table component. Albert is currently inactive.

[ezBuilder]

<template v-slot:group-header="{ item, columns, toggleGroup, isGroupOpen }" > <template :ref=" () => { if (item.depth === 0 && !isGroupOpen(item)) { toggleGroup(item); } } " /> <tr> <td :colspan="columns.length"> <VBtn :icon="isGroupOpen(item) ? '$expand' : '$next'" size="small" variant="text" ref="expandBtn" @click="toggleGroup(item)" ></VBtn> {{ item.value }} </td> </tr> </template> </<template>

[sonicd300]

With this approach the toggle button will work and the groups will be expanded by default, once expanded the template will be removed allowing the expand/collapse button to work properly

<script setup>
import { ref } from 'vue';

const expandedGroups = ref<Set<string>>(new Set())
</script>

<template>
  <v-data-table ...>
    <template v-if="props.groupBy"
                     #group-header="{ item, columns, toggleGroup, isGroupOpen }">
      <tr>
        <td :colspan="columns.length">
          <template v-if="!expandedGroups.has(`${item.key}_${item.value}`)"> <!-- self removable template -->
            <template :ref="(el) => { if (!isGroupOpen(item)) { expandedGroups.add(`${item.key}_${item.value}`); toggleGroup(item); } }"></template>
          </template>

          <v-btn ref="expandBtn"
                      :icon="isGroupOpen(item) ? '$expand' : '$next'"
                      size="small"
                      variant="text"
                      @click="toggleGroup(item)" />
        </td>
      </tr>
  </v-data-table>
</template>

[J-Sek]

closing in favor of #22772