From b4d2c8608979868fe6d02cc4f2d9839e9bb9b825 Mon Sep 17 00:00:00 2001
From: "J. Nick Koston" <nick@home-assistant.io>
Date: Tue, 18 Aug 2026 18:26:18 -0500
Subject: [PATCH 1/5] Migrate device table to TanStack Table v9

---
 package.json                                  |   2 +-
 pnpm-lock.yaml                                |  42 +++--
 src/components/dashboard/device-table-grid.ts | 156 +++++++++---------
 src/components/dashboard/device-table.ts      |  42 ++---
 src/components/dashboard/prefs.ts             |   4 +-
 src/components/dashboard/render-content.ts    |   4 +-
 src/components/dashboard/table-columns.ts     |   9 +-
 src/components/dashboard/table-features.ts    |  38 +++++
 src/pages/dashboard.ts                        |   4 +-
 test/components/dashboard/prefs.test.ts       |   4 +-
 .../dashboard/table-columns.test.ts           |  21 ++-
 11 files changed, 199 insertions(+), 127 deletions(-)
 create mode 100644 src/components/dashboard/table-features.ts

diff --git a/package.json b/package.json
index 1b38e0635..6da22b938 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "@lit/reactive-element": "2.1.2",
     "@mdi/js": "7.4.47",
     "@replit/codemirror-indentation-markers": "^6.5.3",
-    "@tanstack/lit-table": "^8.21.3",
+    "@tanstack/lit-table": "^9.1.2",
     "codemirror": "^6.0.2",
     "esptool-js": "^0.6.1",
     "improv-wifi-serial-sdk": "^2.8.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f58f5a0cb..462d6f99b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,8 +62,8 @@ importers:
         specifier: ^6.5.3
         version: 6.5.3(@codemirror/language@6.12.4)(@codemirror/state@6.7.1)(@codemirror/view@6.43.8)
       '@tanstack/lit-table':
-        specifier: ^8.21.3
-        version: 8.21.3(lit@3.3.3)
+        specifier: ^9.1.2
+        version: 9.1.2(@lit/context@1.1.6)(lit@3.3.3)
       codemirror:
         specifier: ^6.0.2
         version: 6.0.2
@@ -534,15 +534,24 @@ packages:
   '@swc/helpers@0.5.23':
     resolution: {integrity: sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==}
 
-  '@tanstack/lit-table@8.21.3':
-    resolution: {integrity: sha512-NXe/No6HRGN+OZMJ1pKmoejiFS1QfjirWYOiahBWMojSsLIB5SqYb45L/jlswpKhEAaMWCdps8c93z8HfMG9Kg==}
-    engines: {node: '>=12'}
+  '@tanstack/lit-store@0.14.1':
+    resolution: {integrity: sha512-YzcmHhuH9siOvFiEH56HIQqkipkPaUJ3weC0jVKe8l3AZ2autYnpMGNvCG5tZFgmdsmvxr6W01zcW+yLlsQ9Tg==}
+    peerDependencies:
+      lit: ^3.0.0
+
+  '@tanstack/lit-table@9.1.2':
+    resolution: {integrity: sha512-jNNOeajZsC2NXXUFTtsYCIr753PpxMP1qeSQ4KoPDV2hoDQqBTPjpVYktjs8LFX4gXS6ATuZDBpqBNarTbHS6g==}
+    engines: {node: '>=20'}
     peerDependencies:
+      '@lit/context': ^1.1.0
       lit: ^3.1.3
 
-  '@tanstack/table-core@8.21.3':
-    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
-    engines: {node: '>=12'}
+  '@tanstack/store@0.11.1':
+    resolution: {integrity: sha512-mzTOBhypOuDJAy/D8n2MfUZ1HFkXnmSETviRyhqEC8LUE7/IZQExOTxMANj3KjTofYTkFNpBY67qaVrT41YccA==}
+
+  '@tanstack/table-core@9.1.2':
+    resolution: {integrity: sha512-ONpWQeass1sfg80CWF1NSwQ8r3GiqxA2lT/EdqIcrDEPZ0Z+0mM94eQoFYLPN0Kztzj8TQVb2+PrSZSItqA61g==}
+    engines: {node: '>=20'}
 
   '@tybys/wasm-util@0.10.3':
     resolution: {integrity: sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==}
@@ -1824,12 +1833,23 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@tanstack/lit-table@8.21.3(lit@3.3.3)':
+  '@tanstack/lit-store@0.14.1(lit@3.3.3)':
     dependencies:
-      '@tanstack/table-core': 8.21.3
+      '@tanstack/store': 0.11.1
       lit: 3.3.3
 
-  '@tanstack/table-core@8.21.3': {}
+  '@tanstack/lit-table@9.1.2(@lit/context@1.1.6)(lit@3.3.3)':
+    dependencies:
+      '@lit/context': 1.1.6
+      '@tanstack/lit-store': 0.14.1(lit@3.3.3)
+      '@tanstack/table-core': 9.1.2
+      lit: 3.3.3
+
+  '@tanstack/store@0.11.1': {}
+
+  '@tanstack/table-core@9.1.2':
+    dependencies:
+      '@tanstack/store': 0.11.1
 
   '@tybys/wasm-util@0.10.3':
     dependencies:
diff --git a/src/components/dashboard/device-table-grid.ts b/src/components/dashboard/device-table-grid.ts
index 648a6e86f..72861c31a 100644
--- a/src/components/dashboard/device-table-grid.ts
+++ b/src/components/dashboard/device-table-grid.ts
@@ -8,17 +8,18 @@ import type { LocalizeFunc } from "../../common/localize.js";
 import { tourAnchor } from "../guided-tour/tour-anchor.js";
 import { getActiveTourConfiguration } from "../guided-tour/tour-session.js";
 import type { DeviceRow } from "./table-columns.js";
+import type { DeviceTableFeatures } from "./table-features.js";
 
 export interface DeviceTableHeadProps {
-  table: Table<DeviceRow>;
+  table: Table<DeviceTableFeatures, DeviceRow>;
   selectMode: boolean;
   allSelected: boolean;
   onToggleAll: () => void;
 }
 
 export interface DeviceTableBodyProps {
-  table: Table<DeviceRow>;
-  rows: Row<DeviceRow>[];
+  table: Table<DeviceTableFeatures, DeviceRow>;
+  rows: Row<DeviceTableFeatures, DeviceRow>[];
   selectMode: boolean;
   selectedDevices: Set<string>;
   highlightConfiguration: string | null;
@@ -40,7 +41,7 @@ export function renderDeviceTableHead(p: DeviceTableHeadProps): TemplateResult {
   return html`
     <thead>
       ${p.table.getHeaderGroups().map(
-        (hg: HeaderGroup<DeviceRow>) => html`
+        (hg: HeaderGroup<DeviceTableFeatures, DeviceRow>) => html`
           <tr role="row">
             ${
               p.selectMode
@@ -54,50 +55,55 @@ export function renderDeviceTableHead(p: DeviceTableHeadProps): TemplateResult {
                   </th>`
                 : nothing
             }
-            ${hg.headers.map((header: Header<DeviceRow, unknown>) => {
-              const sorted = header.column.getIsSorted();
-              const canSort = header.column.getCanSort();
-              return html`
-                <th
-                  role="columnheader"
-                  aria-sort=${
-                    sorted === "asc"
-                      ? "ascending"
-                      : sorted === "desc"
-                        ? "descending"
-                        : "none"
-                  }
-                  class="${canSort ? "sortable" : ""} ${
-                    sorted ? "sorted" : ""
-                  } col-${header.column.id}"
-                  style="width:${header.getSize()}px"
-                  @click=${canSort ? () => header.column.toggleSorting() : nothing}
-                >
-                  <span class="th-content">
-                    ${
-                      header.isPlaceholder
-                        ? null
-                        : flexRender(header.column.columnDef.header, header.getContext())
-                    }
-                    ${
-                      canSort
-                        ? html`<wa-icon
-                            class="sort-icon"
-                            library="mdi"
-                            name=${
-                              sorted === "asc"
-                                ? "chevron-up"
-                                : sorted === "desc"
-                                  ? "chevron-down"
-                                  : "unfold-more-horizontal"
-                            }
-                          ></wa-icon>`
-                        : nothing
-                    }
-                  </span>
-                </th>
-              `;
-            })}
+            ${hg.headers.map(
+              (header: Header<DeviceTableFeatures, DeviceRow, unknown>) => {
+                const sorted = header.column.getIsSorted();
+                const canSort = header.column.getCanSort();
+                const ariaSort =
+                  sorted === "asc"
+                    ? "ascending"
+                    : sorted === "desc"
+                      ? "descending"
+                      : "none";
+                const sortIcon =
+                  sorted === "asc"
+                    ? "chevron-up"
+                    : sorted === "desc"
+                      ? "chevron-down"
+                      : "unfold-more-horizontal";
+                return html`
+                  <th
+                    role="columnheader"
+                    aria-sort=${ariaSort}
+                    class="${canSort ? "sortable" : ""} ${
+                      sorted ? "sorted" : ""
+                    } col-${header.column.id}"
+                    style="width:${header.getSize()}px"
+                    @click=${canSort ? () => header.column.toggleSorting() : nothing}
+                  >
+                    <span class="th-content">
+                      ${
+                        header.isPlaceholder
+                          ? null
+                          : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )
+                      }
+                      ${
+                        canSort
+                          ? html`<wa-icon
+                              class="sort-icon"
+                              library="mdi"
+                              name=${sortIcon}
+                            ></wa-icon>`
+                          : nothing
+                      }
+                    </span>
+                  </th>
+                `;
+              }
+            )}
             <th class="actions-col"></th>
           </tr>
         `
@@ -161,32 +167,34 @@ export function renderDeviceTableBody(p: DeviceTableBodyProps): TemplateResult {
                         </td>`
                       : nothing
                   }
-                  ${row.getVisibleCells().map((cell: Cell<DeviceRow, unknown>) => {
-                    // The stacked mobile layout (table-styles.ts) shows each
-                    // cell's column header as a field label. It's a real
-                    // span (not a CSS ::before) so screen readers announce
-                    // it on mobile, where the <thead> is hidden; the span is
-                    // display:none on desktop, so it stays out of the a11y
-                    // tree there (the column header already provides context).
-                    // Name is the card title and actions is a button row, so
-                    // neither gets a label. Only string headers can be used as
-                    // a label; a future flexRender (template/function) header
-                    // would stringify to "[object Object]", so skip it.
-                    const id = cell.column.id;
-                    const header = cell.column.columnDef.header;
-                    const label =
-                      id !== "name" && id !== "actions" && typeof header === "string"
-                        ? header
-                        : null;
-                    return html`<td role="gridcell" class="col-${id}">
-                      ${
-                        label !== null
-                          ? html`<span class="cell-stack-label">${label}</span>`
-                          : nothing
-                      }
-                      ${flexRender(cell.column.columnDef.cell, cell.getContext())}
-                    </td>`;
-                  })}
+                  ${row
+                    .getVisibleCells()
+                    .map((cell: Cell<DeviceTableFeatures, DeviceRow, unknown>) => {
+                      // The stacked mobile layout (table-styles.ts) shows each
+                      // cell's column header as a field label. It's a real
+                      // span (not a CSS ::before) so screen readers announce
+                      // it on mobile, where the <thead> is hidden; the span is
+                      // display:none on desktop, so it stays out of the a11y
+                      // tree there (the column header already provides context).
+                      // Name is the card title and actions is a button row, so
+                      // neither gets a label. Only string headers can be used as
+                      // a label; a future flexRender (template/function) header
+                      // would stringify to "[object Object]", so skip it.
+                      const id = cell.column.id;
+                      const header = cell.column.columnDef.header;
+                      const label =
+                        id !== "name" && id !== "actions" && typeof header === "string"
+                          ? header
+                          : null;
+                      return html`<td role="gridcell" class="col-${id}">
+                        ${
+                          label !== null
+                            ? html`<span class="cell-stack-label">${label}</span>`
+                            : nothing
+                        }
+                        ${flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </td>`;
+                    })}
                   <td role="gridcell" class="actions-col">
                     <button
                       class="actions-btn"
diff --git a/src/components/dashboard/device-table.ts b/src/components/dashboard/device-table.ts
index b0e9531ad..0793749d1 100644
--- a/src/components/dashboard/device-table.ts
+++ b/src/components/dashboard/device-table.ts
@@ -21,14 +21,10 @@ import {
 } from "@mdi/js";
 import {
   type ColumnDef,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
+  type ColumnVisibilityState,
   type PaginationState,
   type SortingState,
   TableController,
-  type VisibilityState,
 } from "@tanstack/lit-table";
 import type { Row, Table } from "@tanstack/lit-table";
 import type { PropertyValues } from "lit";
@@ -59,6 +55,7 @@ import {
 import { tableCellStyles } from "./table-cell-styles.js";
 import type { ToggleableColumn } from "./table-column-toggle.js";
 import { createDeviceColumns, type DeviceRow } from "./table-columns.js";
+import { deviceTableFeatures, type DeviceTableFeatures } from "./table-features.js";
 import { tableLayoutStyles } from "./table-styles.js";
 
 import "@home-assistant/webawesome/dist/components/icon/icon.js";
@@ -89,12 +86,7 @@ registerMdiIcons({
   upload: mdiUpload,
 });
 
-const coreRowModel = getCoreRowModel<DeviceRow>();
-const sortedRowModel = getSortedRowModel<DeviceRow>();
-const filteredRowModel = getFilteredRowModel<DeviceRow>();
-const paginatedRowModel = getPaginationRowModel<DeviceRow>();
-
-const DEFAULT_HIDDEN_COLUMNS: VisibilityState = {
+const DEFAULT_HIDDEN_COLUMNS: ColumnVisibilityState = {
   comment: false,
   area: false,
   labels: false,
@@ -147,7 +139,7 @@ export class ESPHomeDeviceTable extends LitElement {
 
   /** Column visibility from preferences — the host mirrors saves back, so a remount reseeds it. */
   @property({ attribute: false })
-  initialColumnVisibility: VisibilityState | null = null;
+  initialColumnVisibility: ColumnVisibilityState | null = null;
 
   /** Page size from preferences — the host mirrors saves back, so a remount reseeds it. */
   @property({ type: Number, attribute: "initial-page-size" })
@@ -157,7 +149,7 @@ export class ESPHomeDeviceTable extends LitElement {
   private _sorting: SortingState = [];
 
   @state()
-  private _columnVisibility: VisibilityState = { ...DEFAULT_HIDDEN_COLUMNS };
+  private _columnVisibility: ColumnVisibilityState = { ...DEFAULT_HIDDEN_COLUMNS };
 
   @state()
   private _pageSize = 25;
@@ -181,10 +173,10 @@ export class ESPHomeDeviceTable extends LitElement {
   @query(".table-scroll")
   private _scrollContainer!: HTMLDivElement;
 
-  private _tableController = new TableController<DeviceRow>(this);
+  private _tableController = new TableController<DeviceTableFeatures, DeviceRow>(this);
   private _rows: DeviceRow[] = [];
   private _visibleConfigs: string[] = [];
-  private _columns: ColumnDef<DeviceRow>[] = [];
+  private _columns: ColumnDef<DeviceTableFeatures, DeviceRow>[] = [];
   private _prevLocalize: LocalizeFunc | null = null;
 
   // ─── Stable callbacks ───
@@ -197,7 +189,8 @@ export class ESPHomeDeviceTable extends LitElement {
   };
 
   private _handleVisibilityChange = (
-    updater: VisibilityState | ((old: VisibilityState) => VisibilityState)
+    updater:
+      ColumnVisibilityState | ((old: ColumnVisibilityState) => ColumnVisibilityState)
   ) => {
     this._columnVisibility =
       typeof updater === "function" ? updater(this._columnVisibility) : updater;
@@ -218,7 +211,7 @@ export class ESPHomeDeviceTable extends LitElement {
   };
 
   private _globalFilterFn = (
-    row: Row<DeviceRow>,
+    row: Row<DeviceTableFeatures, DeviceRow>,
     _columnId: string,
     filterValue: unknown
   ): boolean => {
@@ -284,7 +277,7 @@ export class ESPHomeDeviceTable extends LitElement {
           comment: d.comment || "",
           area: d.area || "",
           // Resolve labels here once per render rather than from the
-          // cell renderer — TanStack's sortingFn / filterFn read the
+          // cell renderer — TanStack's sortFn / filterFn read the
           // accessor value, so they need the resolved objects rather
           // than opaque ids.
           labels: resolveLabelIds(d.labels, this._labelCatalog),
@@ -327,10 +320,7 @@ export class ESPHomeDeviceTable extends LitElement {
       onSortingChange: this._handleSortingChange,
       onColumnVisibilityChange: this._handleVisibilityChange,
       onPaginationChange: this._handlePaginationChange,
-      getCoreRowModel: coreRowModel,
-      getSortedRowModel: sortedRowModel,
-      getFilteredRowModel: filteredRowModel,
-      getPaginationRowModel: paginatedRowModel,
+      features: deviceTableFeatures,
       globalFilterFn: this._globalFilterFn,
     });
 
@@ -342,7 +332,6 @@ export class ESPHomeDeviceTable extends LitElement {
     );
     const rows = table.getRowModel().rows;
     this._visibleConfigs = table.getFilteredRowModel().rows.map((r) => r.original.config);
-    const pgState = table.getState().pagination;
     const toggleCols: ToggleableColumn[] = table
       .getAllColumns()
       .filter((c) => c.getCanHide())
@@ -380,7 +369,7 @@ export class ESPHomeDeviceTable extends LitElement {
           </table>
         </div>
         <esphome-table-pagination
-          page-index=${pgState.pageIndex}
+          page-index=${effectivePageIndex}
           page-count=${table.getPageCount()}
           page-size=${this._pageSize}
           total-rows=${table.getFilteredRowModel().rows.length}
@@ -476,7 +465,10 @@ export class ESPHomeDeviceTable extends LitElement {
     `;
   }
 
-  private _renderControls(table: Table<DeviceRow>, toggleCols: ToggleableColumn[]) {
+  private _renderControls(
+    table: Table<DeviceTableFeatures, DeviceRow>,
+    toggleCols: ToggleableColumn[]
+  ) {
     return html`
       <div class="controls">
         <slot name="toolbar"></slot>
diff --git a/src/components/dashboard/prefs.ts b/src/components/dashboard/prefs.ts
index 2d9e81888..a967882da 100644
--- a/src/components/dashboard/prefs.ts
+++ b/src/components/dashboard/prefs.ts
@@ -1,4 +1,4 @@
-import type { SortingState, VisibilityState } from "@tanstack/lit-table";
+import type { ColumnVisibilityState, SortingState } from "@tanstack/lit-table";
 import type { UserPreferences } from "../../api/types/system.js";
 import { SortDirection } from "../../api/types/system.js";
 import type { ESPHomePageDashboard } from "../../pages/dashboard.js";
@@ -41,7 +41,7 @@ export function saveTablePreference(host: ESPHomePageDashboard, e: CustomEvent):
         : null,
     };
   } else if (type === "table-visibility-change") {
-    const visibility = (e as CustomEvent<VisibilityState>).detail;
+    const visibility = (e as CustomEvent<ColumnVisibilityState>).detail;
     host._tableColumnVisibility = visibility;
     patch = { table_column_visibility: visibility };
   } else if (type === "table-page-size-change") {
diff --git a/src/components/dashboard/render-content.ts b/src/components/dashboard/render-content.ts
index 723c4e1bf..20caf5378 100644
--- a/src/components/dashboard/render-content.ts
+++ b/src/components/dashboard/render-content.ts
@@ -1,4 +1,4 @@
-import type { SortingState, VisibilityState } from "@tanstack/lit-table";
+import type { ColumnVisibilityState, SortingState } from "@tanstack/lit-table";
 import { html, type TemplateResult } from "lit";
 import type { AdoptableDevice, ConfiguredDevice } from "../../api/types/devices.js";
 import type { ESPHomePageDashboard } from "../../pages/dashboard.js";
@@ -193,7 +193,7 @@ export function renderTable(host: ESPHomePageDashboard): TemplateResult {
       .selectedDevices=${host._selectedDevices}
       .highlightConfiguration=${host._recentlyAdopted}
       @table-sort-change=${(e: CustomEvent<SortingState>) => host._saveTablePreference(e)}
-      @table-visibility-change=${(e: CustomEvent<VisibilityState>) =>
+      @table-visibility-change=${(e: CustomEvent<ColumnVisibilityState>) =>
         host._saveTablePreference(e)}
       @table-page-size-change=${(e: CustomEvent<number>) => host._saveTablePreference(e)}
       @row-click=${(e: CustomEvent<ConfiguredDevice>) =>
diff --git a/src/components/dashboard/table-columns.ts b/src/components/dashboard/table-columns.ts
index 1eea539b3..7a8b3e381 100644
--- a/src/components/dashboard/table-columns.ts
+++ b/src/components/dashboard/table-columns.ts
@@ -14,6 +14,7 @@ import { renderLabelChips } from "../../util/label-chip-template.js";
 import { busyActionLabel, updateActionTitle } from "../../util/update-tooltip.js";
 import { renderVisitWebUiLink } from "../../util/visit-web-ui-link.js";
 import { buildWebUiUrl } from "../../util/web-ui-url.js";
+import type { DeviceTableFeatures } from "./table-features.js";
 
 export interface DeviceRow {
   status: DeviceState;
@@ -93,7 +94,7 @@ const valueCell = (cls: string, val: string) =>
 export function createDeviceColumns(
   localize: LocalizeFunc,
   selectMode = false
-): ColumnDef<DeviceRow>[] {
+): ColumnDef<DeviceTableFeatures, DeviceRow>[] {
   const indicatorDot = (show: boolean, variant: string, labelKey: string) =>
     show
       ? html`<span
@@ -292,7 +293,7 @@ export function createDeviceColumns(
           }
         </span>`;
       },
-      sortingFn: (rowA, rowB) =>
+      sortFn: (rowA, rowB) =>
         DEVICE_SORT_COLLATOR.compare(
           deviceSortKey(rowA.original),
           deviceSortKey(rowB.original)
@@ -357,7 +358,7 @@ export function createDeviceColumns(
         if (!labels || labels.length === 0) return EMPTY_CELL;
         return renderLabelChips(labels, { max: 3 });
       },
-      sortingFn: (rowA, rowB) => {
+      sortFn: (rowA, rowB) => {
         const a = rowA.original.labels.map((l) => l.name).join(",");
         const b = rowB.original.labels.map((l) => l.name).join(",");
         return a.localeCompare(b);
@@ -389,7 +390,7 @@ export function createDeviceColumns(
       // but "16777216" vs "2097152" puts the smaller value
       // above the larger one). Explicit ``a - b`` is the
       // canonical numeric sort and removes the ambiguity.
-      sortingFn: (rowA, rowB) =>
+      sortFn: (rowA, rowB) =>
         rowA.original.build_size_bytes - rowB.original.build_size_bytes,
       size: 120,
       enableHiding: true,
diff --git a/src/components/dashboard/table-features.ts b/src/components/dashboard/table-features.ts
new file mode 100644
index 000000000..e6b5a7e82
--- /dev/null
+++ b/src/components/dashboard/table-features.ts
@@ -0,0 +1,38 @@
+import {
+  columnFilteringFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  globalFilteringFeature,
+  rowPaginationFeature,
+  rowSortingFeature,
+  sortFns,
+  tableFeatures,
+} from "@tanstack/lit-table";
+
+/**
+ * The TanStack Table v9 feature set for the device table. v9 tree-shakes
+ * per-feature APIs, so every feature the table's types touch must be
+ * registered here — the search box needs global filtering (whose row
+ * model lives in the column-filtering feature), the column defs set
+ * ``size`` (column sizing), and the header/pagination controls need
+ * sorting, visibility, and pagination. ``sortFns`` registers the
+ * built-in sorting functions so the ``auto`` sort of string columns
+ * keeps v8's alphanumeric behavior.
+ */
+export const deviceTableFeatures = tableFeatures({
+  columnFilteringFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  globalFilteringFeature,
+  rowPaginationFeature,
+  rowSortingFeature,
+  filteredRowModel: createFilteredRowModel(),
+  paginatedRowModel: createPaginatedRowModel(),
+  sortedRowModel: createSortedRowModel(),
+  sortFns,
+});
+
+export type DeviceTableFeatures = typeof deviceTableFeatures;
diff --git a/src/pages/dashboard.ts b/src/pages/dashboard.ts
index 6b39e52f8..e1b4c2e46 100644
--- a/src/pages/dashboard.ts
+++ b/src/pages/dashboard.ts
@@ -11,7 +11,7 @@ import {
   mdiViewGrid,
   mdiWeb,
 } from "@mdi/js";
-import type { SortingState, VisibilityState } from "@tanstack/lit-table";
+import type { ColumnVisibilityState, SortingState } from "@tanstack/lit-table";
 import { html, LitElement, type PropertyValues, type TemplateResult } from "lit";
 import { customElement, query, state } from "lit/decorators.js";
 import memoizeOne from "memoize-one";
@@ -305,7 +305,7 @@ export class ESPHomePageDashboard extends LitElement {
   @state() _view: DashboardView = DashboardView.CARDS;
   @state() _tablePageSize = 25;
   @state() _tableSorting: SortingState | null = null;
-  @state() _tableColumnVisibility: VisibilityState | null = null;
+  @state() _tableColumnVisibility: ColumnVisibilityState | null = null;
 
   private _adoptHighlightTimer: ReturnType<typeof setTimeout> | null = null;
   _pendingAdoptScroll: string | null = null;
diff --git a/test/components/dashboard/prefs.test.ts b/test/components/dashboard/prefs.test.ts
index 43fa919cb..daa9f6e83 100644
--- a/test/components/dashboard/prefs.test.ts
+++ b/test/components/dashboard/prefs.test.ts
@@ -4,7 +4,7 @@
  * saveTablePreference mirrors each change onto the host fields that
  * seed a remounted table.
  */
-import type { VisibilityState } from "@tanstack/lit-table";
+import type { ColumnVisibilityState } from "@tanstack/lit-table";
 import { describe, expect, it, vi } from "vitest";
 import { SortDirection } from "../../../src/api/types/system.js";
 import { saveTablePreference } from "../../../src/components/dashboard/prefs.js";
@@ -33,7 +33,7 @@ describe("saveTablePreference", () => {
 
   it("mirrors a column-visibility change onto the host and persists it", () => {
     const { host, updatePreferences } = makeHost();
-    const visibility: VisibilityState = { comment: true, ip: false };
+    const visibility: ColumnVisibilityState = { comment: true, ip: false };
     saveTablePreference(host, event("table-visibility-change", visibility));
     expect(host._tableColumnVisibility).toBe(visibility);
     expect(updatePreferences).toHaveBeenCalledWith({
diff --git a/test/components/dashboard/table-columns.test.ts b/test/components/dashboard/table-columns.test.ts
index 425010b4e..5c61d5471 100644
--- a/test/components/dashboard/table-columns.test.ts
+++ b/test/components/dashboard/table-columns.test.ts
@@ -15,6 +15,7 @@ import {
   createDeviceColumns,
   type DeviceRow,
 } from "../../../src/components/dashboard/table-columns.js";
+import type { DeviceTableFeatures } from "../../../src/components/dashboard/table-features.js";
 
 const columns = createDeviceColumns(identityLocalize);
 
@@ -29,7 +30,11 @@ function columnByKey(key: string) {
 function renderCell(key: string, value: unknown): TemplateResult {
   const cell = columnByKey(key);
   // The data columns only read info.getValue(); a minimal stub suffices.
-  const info = { getValue: () => value } as unknown as CellContext<DeviceRow, unknown>;
+  const info = { getValue: () => value } as unknown as CellContext<
+    DeviceTableFeatures,
+    DeviceRow,
+    unknown
+  >;
   return cell(info) as TemplateResult;
 }
 
@@ -59,7 +64,11 @@ function renderActionsCell(rowOverrides: Partial<DeviceRow> = {}): TemplateResul
     },
     ...rowOverrides,
   } as unknown as DeviceRow;
-  const info = { row: { original: row } } as unknown as CellContext<DeviceRow, unknown>;
+  const info = { row: { original: row } } as unknown as CellContext<
+    DeviceTableFeatures,
+    DeviceRow,
+    unknown
+  >;
   return col.cell(info) as TemplateResult;
 }
 
@@ -101,7 +110,7 @@ describe("device table status dot with name_add_mac_suffix", () => {
           _device: { name_add_mac_suffix: nameAddMacSuffix },
         },
       },
-    } as unknown as CellContext<DeviceRow, unknown>;
+    } as unknown as CellContext<DeviceTableFeatures, DeviceRow, unknown>;
     return rendered(columnByKey("status")(info) as TemplateResult);
   };
 
@@ -224,7 +233,11 @@ function renderNameCell(
     _device: { web_port: null },
     ...rowOverrides,
   } as unknown as DeviceRow;
-  const info = { row: { original: row } } as unknown as CellContext<DeviceRow, unknown>;
+  const info = { row: { original: row } } as unknown as CellContext<
+    DeviceTableFeatures,
+    DeviceRow,
+    unknown
+  >;
   return col.cell(info) as TemplateResult;
 }
 

From cdfb3ad0f84bf74afb524dd0430ef1f84400b0aa Mon Sep 17 00:00:00 2001
From: "J. Nick Koston" <nick@home-assistant.io>
Date: Tue, 18 Aug 2026 18:36:28 -0500
Subject: [PATCH 2/5] Slim the v9 sort registry and share the table type
 aliases

---
 src/components/dashboard/device-table-grid.ts | 159 +++++++++---------
 src/components/dashboard/device-table.ts      |  43 +++--
 src/components/dashboard/table-columns.ts     |   5 +-
 src/components/dashboard/table-features.ts    |  21 ++-
 .../dashboard/table-columns.test.ts           |  23 +--
 5 files changed, 117 insertions(+), 134 deletions(-)

diff --git a/src/components/dashboard/device-table-grid.ts b/src/components/dashboard/device-table-grid.ts
index 72861c31a..0c5d4502e 100644
--- a/src/components/dashboard/device-table-grid.ts
+++ b/src/components/dashboard/device-table-grid.ts
@@ -1,5 +1,4 @@
 import { flexRender } from "@tanstack/lit-table";
-import type { Cell, Header, HeaderGroup, Row, Table } from "@tanstack/lit-table";
 import { html, nothing, type TemplateResult } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { repeat } from "lit/directives/repeat.js";
@@ -7,19 +6,18 @@ import type { ConfiguredDevice } from "../../api/types/devices.js";
 import type { LocalizeFunc } from "../../common/localize.js";
 import { tourAnchor } from "../guided-tour/tour-anchor.js";
 import { getActiveTourConfiguration } from "../guided-tour/tour-session.js";
-import type { DeviceRow } from "./table-columns.js";
-import type { DeviceTableFeatures } from "./table-features.js";
+import type { DeviceTable, DeviceTableRow } from "./table-features.js";
 
 export interface DeviceTableHeadProps {
-  table: Table<DeviceTableFeatures, DeviceRow>;
+  table: DeviceTable;
   selectMode: boolean;
   allSelected: boolean;
   onToggleAll: () => void;
 }
 
 export interface DeviceTableBodyProps {
-  table: Table<DeviceTableFeatures, DeviceRow>;
-  rows: Row<DeviceTableFeatures, DeviceRow>[];
+  table: DeviceTable;
+  rows: DeviceTableRow[];
   selectMode: boolean;
   selectedDevices: Set<string>;
   highlightConfiguration: string | null;
@@ -41,7 +39,7 @@ export function renderDeviceTableHead(p: DeviceTableHeadProps): TemplateResult {
   return html`
     <thead>
       ${p.table.getHeaderGroups().map(
-        (hg: HeaderGroup<DeviceTableFeatures, DeviceRow>) => html`
+        (hg) => html`
           <tr role="row">
             ${
               p.selectMode
@@ -55,55 +53,50 @@ export function renderDeviceTableHead(p: DeviceTableHeadProps): TemplateResult {
                   </th>`
                 : nothing
             }
-            ${hg.headers.map(
-              (header: Header<DeviceTableFeatures, DeviceRow, unknown>) => {
-                const sorted = header.column.getIsSorted();
-                const canSort = header.column.getCanSort();
-                const ariaSort =
-                  sorted === "asc"
-                    ? "ascending"
-                    : sorted === "desc"
-                      ? "descending"
-                      : "none";
-                const sortIcon =
-                  sorted === "asc"
-                    ? "chevron-up"
-                    : sorted === "desc"
-                      ? "chevron-down"
-                      : "unfold-more-horizontal";
-                return html`
-                  <th
-                    role="columnheader"
-                    aria-sort=${ariaSort}
-                    class="${canSort ? "sortable" : ""} ${
-                      sorted ? "sorted" : ""
-                    } col-${header.column.id}"
-                    style="width:${header.getSize()}px"
-                    @click=${canSort ? () => header.column.toggleSorting() : nothing}
-                  >
-                    <span class="th-content">
-                      ${
-                        header.isPlaceholder
-                          ? null
-                          : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            )
-                      }
-                      ${
-                        canSort
-                          ? html`<wa-icon
-                              class="sort-icon"
-                              library="mdi"
-                              name=${sortIcon}
-                            ></wa-icon>`
-                          : nothing
-                      }
-                    </span>
-                  </th>
-                `;
-              }
-            )}
+            ${hg.headers.map((header) => {
+              const sorted = header.column.getIsSorted();
+              const canSort = header.column.getCanSort();
+              const ariaSort =
+                sorted === "asc"
+                  ? "ascending"
+                  : sorted === "desc"
+                    ? "descending"
+                    : "none";
+              const sortIcon =
+                sorted === "asc"
+                  ? "chevron-up"
+                  : sorted === "desc"
+                    ? "chevron-down"
+                    : "unfold-more-horizontal";
+              return html`
+                <th
+                  role="columnheader"
+                  aria-sort=${ariaSort}
+                  class="${canSort ? "sortable" : ""} ${
+                    sorted ? "sorted" : ""
+                  } col-${header.column.id}"
+                  style="width:${header.getSize()}px"
+                  @click=${canSort ? () => header.column.toggleSorting() : nothing}
+                >
+                  <span class="th-content">
+                    ${
+                      header.isPlaceholder
+                        ? null
+                        : flexRender(header.column.columnDef.header, header.getContext())
+                    }
+                    ${
+                      canSort
+                        ? html`<wa-icon
+                            class="sort-icon"
+                            library="mdi"
+                            name=${sortIcon}
+                          ></wa-icon>`
+                        : nothing
+                    }
+                  </span>
+                </th>
+              `;
+            })}
             <th class="actions-col"></th>
           </tr>
         `
@@ -167,34 +160,32 @@ export function renderDeviceTableBody(p: DeviceTableBodyProps): TemplateResult {
                         </td>`
                       : nothing
                   }
-                  ${row
-                    .getVisibleCells()
-                    .map((cell: Cell<DeviceTableFeatures, DeviceRow, unknown>) => {
-                      // The stacked mobile layout (table-styles.ts) shows each
-                      // cell's column header as a field label. It's a real
-                      // span (not a CSS ::before) so screen readers announce
-                      // it on mobile, where the <thead> is hidden; the span is
-                      // display:none on desktop, so it stays out of the a11y
-                      // tree there (the column header already provides context).
-                      // Name is the card title and actions is a button row, so
-                      // neither gets a label. Only string headers can be used as
-                      // a label; a future flexRender (template/function) header
-                      // would stringify to "[object Object]", so skip it.
-                      const id = cell.column.id;
-                      const header = cell.column.columnDef.header;
-                      const label =
-                        id !== "name" && id !== "actions" && typeof header === "string"
-                          ? header
-                          : null;
-                      return html`<td role="gridcell" class="col-${id}">
-                        ${
-                          label !== null
-                            ? html`<span class="cell-stack-label">${label}</span>`
-                            : nothing
-                        }
-                        ${flexRender(cell.column.columnDef.cell, cell.getContext())}
-                      </td>`;
-                    })}
+                  ${row.getVisibleCells().map((cell) => {
+                    // The stacked mobile layout (table-styles.ts) shows each
+                    // cell's column header as a field label. It's a real
+                    // span (not a CSS ::before) so screen readers announce
+                    // it on mobile, where the <thead> is hidden; the span is
+                    // display:none on desktop, so it stays out of the a11y
+                    // tree there (the column header already provides context).
+                    // Name is the card title and actions is a button row, so
+                    // neither gets a label. Only string headers can be used as
+                    // a label; a future flexRender (template/function) header
+                    // would stringify to "[object Object]", so skip it.
+                    const id = cell.column.id;
+                    const header = cell.column.columnDef.header;
+                    const label =
+                      id !== "name" && id !== "actions" && typeof header === "string"
+                        ? header
+                        : null;
+                    return html`<td role="gridcell" class="col-${id}">
+                      ${
+                        label !== null
+                          ? html`<span class="cell-stack-label">${label}</span>`
+                          : nothing
+                      }
+                      ${flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </td>`;
+                  })}
                   <td role="gridcell" class="actions-col">
                     <button
                       class="actions-btn"
diff --git a/src/components/dashboard/device-table.ts b/src/components/dashboard/device-table.ts
index 0793749d1..07f9d42cd 100644
--- a/src/components/dashboard/device-table.ts
+++ b/src/components/dashboard/device-table.ts
@@ -20,13 +20,13 @@ import {
   mdiUpload,
 } from "@mdi/js";
 import {
-  type ColumnDef,
   type ColumnVisibilityState,
+  functionalUpdate,
   type PaginationState,
   type SortingState,
   TableController,
+  type Updater,
 } from "@tanstack/lit-table";
-import type { Row, Table } from "@tanstack/lit-table";
 import type { PropertyValues } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
@@ -55,7 +55,13 @@ import {
 import { tableCellStyles } from "./table-cell-styles.js";
 import type { ToggleableColumn } from "./table-column-toggle.js";
 import { createDeviceColumns, type DeviceRow } from "./table-columns.js";
-import { deviceTableFeatures, type DeviceTableFeatures } from "./table-features.js";
+import {
+  type DeviceColumnDef,
+  type DeviceTable,
+  deviceTableFeatures,
+  type DeviceTableFeatures,
+  type DeviceTableRow,
+} from "./table-features.js";
 import { tableLayoutStyles } from "./table-styles.js";
 
 import "@home-assistant/webawesome/dist/components/icon/icon.js";
@@ -176,32 +182,24 @@ export class ESPHomeDeviceTable extends LitElement {
   private _tableController = new TableController<DeviceTableFeatures, DeviceRow>(this);
   private _rows: DeviceRow[] = [];
   private _visibleConfigs: string[] = [];
-  private _columns: ColumnDef<DeviceTableFeatures, DeviceRow>[] = [];
+  private _columns: DeviceColumnDef[] = [];
   private _prevLocalize: LocalizeFunc | null = null;
 
   // ─── Stable callbacks ───
 
-  private _handleSortingChange = (
-    updater: SortingState | ((old: SortingState) => SortingState)
-  ) => {
-    this._sorting = typeof updater === "function" ? updater(this._sorting) : updater;
+  private _handleSortingChange = (updater: Updater<SortingState>) => {
+    this._sorting = functionalUpdate(updater, this._sorting);
     fireEvent(this, "table-sort-change", this._sorting);
   };
 
-  private _handleVisibilityChange = (
-    updater:
-      ColumnVisibilityState | ((old: ColumnVisibilityState) => ColumnVisibilityState)
-  ) => {
-    this._columnVisibility =
-      typeof updater === "function" ? updater(this._columnVisibility) : updater;
+  private _handleVisibilityChange = (updater: Updater<ColumnVisibilityState>) => {
+    this._columnVisibility = functionalUpdate(updater, this._columnVisibility);
     fireEvent(this, "table-visibility-change", this._columnVisibility);
   };
 
-  private _handlePaginationChange = (
-    updater: PaginationState | ((old: PaginationState) => PaginationState)
-  ) => {
+  private _handlePaginationChange = (updater: Updater<PaginationState>) => {
     const current = { pageSize: this._pageSize, pageIndex: this._pageIndex };
-    const next = typeof updater === "function" ? updater(current) : updater;
+    const next = functionalUpdate(updater, current);
     const pageSizeChanged = next.pageSize !== this._pageSize;
     this._pageSize = next.pageSize;
     this._pageIndex = next.pageIndex;
@@ -211,7 +209,7 @@ export class ESPHomeDeviceTable extends LitElement {
   };
 
   private _globalFilterFn = (
-    row: Row<DeviceTableFeatures, DeviceRow>,
+    row: DeviceTableRow,
     _columnId: string,
     filterValue: unknown
   ): boolean => {
@@ -220,7 +218,7 @@ export class ESPHomeDeviceTable extends LitElement {
     // dashboard's select-all scoping helper matches the same rows
     // this filter makes visible (single source of truth).
     const q = (filterValue as string).trim().toLowerCase();
-    return matchesDeviceRow(row.original as DeviceRow, q);
+    return matchesDeviceRow(row.original, q);
   };
 
   // ─── Lifecycle ───
@@ -465,10 +463,7 @@ export class ESPHomeDeviceTable extends LitElement {
     `;
   }
 
-  private _renderControls(
-    table: Table<DeviceTableFeatures, DeviceRow>,
-    toggleCols: ToggleableColumn[]
-  ) {
+  private _renderControls(table: DeviceTable, toggleCols: ToggleableColumn[]) {
     return html`
       <div class="controls">
         <slot name="toolbar"></slot>
diff --git a/src/components/dashboard/table-columns.ts b/src/components/dashboard/table-columns.ts
index 7a8b3e381..815a9c757 100644
--- a/src/components/dashboard/table-columns.ts
+++ b/src/components/dashboard/table-columns.ts
@@ -1,4 +1,3 @@
-import type { ColumnDef } from "@tanstack/lit-table";
 import { html, nothing } from "lit";
 import type { ConfiguredDevice, Label } from "../../api/types/devices.js";
 import { DeviceState } from "../../api/types/devices.js";
@@ -14,7 +13,7 @@ import { renderLabelChips } from "../../util/label-chip-template.js";
 import { busyActionLabel, updateActionTitle } from "../../util/update-tooltip.js";
 import { renderVisitWebUiLink } from "../../util/visit-web-ui-link.js";
 import { buildWebUiUrl } from "../../util/web-ui-url.js";
-import type { DeviceTableFeatures } from "./table-features.js";
+import type { DeviceColumnDef } from "./table-features.js";
 
 export interface DeviceRow {
   status: DeviceState;
@@ -94,7 +93,7 @@ const valueCell = (cls: string, val: string) =>
 export function createDeviceColumns(
   localize: LocalizeFunc,
   selectMode = false
-): ColumnDef<DeviceTableFeatures, DeviceRow>[] {
+): DeviceColumnDef[] {
   const indicatorDot = (show: boolean, variant: string, labelKey: string) =>
     show
       ? html`<span
diff --git a/src/components/dashboard/table-features.ts b/src/components/dashboard/table-features.ts
index e6b5a7e82..d96da65ff 100644
--- a/src/components/dashboard/table-features.ts
+++ b/src/components/dashboard/table-features.ts
@@ -1,3 +1,4 @@
+import type { CellContext, ColumnDef, Row, Table } from "@tanstack/lit-table";
 import {
   columnFilteringFeature,
   columnSizingFeature,
@@ -8,9 +9,11 @@ import {
   globalFilteringFeature,
   rowPaginationFeature,
   rowSortingFeature,
-  sortFns,
+  sortFn_alphanumeric,
+  sortFn_text,
   tableFeatures,
 } from "@tanstack/lit-table";
+import type { DeviceRow } from "./table-columns.js";
 
 /**
  * The TanStack Table v9 feature set for the device table. v9 tree-shakes
@@ -18,9 +21,10 @@ import {
  * registered here — the search box needs global filtering (whose row
  * model lives in the column-filtering feature), the column defs set
  * ``size`` (column sizing), and the header/pagination controls need
- * sorting, visibility, and pagination. ``sortFns`` registers the
- * built-in sorting functions so the ``auto`` sort of string columns
- * keeps v8's alphanumeric behavior.
+ * sorting, visibility, and pagination. The ``sortFns`` registry lists
+ * only the comparators ``auto`` can resolve for this table's string
+ * columns, keeping v8's alphanumeric behavior without shipping the
+ * full built-in set.
  */
 export const deviceTableFeatures = tableFeatures({
   columnFilteringFeature,
@@ -32,7 +36,14 @@ export const deviceTableFeatures = tableFeatures({
   filteredRowModel: createFilteredRowModel(),
   paginatedRowModel: createPaginatedRowModel(),
   sortedRowModel: createSortedRowModel(),
-  sortFns,
+  sortFns: { alphanumeric: sortFn_alphanumeric, text: sortFn_text },
 });
 
 export type DeviceTableFeatures = typeof deviceTableFeatures;
+
+// Composed aliases so consumers don't restate the
+// ``<DeviceTableFeatures, DeviceRow>`` pairing at every site.
+export type DeviceTable = Table<DeviceTableFeatures, DeviceRow>;
+export type DeviceTableRow = Row<DeviceTableFeatures, DeviceRow>;
+export type DeviceColumnDef = ColumnDef<DeviceTableFeatures, DeviceRow>;
+export type DeviceCellContext = CellContext<DeviceTableFeatures, DeviceRow, unknown>;
diff --git a/test/components/dashboard/table-columns.test.ts b/test/components/dashboard/table-columns.test.ts
index 5c61d5471..a1176d59a 100644
--- a/test/components/dashboard/table-columns.test.ts
+++ b/test/components/dashboard/table-columns.test.ts
@@ -6,7 +6,6 @@
  * column's value font where monospace made it render as a narrow,
  * hyphen-looking glyph. Populated cells keep their own font.
  */
-import type { CellContext } from "@tanstack/lit-table";
 import { type TemplateResult } from "lit";
 import { describe, expect, it } from "vitest";
 import { clickCollect, identityLocalize, renderInto } from "../../_dom.js";
@@ -15,7 +14,7 @@ import {
   createDeviceColumns,
   type DeviceRow,
 } from "../../../src/components/dashboard/table-columns.js";
-import type { DeviceTableFeatures } from "../../../src/components/dashboard/table-features.js";
+import type { DeviceCellContext } from "../../../src/components/dashboard/table-features.js";
 
 const columns = createDeviceColumns(identityLocalize);
 
@@ -30,11 +29,7 @@ function columnByKey(key: string) {
 function renderCell(key: string, value: unknown): TemplateResult {
   const cell = columnByKey(key);
   // The data columns only read info.getValue(); a minimal stub suffices.
-  const info = { getValue: () => value } as unknown as CellContext<
-    DeviceTableFeatures,
-    DeviceRow,
-    unknown
-  >;
+  const info = { getValue: () => value } as unknown as DeviceCellContext;
   return cell(info) as TemplateResult;
 }
 
@@ -64,11 +59,7 @@ function renderActionsCell(rowOverrides: Partial<DeviceRow> = {}): TemplateResul
     },
     ...rowOverrides,
   } as unknown as DeviceRow;
-  const info = { row: { original: row } } as unknown as CellContext<
-    DeviceTableFeatures,
-    DeviceRow,
-    unknown
-  >;
+  const info = { row: { original: row } } as unknown as DeviceCellContext;
   return col.cell(info) as TemplateResult;
 }
 
@@ -110,7 +101,7 @@ describe("device table status dot with name_add_mac_suffix", () => {
           _device: { name_add_mac_suffix: nameAddMacSuffix },
         },
       },
-    } as unknown as CellContext<DeviceTableFeatures, DeviceRow, unknown>;
+    } as unknown as DeviceCellContext;
     return rendered(columnByKey("status")(info) as TemplateResult);
   };
 
@@ -233,11 +224,7 @@ function renderNameCell(
     _device: { web_port: null },
     ...rowOverrides,
   } as unknown as DeviceRow;
-  const info = { row: { original: row } } as unknown as CellContext<
-    DeviceTableFeatures,
-    DeviceRow,
-    unknown
-  >;
+  const info = { row: { original: row } } as unknown as DeviceCellContext;
   return col.cell(info) as TemplateResult;
 }
 

From 270c207b32d345ce7745949266be9f1884203f9e Mon Sep 17 00:00:00 2001
From: "J. Nick Koston" <nick@home-assistant.io>
Date: Tue, 18 Aug 2026 19:09:57 -0500
Subject: [PATCH 3/5] Pin the auto sort order and break the table type import
 cycle

---
 src/components/dashboard/device-row.ts        | 41 +++++++++++++++++++
 src/components/dashboard/table-columns.ts     | 35 +---------------
 src/components/dashboard/table-features.ts    | 11 +++--
 .../components/dashboard/device-table.test.ts | 31 ++++++++++++++
 4 files changed, 80 insertions(+), 38 deletions(-)
 create mode 100644 src/components/dashboard/device-row.ts

diff --git a/src/components/dashboard/device-row.ts b/src/components/dashboard/device-row.ts
new file mode 100644
index 000000000..03a25ca92
--- /dev/null
+++ b/src/components/dashboard/device-row.ts
@@ -0,0 +1,41 @@
+import type { ConfiguredDevice, Label } from "../../api/types/devices.js";
+import type { DeviceState } from "../../api/types/devices.js";
+import type { FirmwareJob } from "../../api/types/firmware-jobs.js";
+
+/** One row of the device table, derived from a ``ConfiguredDevice``
+ *  by ``device-table``'s ``willUpdate``. Lives in its own leaf module
+ *  so ``table-columns`` and ``table-features`` can both depend on it
+ *  without importing each other. */
+export interface DeviceRow {
+  status: DeviceState;
+  name: string;
+  friendly_name: string;
+  address: string;
+  ip: string;
+  ip_addresses: string[];
+  mac_address: string;
+  platform: string;
+  version: string;
+  comment: string;
+  area: string;
+  /** Resolved label objects (catalog joined against
+   *  ``device.labels``) so the cell renderer doesn't need access to
+   *  the catalog itself. ``device-table`` performs the resolve when
+   *  building rows. */
+  labels: Label[];
+  config: string;
+  build_size_bytes: number;
+  // Raw has_pending_changes (device truth) — drives the encryption lock only.
+  hasPendingChanges: boolean;
+  // mDNS-gated display flags (see util/device-sync.ts): modified dot + install
+  // button, update column + update button.
+  showModified: boolean;
+  showUpdate: boolean;
+  hasQueuedUpdate: boolean;
+  api_enabled: boolean;
+  api_encrypted: boolean;
+  api_encryption_active: string | null;
+  busy: boolean;
+  recentJob: FirmwareJob | null;
+  _device: ConfiguredDevice;
+}
diff --git a/src/components/dashboard/table-columns.ts b/src/components/dashboard/table-columns.ts
index 815a9c757..b0b4479b3 100644
--- a/src/components/dashboard/table-columns.ts
+++ b/src/components/dashboard/table-columns.ts
@@ -1,7 +1,6 @@
 import { html, nothing } from "lit";
 import type { ConfiguredDevice, Label } from "../../api/types/devices.js";
 import { DeviceState } from "../../api/types/devices.js";
-import type { FirmwareJob } from "../../api/types/firmware-jobs.js";
 import { JobStatus } from "../../api/types/firmware-jobs.js";
 import type { LocalizeFunc } from "../../common/localize.js";
 import { DEVICE_SORT_COLLATOR, deviceSortKey } from "../../util/device-sort.js";
@@ -15,39 +14,7 @@ import { renderVisitWebUiLink } from "../../util/visit-web-ui-link.js";
 import { buildWebUiUrl } from "../../util/web-ui-url.js";
 import type { DeviceColumnDef } from "./table-features.js";
 
-export interface DeviceRow {
-  status: DeviceState;
-  name: string;
-  friendly_name: string;
-  address: string;
-  ip: string;
-  ip_addresses: string[];
-  mac_address: string;
-  platform: string;
-  version: string;
-  comment: string;
-  area: string;
-  /** Resolved label objects (catalog joined against
-   *  ``device.labels``) so the cell renderer doesn't need access to
-   *  the catalog itself. ``device-table`` performs the resolve when
-   *  building rows. */
-  labels: Label[];
-  config: string;
-  build_size_bytes: number;
-  // Raw has_pending_changes (device truth) — drives the encryption lock only.
-  hasPendingChanges: boolean;
-  // mDNS-gated display flags (see util/device-sync.ts): modified dot + install
-  // button, update column + update button.
-  showModified: boolean;
-  showUpdate: boolean;
-  hasQueuedUpdate: boolean;
-  api_enabled: boolean;
-  api_encrypted: boolean;
-  api_encryption_active: string | null;
-  busy: boolean;
-  recentJob: FirmwareJob | null;
-  _device: ConfiguredDevice;
-}
+export type { DeviceRow } from "./device-row.js";
 
 const RECENT_ICON: Record<JobStatus, string | null> = {
   [JobStatus.QUEUED]: null,
diff --git a/src/components/dashboard/table-features.ts b/src/components/dashboard/table-features.ts
index d96da65ff..9c69a208a 100644
--- a/src/components/dashboard/table-features.ts
+++ b/src/components/dashboard/table-features.ts
@@ -13,7 +13,7 @@ import {
   sortFn_text,
   tableFeatures,
 } from "@tanstack/lit-table";
-import type { DeviceRow } from "./table-columns.js";
+import type { DeviceRow } from "./device-row.js";
 
 /**
  * The TanStack Table v9 feature set for the device table. v9 tree-shakes
@@ -22,9 +22,12 @@ import type { DeviceRow } from "./table-columns.js";
  * model lives in the column-filtering feature), the column defs set
  * ``size`` (column sizing), and the header/pagination controls need
  * sorting, visibility, and pagination. The ``sortFns`` registry lists
- * only the comparators ``auto`` can resolve for this table's string
- * columns, keeping v8's alphanumeric behavior without shipping the
- * full built-in set.
+ * only the comparators ``auto`` resolves for this table's string
+ * columns (keeping v8's alphanumeric behavior without shipping the
+ * full built-in set); ``datetime`` and ``basic`` are deliberately
+ * unregistered — a registry miss falls back to ``basic`` silently in
+ * production builds, so a future Date-valued column must add
+ * ``sortFn_datetime`` here.
  */
 export const deviceTableFeatures = tableFeatures({
   columnFilteringFeature,
diff --git a/test/components/dashboard/device-table.test.ts b/test/components/dashboard/device-table.test.ts
index a781d43c9..ec1dcb72e 100644
--- a/test/components/dashboard/device-table.test.ts
+++ b/test/components/dashboard/device-table.test.ts
@@ -139,6 +139,37 @@ describe("device-table All rendering", () => {
   });
 });
 
+describe("device-table auto sort registry", () => {
+  // Pins the order the slim v9 ``sortFns`` registry produces for a
+  // string column resolved through ``auto`` (alphanumeric). A registry
+  // miss falls back to ``basic`` silently in production builds, so this
+  // is the only signal if the registry is slimmed further.
+  it("sorts the platform column alphanumerically via auto resolution", async () => {
+    // host10/host2 and the uppercase entry make the assertion fail under a
+    // plain lexicographic (``basic``) compare, so the fallback can't pass.
+    const platforms = ["esp32", "rp2040", "host10", "BK72XX", "esp32-c3", "host2"];
+    const el = new ESPHomeDeviceTable();
+    el.devices = platforms.map((platform, i) =>
+      makeConfiguredDevice({
+        name: `dev-${i}`,
+        friendly_name: `Dev ${i}`,
+        configuration: `dev-${i}.yaml`,
+        target_platform: platform,
+      })
+    );
+    el.initialSorting = [{ id: "platform", desc: false }];
+    document.body.appendChild(el);
+    await el.updateComplete;
+    await el.updateComplete;
+
+    // Skip the mobile stack label span; the value span carries the platform.
+    const order = Array.from(
+      el.shadowRoot!.querySelectorAll("tbody td.col-platform span:not(.cell-stack-label)")
+    ).map((span) => span.textContent!.trim());
+    expect(order).toEqual(["BK72XX", "esp32", "esp32-c3", "host2", "host10", "rp2040"]);
+  });
+});
+
 describe("device-table Version column identity gating", () => {
   async function mountWithVersionColumn(
     device: ConfiguredDevice

From c0f1e39de62ff30ee4e6d4dc69ef3456c8f07150 Mon Sep 17 00:00:00 2001
From: "J. Nick Koston" <nick@home-assistant.io>
Date: Tue, 18 Aug 2026 20:15:19 -0500
Subject: [PATCH 4/5] Pin the text sort entry with a digit-free column test

---
 .../components/dashboard/device-table.test.ts | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/test/components/dashboard/device-table.test.ts b/test/components/dashboard/device-table.test.ts
index ec1dcb72e..fc1547461 100644
--- a/test/components/dashboard/device-table.test.ts
+++ b/test/components/dashboard/device-table.test.ts
@@ -168,6 +168,32 @@ describe("device-table auto sort registry", () => {
     ).map((span) => span.textContent!.trim());
     expect(order).toEqual(["BK72XX", "esp32", "esp32-c3", "host2", "host10", "rp2040"]);
   });
+
+  // Digit-free strings resolve through the registry's ``text`` entry.
+  // ``basic`` is case-sensitive ("Bedroom" before "attic"), so this order
+  // only holds while ``text`` stays registered.
+  it("sorts a digit-free column case-insensitively via the text entry", async () => {
+    const comments = ["kitchen", "Bedroom", "attic"];
+    const el = new ESPHomeDeviceTable();
+    el.devices = comments.map((comment, i) =>
+      makeConfiguredDevice({
+        name: `dev-${i}`,
+        friendly_name: `Dev ${i}`,
+        configuration: `dev-${i}.yaml`,
+        comment,
+      })
+    );
+    el.initialColumnVisibility = { comment: true };
+    el.initialSorting = [{ id: "comment", desc: false }];
+    document.body.appendChild(el);
+    await el.updateComplete;
+    await el.updateComplete;
+
+    const order = Array.from(
+      el.shadowRoot!.querySelectorAll("tbody td.col-comment span:not(.cell-stack-label)")
+    ).map((span) => span.textContent!.trim());
+    expect(order).toEqual(["attic", "Bedroom", "kitchen"]);
+  });
 });
 
 describe("device-table Version column identity gating", () => {

From a11f148a6f4708589c511022d0f6afc3574f24e7 Mon Sep 17 00:00:00 2001
From: "J. Nick Koston" <nick@home-assistant.io>
Date: Tue, 18 Aug 2026 20:22:05 -0500
Subject: [PATCH 5/5] Collapse the device-row type imports into one statement

---
 src/components/dashboard/device-row.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/dashboard/device-row.ts b/src/components/dashboard/device-row.ts
index 03a25ca92..5ed350a4f 100644
--- a/src/components/dashboard/device-row.ts
+++ b/src/components/dashboard/device-row.ts
@@ -1,5 +1,4 @@
-import type { ConfiguredDevice, Label } from "../../api/types/devices.js";
-import type { DeviceState } from "../../api/types/devices.js";
+import type { ConfiguredDevice, DeviceState, Label } from "../../api/types/devices.js";
 import type { FirmwareJob } from "../../api/types/firmware-jobs.js";
 
 /** One row of the device table, derived from a ``ConfiguredDevice``