Sort groups if same as sort column (#26010)

* fix(grouping): if sorted by column sort group

* chore: use props to group for memoization
This commit is contained in:
Kevin Lakotko 2025-07-07 12:23:27 -04:00 committed by GitHub
parent b60f2e3201
commit 2e8203f666
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -507,7 +507,9 @@ export class HaDataTable extends LitElement {
this.hasFab,
this.groupColumn,
this.groupOrder,
this._collapsedGroups
this._collapsedGroups,
this.sortColumn,
this.sortDirection
)}
.keyFunction=${this._keyFunction}
.renderItem=${renderRow}
@ -702,22 +704,37 @@ export class HaDataTable extends LitElement {
hasFab: boolean,
groupColumn: string | undefined,
groupOrder: string[] | undefined,
collapsedGroups: string[]
collapsedGroups: string[],
sortColumn: string | undefined,
sortDirection: SortingDirection
) => {
if (appendRow || hasFab || groupColumn) {
let items = [...data];
if (groupColumn) {
const isGroupSortColumn = sortColumn === groupColumn;
const grouped = groupBy(items, (item) => item[groupColumn]);
if (grouped.undefined) {
// make sure ungrouped items are at the bottom
grouped[UNDEFINED_GROUP_KEY] = grouped.undefined;
delete grouped.undefined;
}
const sorted: Record<string, DataTableRowData[]> = Object.keys(
const sortedEntries: [string, DataTableRowData[]][] = Object.keys(
grouped
)
.sort((a, b) => {
if (!groupOrder && isGroupSortColumn) {
const comparison = stringCompare(
a,
b,
this.hass.locale.language
);
if (sortDirection === "asc") {
return comparison;
}
return comparison * -1;
}
const orderA = groupOrder?.indexOf(a) ?? -1;
const orderB = groupOrder?.indexOf(b) ?? -1;
if (orderA !== orderB) {
@ -735,12 +752,18 @@ export class HaDataTable extends LitElement {
this.hass.locale.language
);
})
.reduce((obj, key) => {
obj[key] = grouped[key];
return obj;
}, {});
.reduce(
(entries, key) => {
const entry: [string, DataTableRowData[]] = [key, grouped[key]];
entries.push(entry);
return entries;
},
[] as [string, DataTableRowData[]][]
);
const groupedItems: DataTableRowData[] = [];
Object.entries(sorted).forEach(([groupName, rows]) => {
sortedEntries.forEach(([groupName, rows]) => {
const collapsed = collapsedGroups.includes(groupName);
groupedItems.push({
append: true,
@ -836,7 +859,9 @@ export class HaDataTable extends LitElement {
this.hasFab,
this.groupColumn,
this.groupOrder,
this._collapsedGroups
this._collapsedGroups,
this.sortColumn,
this.sortDirection
);
if (