[Feature Request] Allow the removal of the Group column from VDataTable

[dkmorgan]

Problem to solve

When setting the group-by prop, a Group column is automatically injected into the table headers and the rows within the expanded group.

Although this may be useful, it also results in a mass of unoccupied row space within the expanded group. (Vuetify 3 Grouping Example)

This was not the case with Vuetify 2 where a Group column was not automatically injected. (Vuetify 2 Grouping Example)

Personally speaking, the Groups are visually clear to the user without having to add an extra Group column.

Proposed solution

Extend the group-by prop, or add another new prop that enables/disables the injection of the Group column.

[BenBurnett]

    <template #[`column.data-table-group`]></template>

This worked for me to remove the Group column.

[dkmorgan]

@BenBurnett

Thanks for the workaround details. Just want to confirm that you don't use the headers and group-headers slots to apply customization to the table. I currently use these slots (to apply custom styling, etc.) and the workaround didn't remove the Group column in this case.

I have a partial workaround by filtering out the data-table-group column within the headers and group-headers slots but have not been able to remove the column inserted by item.data-table-group within the expanded group.

[BenBurnett]

@BenBurnett

Thanks for the workaround details. Just want to confirm that you don't use the headers and group-headers slots to apply customization to the table. I currently use these slots (to apply custom styling, etc.) and the workaround didn't remove the Group column in this case.

I have a partial workaround by filtering out the data-table-group column within the headers and group-headers slots but have not been able to remove the column inserted by item.data-table-group within the expanded group.

I am currently using a header to hide as much of the Group column as I can.

  {
    title: '',
    key: 'data-table-group',
    width: '0px',
    align: 'center',
    sortable: false
  },

Additionally, I am using the group-header slot to provide styling for the group header. I have functionality currently working to render a collapsible group header that defaults to open.

[dkmorgan]

@BenBurnett

I am currently using a header to hide as much of the Group column as I can.

Thanks a bunch for sharing this. This resulted in the layout I was trying to achieve.

Additionally, I am using the group-header slot to provide styling for the group header. I have functionality currently working to render a collapsible group header that defaults to open.

Can you possibly share how you managed to get the group to open by default? The feature has been requested on #17707, but I haven't managed to figure out a suitable workaround yet.

[dkmorgan]

For anyone looking for a quick and dirty workaround, here's what I ended up with to completely remove the Group column using v3.4.2.

• Define content for the #headers slot and remove the 'data-table-group' column from it.

  <!-- Example -->
  <tr>
  <th v-for="column in columns.filter((item) => item.key !== 'data-table-group')" :key="column.key">
    {{ column.title }}
  </th>
  </tr>

• Define content for the #group-header slot and remove the 'data-table-group' column from it.

  <!-- Example -->
  <tr>
  <td :colspan="columns.filter((item) => item.key !== 'data-table-group').length">
    {{ item.value }}
  </td>
  </tr>

• Add all your item columns to the #item slot.

[SystemKeeper]

Another option to hide the column is to do:

{ title: "", key: "data-table-group", align: ' d-none' },

@johnleider Please reopen, this is not really solved yet.