Save and restore collapsed groups (#20591)

src/components/data-table/ha-data-table.ts

@@ -43,6 +43,10 @@ export interface SelectionChangedEvent {
   value: string[];
 }
 
+export interface CollapsedChangedEvent {
+  value: string[];
+}
+
 export interface SortingChangedEvent {
   column: string;
   direction: SortingDirection;
@@ -139,6 +143,8 @@ export class HaDataTable extends LitElement {
 
   @property() public sortDirection: SortingDirection = null;
 
+  @property({ attribute: false }) public initialCollapsedGroups?: string[];
+
   @state() private _filterable = false;
 
   @state() private _filter = "";
@@ -245,8 +251,12 @@ export class HaDataTable extends LitElement {
       ).length;
     }
 
-    if (properties.has("groupColumn")) {
+    if (!this.hasUpdated && this.initialCollapsedGroups) {
+      this._collapsedGroups = this.initialCollapsedGroups;
+      fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
+    } else if (properties.has("groupColumn")) {
       this._collapsedGroups = [];
+      fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
     }
 
     if (
@@ -723,6 +733,7 @@ export class HaDataTable extends LitElement {
     } else {
       this._collapsedGroups = [...this._collapsedGroups, groupName];
     }
+    fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
   };
 
   static get styles(): CSSResultGroup {
@@ -1096,5 +1107,6 @@ declare global {
     "selection-changed": SelectionChangedEvent;
     "row-click": RowClickedEvent;
     "sorting-changed": SortingChangedEvent;
+    "collapsed-changed": CollapsedChangedEvent;
   }
 }

src/layouts/hass-tabs-subpage-data-table.ts

@@ -55,6 +55,8 @@ export class HaTabsSubpageDataTable extends LitElement {
 
   @property({ type: Boolean, attribute: "main-page" }) public mainPage = false;
 
+  @property({ attribute: false }) public initialCollapsedGroups: string[] = [];
+
   /**
    * Object with the columns.
    * @type {Object}
@@ -425,6 +427,7 @@ export class HaTabsSubpageDataTable extends LitElement {
                 .sortDirection=${this._sortDirection}
                 .groupColumn=${this._groupColumn}
                 .groupOrder=${this.groupOrder}
+                .initialCollapsedGroups=${this.initialCollapsedGroups}
               >
                 ${!this.narrow
                   ? html`

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -134,6 +134,9 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
   @storage({ key: "devices-table-grouping", state: false, subscribe: false })
   private _activeGrouping?: string;
 
+  @storage({ key: "devices-table-collapsed", state: false, subscribe: false })
+  private _activeCollapsed?: string;
+
   private _sizeController = new ResizeController(this, {
     callback: (entries) => entries[0]?.contentRect.width,
   });
@@ -671,11 +674,13 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
               )
         ).length}
         .initialGroupColumn=${this._activeGrouping}
+        .initialCollapsedGroups=${this._activeCollapsed}
         .initialSorting=${this._activeSorting}
         @clear-filter=${this._clearFilter}
         @search-changed=${this._handleSearchChange}
         @sorting-changed=${this._handleSortingChanged}
         @grouping-changed=${this._handleGroupingChanged}
+        @collapsed-changed=${this._handleCollapseChanged}
         @row-click=${this._handleRowClicked}
         clickable
         hasFab
@@ -1005,6 +1010,10 @@ ${rejected
     this._activeGrouping = ev.detail.value;
   }
 
+  private _handleCollapseChanged(ev: CustomEvent) {
+    this._activeCollapsed = ev.detail.value;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       css`