Add collapse & expand all groups (#20891)

* Add collapse & expand all groups

* review suggestion

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,

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;
   }

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",