From 758d13898b69b13dc70f65860a4c5fc63ce6963e Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Tue, 28 May 2024 11:06:12 +0200
Subject: [PATCH 1/2] Add collapse & expand all groups

---
 src/components/data-table/ha-data-table.ts  | 19 ++++++++++++
 src/layouts/hass-tabs-subpage-data-table.ts | 32 ++++++++++++++++++++-
 src/translations/en.json                    |  2 ++
 3 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index 7c9f8aeda68e..92ccad596066 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -730,6 +730,25 @@ 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) {
+      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 491e36d2c9e3..f59c569c8cbc 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
         )}
-        <md-divider role="separator" tabindex="-1"></md-divider>
         <ha-menu-item
           .value=${undefined}
           @click=${this._handleGroupBy}
@@ -475,6 +476,27 @@ export class HaTabsSubpageDataTable extends LitElement {
         >
           ${localize("ui.components.subpage-data-table.dont_group_by")}
         </ha-menu-item>
+        <md-divider role="separator" tabindex="-1"></md-divider>
+        <ha-menu-item
+          @click=${this._collapseAllGroups}
+          .disabled=${this._groupColumn === undefined}
+        >
+          <ha-svg-icon
+            slot="start"
+            .path=${mdiUnfoldLessHorizontal}
+          ></ha-svg-icon>
+          ${localize("ui.components.subpage-data-table.collapse_all_groups")}
+        </ha-menu-item>
+        <ha-menu-item
+          @click=${this._expandAllGroups}
+          .disabled=${this._groupColumn === undefined}
+        >
+          <ha-svg-icon
+            slot="start"
+            .path=${mdiUnfoldMoreHorizontal}
+          ></ha-svg-icon>
+          ${localize("ui.components.subpage-data-table.expand_all_groups")}
+        </ha-menu-item>
       </ha-menu>
       <ha-menu anchor="sort-by-anchor" id="sort-by-menu" positioning="fixed">
         ${Object.entries(this.columns).map(([id, column]) =>
@@ -586,6 +608,14 @@ export class HaTabsSubpageDataTable extends LitElement {
     fireEvent(this, "grouping-changed", { value: columnId });
   }
 
+  private _collapseAllGroups() {
+    this._dataTable.collapseAllGroups();
+  }
+
+  private _expandAllGroups() {
+    this._dataTable.expandAllGroups();
+  }
+
   private _enableSelectMode() {
     this._selectMode = true;
   }
diff --git a/src/translations/en.json b/src/translations/en.json
index 508c709668f4..ba1d711b29a8 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -517,6 +517,8 @@
         "sort_by": "Sort by {sortColumn}",
         "group_by": "Group by {groupColumn}",
         "dont_group_by": "Don't group",
+        "collapse_all_groups": "Collapse all",
+        "expand_all_groups": "Expand all",
         "select": "Select",
         "selected": "Selected {selected}",
         "close_select_mode": "Close selection mode",

From d664269598f55c9b1d9e23972f09c6f2c9718fdf Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Tue, 28 May 2024 11:51:42 +0200
Subject: [PATCH 2/2] review suggestion

---
 src/components/data-table/ha-data-table.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index 92ccad596066..f40c4a9046de 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -736,7 +736,10 @@ export class HaDataTable extends LitElement {
   }
 
   public collapseAllGroups() {
-    if (!this.groupColumn) {
+    if (
+      !this.groupColumn ||
+      !this.data.some((item) => item[this.groupColumn!])
+    ) {
       return;
     }
     const grouped = groupBy(this.data, (item) => item[this.groupColumn!]);