diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index 7c9f8aeda6..f40c4a9046 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -730,6 +730,28 @@ export class HaDataTable extends LitElement {
fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
};
+ public expandAllGroups() {
+ this._collapsedGroups = [];
+ fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
+ }
+
+ public collapseAllGroups() {
+ if (
+ !this.groupColumn ||
+ !this.data.some((item) => item[this.groupColumn!])
+ ) {
+ return;
+ }
+ const grouped = groupBy(this.data, (item) => item[this.groupColumn!]);
+ if (grouped.undefined) {
+ // undefined is a reserved group name
+ grouped[UNDEFINED_GROUP_KEY] = grouped.undefined;
+ delete grouped.undefined;
+ }
+ this._collapsedGroups = Object.keys(grouped);
+ fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
+ }
+
static get styles(): CSSResultGroup {
return [
haStyleScrollbar,
diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts
index 491e36d2c9..f59c569c8c 100644
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -10,6 +10,8 @@ import {
mdiFilterVariantRemove,
mdiFormatListChecks,
mdiMenuDown,
+ mdiUnfoldLessHorizontal,
+ mdiUnfoldMoreHorizontal,
} from "@mdi/js";
import {
CSSResultGroup,
@@ -466,7 +468,6 @@ export class HaTabsSubpageDataTable extends LitElement {
`
: nothing
)}
-
${localize("ui.components.subpage-data-table.dont_group_by")}
+
+
+
+ ${localize("ui.components.subpage-data-table.collapse_all_groups")}
+
+
+
+ ${localize("ui.components.subpage-data-table.expand_all_groups")}
+