Add query params to the DHCP, SSDP and Zeroconf tables

src/panels/config/integrations/integration-panels/dhcp/dhcp-config-panel.ts

@@ -102,6 +102,7 @@ export class DHCPConfigPanel extends SubscribeMixin(LitElement) {
           "ui.panel.config.dhcp.no_devices_found"
         )}
         filter=${this._macAddress || ""}
+        sync-url
       ></hass-tabs-subpage-data-table>
     `;
   }

src/panels/config/integrations/integration-panels/ssdp/ssdp-config-panel.ts

@@ -3,6 +3,7 @@ import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { DataTableSettingsController } from "../../../../../common/controllers/data-table-settings-controller";
 import type { LocalizeFunc } from "../../../../../common/translations/localize";
 import type {
   RowClickedEvent,
@@ -32,12 +33,11 @@ export class SSDPConfigPanel extends SubscribeMixin(LitElement) {
 
   @state() private _data: SSDPDiscoveryData[] = [];
 
-  @storage({
-    key: "ssdp-discovery-table-grouping",
-    state: false,
-    subscribe: false,
-  })
-  private _activeGrouping?: string = "ssdp_location";
+  private _tableSettings = new DataTableSettingsController(
+    this,
+    { grouping: "ssdp-discovery-table-grouping" },
+    { defaultGrouping: "ssdp_location" }
+  );
 
   @storage({
     key: "ssdp-discovery-table-collapsed",
@@ -79,6 +79,7 @@ export class SSDPConfigPanel extends SubscribeMixin(LitElement) {
           filterable: true,
           sortable: true,
           groupable: true,
+          urlName: "location",
         },
       };
 
@@ -101,9 +102,9 @@ export class SSDPConfigPanel extends SubscribeMixin(LitElement) {
         .route=${this.route}
         back-path="/config/integrations/integration/ssdp"
         .columns=${this._columns(this.hass.localize)}
-        .initialGroupColumn=${this._activeGrouping}
+        .initialGroupColumn=${this._tableSettings.grouping}
         .initialCollapsedGroups=${this._activeCollapsed}
-        @grouping-changed=${this._handleGroupingChanged}
+        @grouping-changed=${this._tableSettings.groupingChanged}
         @collapsed-changed=${this._handleCollapseChanged}
         .data=${this._dataWithIds(this._data)}
         .noDataText=${this.hass.localize(
@@ -111,6 +112,7 @@ export class SSDPConfigPanel extends SubscribeMixin(LitElement) {
         )}
         @row-click=${this._handleRowClicked}
         clickable
+        sync-url
       ></hass-tabs-subpage-data-table>
     `;
   }
@@ -126,10 +128,6 @@ export class SSDPConfigPanel extends SubscribeMixin(LitElement) {
     });
   }
 
-  private _handleGroupingChanged(ev: CustomEvent) {
-    this._activeGrouping = ev.detail.value;
-  }
-
   private _handleCollapseChanged(ev: CustomEvent) {
     this._activeCollapsed = ev.detail.value;
   }

src/panels/config/integrations/integration-panels/zeroconf/zeroconf-config-panel.ts

@@ -3,6 +3,7 @@ import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { DataTableSettingsController } from "../../../../../common/controllers/data-table-settings-controller";
 import type { LocalizeFunc } from "../../../../../common/translations/localize";
 import type {
   RowClickedEvent,
@@ -32,12 +33,11 @@ export class ZeroconfConfigPanel extends SubscribeMixin(LitElement) {
 
   @state() private _data: ZeroconfDiscoveryData[] = [];
 
-  @storage({
-    key: "zeroconf-discovery-table-grouping",
-    state: false,
-    subscribe: false,
-  })
-  private _activeGrouping?: string = "type";
+  private _tableSettings = new DataTableSettingsController(
+    this,
+    { grouping: "zeroconf-discovery-table-grouping" },
+    { defaultGrouping: "type" }
+  );
 
   @storage({
     key: "zeroconf-discovery-table-collapsed",
@@ -74,6 +74,7 @@ export class ZeroconfConfigPanel extends SubscribeMixin(LitElement) {
           filterable: true,
           sortable: true,
           groupable: true,
+          urlName: "type",
         },
         ip_addresses: {
           title: localize("ui.panel.config.zeroconf.ip_addresses"),
@@ -108,9 +109,9 @@ export class ZeroconfConfigPanel extends SubscribeMixin(LitElement) {
         .route=${this.route}
         back-path="/config/integrations/integration/zeroconf"
         .columns=${this._columns(this.hass.localize)}
-        .initialGroupColumn=${this._activeGrouping}
+        .initialGroupColumn=${this._tableSettings.grouping}
         .initialCollapsedGroups=${this._activeCollapsed}
-        @grouping-changed=${this._handleGroupingChanged}
+        @grouping-changed=${this._tableSettings.groupingChanged}
         @collapsed-changed=${this._handleCollapseChanged}
         .data=${this._dataWithIds(this._data)}
         .noDataText=${this.hass.localize(
@@ -118,6 +119,7 @@ export class ZeroconfConfigPanel extends SubscribeMixin(LitElement) {
         )}
         @row-click=${this._handleRowClicked}
         clickable
+        sync-url
       ></hass-tabs-subpage-data-table>
     `;
   }
@@ -129,10 +131,6 @@ export class ZeroconfConfigPanel extends SubscribeMixin(LitElement) {
     });
   }
 
-  private _handleGroupingChanged(ev: CustomEvent) {
-    this._activeGrouping = ev.detail.value;
-  }
-
   private _handleCollapseChanged(ev: CustomEvent) {
     this._activeCollapsed = ev.detail.value;
   }

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

@@ -29,6 +29,14 @@ const usersTableParams = {
   group: "string?",
 } satisfies Redirect["params"];
 
+// The DHCP, SSDP and Zeroconf discovery tables read these from the link
+const discoveryTableParams = {
+  search: "string?",
+  sort: "string?",
+  direction: "string?",
+  group: "string?",
+} satisfies Redirect["params"];
+
 // The Marketplace tabs with a table read these from the link
 const marketplaceTableParams = {
   search: "string?",
@@ -213,6 +221,7 @@ export const getMyRedirects = (): Redirects => ({
   config_dhcp: {
     component: "dhcp",
     redirect: "/config/dhcp",
+    params: discoveryTableParams,
   },
   config_energy: {
     component: "energy",
@@ -236,10 +245,12 @@ export const getMyRedirects = (): Redirects => ({
   config_ssdp: {
     component: "ssdp",
     redirect: "/config/ssdp",
+    params: discoveryTableParams,
   },
   config_zeroconf: {
     component: "zeroconf",
     redirect: "/config/zeroconf",
+    params: discoveryTableParams,
   },
   devices: {
     redirect: "/config/devices/dashboard",