Open dkmorgan opened 1 year ago
<template #[`column.data-table-group`]></template>
This worked for me to remove the Group
column.
@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
Thanks for the workaround details. Just want to confirm that you don't use the
headers
andgroup-headers
slots to apply customization to the table. I currently use these slots (to apply custom styling, etc.) and the workaround didn't remove theGroup
column in this case.I have a partial workaround by filtering out the
data-table-group
column within theheaders
andgroup-headers
slots but have not been able to remove the column inserted byitem.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.
@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.
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.
#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>
#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>
#item
slot.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.
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.