[Feature Request] VDataTable: Ability to have grouped rows closed and/or open by default

[webdevnerdstuff]

Problem to solve

Makes it more flexible for the users who want all rows open by default. This is the default for the v2 data table, but the v3 has them closed by default. The ability to choose which would be nice.

Proposed solution

Perhaps a prop of all-expanded or groups-expanded (or whatever makes the most sense) with a boolean type of some kind?

[bcurless]

Yes this would be a nice feature. Adding an all open or all closed would be suitable for many people. but if someone was going to add this feature, they might as well make it so individual groups can be open or closed as well.

Personally, I want the ability to have them all expanded (open) by default. I would take a workaround to accomplish this at this point.

[dkmorgan]

Personally, I want the ability to have them all expanded (open) by default. I would take a workaround to accomplish this at this point.

Is anyone aware of a suitable workaround to expand all groups by default?

[sw34]

I found this from Stackoverflow, it works but you cant collapse anymore, which for me is fine for now.

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

[dkmorgan]

@sw34

You could try the updated solution which adds the use of the loading prop value to the condition to allow collapsing. Unfortunately, it didn't work for me due to timing mismatches between the rendering of the groups and the loading prop value changes.

[sw34]

@dkmorgan

I had the same timing issue. For my current use case, the current work around is good enough, but it would be nice to have either a better workaround or a permanent solution like the one proposed.

[crazyrabbit0]

I stumbled upon this problem today and came up with a solution that seems to work fine, if anyone needs it, I posted it here and on Stack Overflow.

[philly-vanilly]

the proposed workarounds work only on visible rows. I have a table with multiple nested groups and the ones off-screen (nested or root) are ignored. I tried both v-data-table-virtual and v-data-table with :items-per-page="-1"

[laventnc]

incase anyone doesn't have a loading prop for data, you can also just do something like this:

const loaded = ref(false)
onMounted(() => {
  loaded.value = true
})

<template #group-header="{ item, columns, isGroupOpen, toggleGroup }">
  <template :ref="(el) => {
    if (!isGroupOpen(item) && !loaded) toggleGroup(item)
  }"></template>
</template>