Use the data table settings controller on dashboards and resources

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -11,6 +11,7 @@ import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoize from "memoize-one";
+import { DataTableSettingsController } from "../../../../common/controllers/data-table-settings-controller";
 import { storage } from "../../../../common/decorators/storage";
 import type { HASSDomEvent } from "../../../../common/dom/fire_event";
 import { navigate } from "../../../../common/navigate";
@@ -21,7 +22,6 @@ import type {
   DataTableColumnContainer,
   RowClickedEvent,
   SelectionChangedEvent,
-  SortingChangedEvent,
 } from "../../../../components/data-table/ha-data-table";
 import "../../../../components/chips/ha-assist-chip";
 import "../../../../components/ha-alert";
@@ -115,21 +115,15 @@ export class HaConfigLovelaceDashboards extends LitElement {
   @query("hass-tabs-subpage-data-table", true)
   private _dataTable!: HaTabsSubpageDataTable;
 
-  @state()
-  @storage({
-    storage: "sessionStorage",
-    key: "lovelace-dashboards-table-search",
-    state: true,
-    subscribe: false,
-  })
-  private _filter = "";
-
-  @storage({
-    key: "lovelace-dashboards-table-sort",
-    state: false,
-    subscribe: false,
-  })
-  private _activeSorting?: SortingChangedEvent;
+  private _tableSettings = new DataTableSettingsController(
+    this,
+    {
+      search: "lovelace-dashboards-table-search",
+      sorting: "lovelace-dashboards-table-sort",
+      grouping: "lovelace-dashboards-table-grouping",
+    },
+    { defaultGrouping: "localized_type" }
+  );
 
   @storage({
     key: "lovelace-dashboards-table-column-order",
@@ -145,13 +139,6 @@ export class HaConfigLovelaceDashboards extends LitElement {
   })
   private _activeHiddenColumns?: string[];
 
-  @storage({
-    key: "lovelace-dashboards-table-grouping",
-    state: false,
-    subscribe: false,
-  })
-  private _activeGrouping?: string = "localized_type";
-
   @storage({
     key: "lovelace-dashboards-table-collapsed",
     state: false,
@@ -237,6 +224,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
         sortable: true,
         groupable: true,
         filterable: true,
+        urlName: "type",
       };
 
       columns.mode = {
@@ -429,17 +417,18 @@ export class HaConfigLovelaceDashboards extends LitElement {
             ? []
             : this._getItems(this._dashboards, defaultPanel, this.hass.panels)
         }
-        .initialGroupColumn=${this._activeGrouping}
+        .initialGroupColumn=${this._tableSettings.grouping}
         .initialCollapsedGroups=${this._activeCollapsed}
-        .initialSorting=${this._activeSorting}
+        .initialSorting=${this._tableSettings.sorting}
         .columnOrder=${this._activeColumnOrder}
         .hiddenColumns=${this._activeHiddenColumns}
-        @grouping-changed=${this._handleGroupingChanged}
+        @grouping-changed=${this._tableSettings.groupingChanged}
         @collapsed-changed=${this._handleCollapseChanged}
         @columns-changed=${this._handleColumnsChanged}
-        @sorting-changed=${this._handleSortingChanged}
-        .filter=${this._filter}
-        @search-changed=${this._handleSearchChange}
+        @sorting-changed=${this._tableSettings.sortingChanged}
+        .filter=${this._tableSettings.search}
+        @search-changed=${this._tableSettings.searchChanged}
+        ?sync-url=${!this._loading && !this._loadFailed}
         @row-click=${this._handleRowClicked}
         selectable
         .selected=${this._selected.length}
@@ -804,23 +793,11 @@ export class HaConfigLovelaceDashboards extends LitElement {
     });
   };
 
-  private _handleSortingChanged(ev: CustomEvent) {
-    this._activeSorting = ev.detail;
-  }
-
-  private _handleSearchChange(ev: CustomEvent) {
-    this._filter = ev.detail.value;
-  }
-
   private _handleColumnsChanged(ev: CustomEvent) {
     this._activeColumnOrder = ev.detail.columnOrder;
     this._activeHiddenColumns = ev.detail.hiddenColumns;
   }
 
-  private _handleGroupingChanged(ev: CustomEvent) {
-    this._activeGrouping = ev.detail.value;
-  }
-
   private _handleCollapseChanged(ev: CustomEvent) {
     this._activeCollapsed = ev.detail.value;
   }

src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts

@@ -3,12 +3,12 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoize from "memoize-one";
+import { DataTableSettingsController } from "../../../../common/controllers/data-table-settings-controller";
 import { stringCompare } from "../../../../common/string/compare";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
 import type {
   DataTableColumnContainer,
   RowClickedEvent,
-  SortingChangedEvent,
 } from "../../../../components/data-table/ha-data-table";
 import "../../../../components/ha-card";
 import "../../../../components/ha-button";
@@ -55,21 +55,10 @@ export class HaConfigLovelaceResources extends LitElement {
 
   @state() private _lovelaceInfo?: LovelaceInfo;
 
-  @state()
-  @storage({
-    storage: "sessionStorage",
-    key: "lovelace-resources-table-search",
-    state: true,
-    subscribe: false,
-  })
-  private _filter = "";
-
-  @storage({
-    key: "lovelace-resources-table-sort",
-    state: false,
-    subscribe: false,
-  })
-  private _activeSorting?: SortingChangedEvent;
+  private _tableSettings = new DataTableSettingsController(this, {
+    search: "lovelace-resources-table-search",
+    sorting: "lovelace-resources-table-sort",
+  });
 
   @storage({
     key: "lovelace-resources-table-column-order",
@@ -184,13 +173,14 @@ export class HaConfigLovelaceResources extends LitElement {
         .noDataText=${this.hass.localize(
           "ui.panel.config.lovelace.resources.picker.no_resources"
         )}
-        .initialSorting=${this._activeSorting}
+        .initialSorting=${this._tableSettings.sorting}
         .columnOrder=${this._activeColumnOrder}
         .hiddenColumns=${this._activeHiddenColumns}
         @columns-changed=${this._handleColumnsChanged}
-        @sorting-changed=${this._handleSortingChanged}
-        .filter=${this._filter}
-        @search-changed=${this._handleSearchChange}
+        @sorting-changed=${this._tableSettings.sortingChanged}
+        .filter=${this._tableSettings.search}
+        @search-changed=${this._tableSettings.searchChanged}
+        sync-url
         @row-click=${this._editResource}
         has-fab
         clickable
@@ -329,14 +319,6 @@ export class HaConfigLovelaceResources extends LitElement {
     }
   };
 
-  private _handleSortingChanged(ev: CustomEvent) {
-    this._activeSorting = ev.detail;
-  }
-
-  private _handleSearchChange(ev: CustomEvent) {
-    this._filter = ev.detail.value;
-  }
-
   private _handleColumnsChanged(ev: CustomEvent) {
     this._activeColumnOrder = ev.detail.columnOrder;
     this._activeHiddenColumns = ev.detail.hiddenColumns;

src/panels/my/ha-panel-my.ts

@@ -301,10 +301,12 @@ export const getMyRedirects = (): Redirects => ({
   lovelace_dashboards: {
     component: "lovelace",
     redirect: "/config/lovelace/dashboards",
+    params: dashboardsTableParams,
   },
   lovelace_resources: {
     component: "lovelace",
     redirect: "/config/lovelace/resources",
+    params: dashboardResourcesTableParams,
   },
   oauth: {
     redirect: "/auth/external/callback",
@@ -539,6 +541,21 @@ export interface Redirect {
   optional_params?: Record<string, ParamType>;
 }
 
+// The dashboards table reads these from the link
+const dashboardsTableParams = {
+  search: "string?",
+  sort: "string?",
+  direction: "string?",
+  group: "string?",
+} satisfies Redirect["params"];
+
+// The dashboard resources table reads these from the link
+const dashboardResourcesTableParams = {
+  search: "string?",
+  sort: "string?",
+  direction: "string?",
+} satisfies Redirect["params"];
+
 @customElement("ha-panel-my")
 class HaPanelMy extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;