Store grouping and sorting for device table (#20583)

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

@@ -35,15 +35,6 @@ import { filterData, sortData } from "./sort-filter";
 import { groupBy } from "../../common/util/group-by";
 import { stringCompare } from "../../common/string/compare";
 
-declare global {
-  // for fire event
-  interface HASSDomEvents {
-    "selection-changed": SelectionChangedEvent;
-    "row-click": RowClickedEvent;
-    "sorting-changed": SortingChangedEvent;
-  }
-}
-
 export interface RowClickedEvent {
   id: string;
 }
@@ -213,17 +204,19 @@ export class HaDataTable extends LitElement {
         (column) => column.filterable
       );
 
-      for (const columnId in this.columns) {
+      if (!this.sortColumn) {
-        if (this.columns[columnId].direction) {
+        for (const columnId in this.columns) {
-          this.sortDirection = this.columns[columnId].direction!;
+          if (this.columns[columnId].direction) {
-          this.sortColumn = columnId;
+            this.sortDirection = this.columns[columnId].direction!;
+            this.sortColumn = columnId;
 
-          fireEvent(this, "sorting-changed", {
+            fireEvent(this, "sorting-changed", {
-            column: columnId,
+              column: columnId,
-            direction: this.sortDirection,
+              direction: this.sortDirection,
-          });
+            });
 
-          break;
+            break;
+          }
         }
       }
 
@@ -1031,4 +1024,11 @@ declare global {
   interface HTMLElementTagNameMap {
     "ha-data-table": HaDataTable;
   }
+
+  // for fire event
+  interface HASSDomEvents {
+    "selection-changed": SelectionChangedEvent;
+    "row-click": RowClickedEvent;
+    "sorting-changed": SortingChangedEvent;
+  }
 }

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

@@ -41,14 +41,6 @@ import type { HomeAssistant, Route } from "../types";
 import "./hass-tabs-subpage";
 import type { PageNavigation } from "./hass-tabs-subpage";
 
-declare global {
-  // for fire event
-  interface HASSDomEvents {
-    "search-changed": { value: string };
-    "clear-filter": undefined;
-  }
-}
-
 @customElement("hass-tabs-subpage-data-table")
 export class HaTabsSubpageDataTable extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -166,6 +158,11 @@ export class HaTabsSubpageDataTable extends LitElement {
 
   @property({ type: Boolean }) public showFilters = false;
 
+  @property({ attribute: false }) public initalSorting?: {
+    column: string;
+    direction: SortingDirection;
+  };
+
   @property() public initialGroupColumn?: string;
 
   @state() private _sortColumn?: string;
@@ -190,9 +187,16 @@ export class HaTabsSubpageDataTable extends LitElement {
     this._dataTable.clearSelection();
   }
 
-  protected firstUpdated() {
+  protected willUpdate() {
+    if (this.hasUpdated) {
+      return;
+    }
     if (this.initialGroupColumn) {
-      this._groupColumn = this.initialGroupColumn;
+      this._setGroupColumn(this.initialGroupColumn);
+    }
+    if (this.initalSorting) {
+      this._sortColumn = this.initalSorting.column;
+      this._sortDirection = this.initalSorting.direction;
     }
   }
 
@@ -563,7 +567,12 @@ export class HaTabsSubpageDataTable extends LitElement {
   }
 
   private _handleGroupBy(ev) {
-    this._groupColumn = ev.currentTarget.value;
+    this._setGroupColumn(ev.currentTarget.value);
+  }
+
+  private _setGroupColumn(columnId: string) {
+    this._groupColumn = columnId;
+    fireEvent(this, "grouping-changed", { value: columnId });
   }
 
   private _enableSelectMode() {
@@ -819,4 +828,11 @@ declare global {
   interface HTMLElementTagNameMap {
     "hass-tabs-subpage-data-table": HaTabsSubpageDataTable;
   }
+
+  // for fire event
+  interface HASSDomEvents {
+    "search-changed": { value: string };
+    "grouping-changed": { value: string };
+    "clear-filter": undefined;
+  }
 }

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

@@ -26,6 +26,7 @@ import {
   DataTableColumnContainer,
   RowClickedEvent,
   SelectionChangedEvent,
+  SortingChangedEvent,
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/entity/ha-battery-icon";
@@ -74,6 +75,7 @@ import {
   rejectedItems,
 } from "../../../common/util/promise-all-settled-results";
 import { showAlertDialog } from "../../lovelace/custom-card-helpers";
+import { storage } from "../../../common/decorators/storage";
 
 interface DeviceRowData extends DeviceRegistryEntry {
   device?: DeviceRowData;
@@ -117,6 +119,12 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
   @state()
   _labels!: LabelRegistryEntry[];
 
+  @storage({ key: "devices-table-sort", state: false, subscribe: false })
+  private _activeSorting?: SortingChangedEvent;
+
+  @storage({ key: "devices-table-grouping", state: false, subscribe: false })
+  private _activeGrouping?: string;
+
   private _ignoreLocationChange = false;
 
   public connectedCallback() {
@@ -614,8 +622,12 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
                 Array.isArray(val) ? val.length : val
               )
         ).length}
+        .initialGroupColumn=${this._activeGrouping}
+        .initalSorting=${this._activeSorting}
         @clear-filter=${this._clearFilter}
         @search-changed=${this._handleSearchChange}
+        @sorting-changed=${this._handleSortingChanged}
+        @grouping-changed=${this._handleGroupingChanged}
         @row-click=${this._handleRowClicked}
         clickable
         hasFab
@@ -855,6 +867,14 @@ ${rejected
     });
   }
 
+  private _handleSortingChanged(ev: CustomEvent) {
+    this._activeSorting = ev.detail;
+  }
+
+  private _handleGroupingChanged(ev: CustomEvent) {
+    this._activeGrouping = ev.detail.value;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       css`