Vuetify 3 v-data-table open groups and show grouped rows by default

Question

I'm building a vue application utilizing Vuetify 3. I have a vuetify v-data-table (currently dev/labs) that has grouped rows and I'm wondering if there is a way to have the groups automatically open on load so that the grouped rows are visible. Vuetify 2 had them open by default but so far, the Vuetify 3 version has them closed.

Is there a way to make/have the groups opened as the default?

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

<script>
  export default {
    data: () => ({
      sortBy: [{ key: 'name' }],
      groupBy: [{ key: 'dairy' }],
      headers: [
        {
          title: 'Dessert (100g serving)',
          align: 'start',
          value: 'name',
          groupable: false,
        },
        { title: 'Category', value: 'category', align: 'end' },
        { title: 'Dairy', value: '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',
        },
      ],
    }),
  }
</script>

Answer 1

Works in Vuetify 3.4.0. Use the group-header slot and use dynamic ref to execute code during render to toggle the group open. (You could instead use mustache for this).

   <template  v-slot:group-header="{ item, toggleGroup, isGroupOpen }">
                    <template :ref="(el)=>{
                        if (!isGroupOpen(item))
                            toggleGroup(item);
                        }"></template>

The above will run each time header is rendered. This will stop the group from being collapsible as ddtech mentioned in the comments. You can add the following hack to get around this.

Combine this with a 'loading' ref. Set to true when you load in data for the table and false after loaded. You can then modify the above like this

<template  v-slot:group-header="{ item, toggleGroup, isGroupOpen }">
                    <template :ref="(el)=>{
                        if (loading && !isGroupOpen(item))
                            toggleGroup(item);
                        }"></template>

Answer 2

Yes, you can set the group-expand prop to "true" to make the groups expanded by default. You can add this prop to your v-data-table component.

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