Add value column prop to ha data table (#9824)

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

@@ -62,6 +62,7 @@ export interface DataTableSortColumnData {
   sortable?: boolean;
   filterable?: boolean;
   filterKey?: string;
+  valueColumn?: string;
   direction?: SortingDirection;
 }
 
@@ -76,7 +77,7 @@ export interface DataTableColumnData extends DataTableSortColumnData {
   hidden?: boolean;
 }
 
-type ClonedDataTableColumnData = Omit<DataTableColumnData, "title"> & {
+export type ClonedDataTableColumnData = Omit<DataTableColumnData, "title"> & {
   title?: TemplateResult | string;
 };
 
@@ -455,7 +456,7 @@ export class HaDataTable extends LitElement {
     const prom = this._sortColumn
       ? sortData(
           filteredData,
-          this._sortColumns,
+          this._sortColumns[this._sortColumn],
           this._sortDirection,
           this._sortColumn
         )

src/components/data-table/sort_filter_worker.ts

@@ -2,8 +2,8 @@
 import { expose } from "comlink";
 import "proxy-polyfill";
 import type {
+  ClonedDataTableColumnData,
   DataTableRowData,
-  DataTableSortColumnData,
   SortableColumnContainer,
   SortingDirection,
 } from "./ha-data-table";
@@ -19,7 +19,11 @@ const filterData = (
       const [key, column] = columnEntry;
       if (column.filterable) {
         if (
-          String(column.filterKey ? row[key][column.filterKey] : row[key])
+          String(
+            column.filterKey
+              ? row[column.valueColumn || key][column.filterKey]
+              : row[column.valueColumn || key]
+          )
             .toUpperCase()
             .includes(filter)
         ) {
@@ -33,7 +37,7 @@ const filterData = (
 
 const sortData = (
   data: DataTableRowData[],
-  column: DataTableSortColumnData,
+  column: ClonedDataTableColumnData,
   direction: SortingDirection,
   sortColumn: string
 ) =>
@@ -44,12 +48,12 @@ const sortData = (
     }
 
     let valA = column.filterKey
-      ? a[sortColumn][column.filterKey]
-      : a[sortColumn];
+      ? a[column.valueColumn || sortColumn][column.filterKey]
+      : a[column.valueColumn || sortColumn];
 
     let valB = column.filterKey
-      ? b[sortColumn][column.filterKey]
-      : b[sortColumn];
+      ? b[column.valueColumn || sortColumn][column.filterKey]
+      : b[column.valueColumn || sortColumn];
 
     if (typeof valA === "string") {
       valA = valA.toUpperCase();

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

@@ -212,6 +212,10 @@ export class HaConfigDeviceDashboard extends LitElement {
           this._batteryEntity(device.id, deviceEntityLookup),
           this._batteryChargingEntity(device.id, deviceEntityLookup),
         ],
+        battery_level:
+          this.hass.states[
+            this._batteryEntity(device.id, deviceEntityLookup) || ""
+          ]?.state,
       }));
 
       this._numHiddenDevices = startLength - outputDevices.length;
@@ -286,9 +290,11 @@ export class HaConfigDeviceDashboard extends LitElement {
       columns.battery_entity = {
         title: this.hass.localize("ui.panel.config.devices.data_table.battery"),
         sortable: true,
+        filterable: true,
         type: "numeric",
         width: narrow ? "95px" : "15%",
         maxWidth: "95px",
+        valueColumn: "battery_level",
         template: (batteryEntityPair: DeviceRowData["battery_entity"]) => {
           const battery =
             batteryEntityPair && batteryEntityPair[0]