Enable filtering on hidden columns (#6717)

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

@@ -70,6 +70,7 @@ export interface DataTableColumnData extends DataTableSortColumnData {
   maxWidth?: string;
   grows?: boolean;
   forceLTR?: boolean;
+  hidden?: boolean;
 }
 
 export interface DataTableRowData {
@@ -242,8 +243,10 @@ export class HaDataTable extends LitElement {
                   </div>
                 `
               : ""}
-            ${Object.entries(this.columns).map((columnEntry) => {
+            ${Object.entries(this.columns).map(([key, column]) => {
-              const [key, column] = columnEntry;
+              if (column.hidden) {
+                return "";
+              }
               const sorted = key === this._sortColumn;
               const classes = {
                 "mdc-data-table__header-cell--numeric": Boolean(
@@ -346,8 +349,11 @@ export class HaDataTable extends LitElement {
                                 </div>
                               `
                             : ""}
-                          ${Object.entries(this.columns).map((columnEntry) => {
+                          ${Object.entries(this.columns).map(
-                            const [key, column] = columnEntry;
+                            ([key, column]) => {
+                              if (column.hidden) {
+                                return "";
+                              }
                               return html`
                                 <div
                                   role="cell"
@@ -380,7 +386,8 @@ export class HaDataTable extends LitElement {
                                     : row[key]}
                                 </div>
                               `;
-                          })}
+                            }
+                          )}
                         </div>
                       `;
                     },

src/components/data-table/sort_filter_worker.ts

@@ -1,11 +1,11 @@
 // To use comlink under ES5
-import "proxy-polyfill";
 import { expose } from "comlink";
+import "proxy-polyfill";
 import type {
-  DataTableSortColumnData,
   DataTableRowData,
-  SortingDirection,
+  DataTableSortColumnData,
   SortableColumnContainer,
+  SortingDirection,
 } from "./ha-data-table";
 
 const filterData = (
@@ -19,7 +19,7 @@ const filterData = (
       const [key, column] = columnEntry;
       if (column.filterable) {
         if (
-          (column.filterKey ? row[key][column.filterKey] : row[key])
+          String(column.filterKey ? row[key][column.filterKey] : row[key])
             .toUpperCase()
             .includes(filter)
         ) {

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

@@ -1,3 +1,5 @@
+import "@material/mwc-fab";
+import { mdiPlus } from "@mdi/js";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import {
@@ -16,7 +18,8 @@ import {
   DataTableColumnContainer,
   RowClickedEvent,
 } from "../../../components/data-table/ha-data-table";
-import "@material/mwc-fab";
+import "../../../components/ha-icon-button";
+import "../../../components/ha-svg-icon";
 import {
   AreaRegistryEntry,
   createAreaRegistryEntry,
@@ -26,8 +29,6 @@ import {
   devicesInArea,
 } from "../../../data/device_registry";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
-import "../../../components/ha-icon-button";
-import "../../../components/ha-svg-icon";
 import "../../../layouts/hass-loading-screen";
 import "../../../layouts/hass-tabs-subpage-data-table";
 import { HomeAssistant, Route } from "../../../types";
@@ -37,7 +38,6 @@ import {
   loadAreaRegistryDetailDialog,
   showAreaRegistryDetailDialog,
 } from "./show-dialog-area-registry-detail";
-import { mdiPlus } from "@mdi/js";
 
 @customElement("ha-config-areas-dashboard")
 export class HaConfigAreasDashboard extends LitElement {

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

@@ -1,9 +1,9 @@
 import {
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
 import memoizeOne from "memoize-one";
@@ -25,8 +25,8 @@ import {
 } from "../../../data/device_registry";
 import {
   EntityRegistryEntry,
-  findBatteryEntity,
   findBatteryChargingEntity,
+  findBatteryEntity,
 } from "../../../data/entity_registry";
 import { domainToName } from "../../../data/integration";
 import "../../../layouts/hass-tabs-subpage-data-table";
@@ -181,8 +181,8 @@ export class HaConfigDeviceDashboard extends LitElement {
   );
 
   private _columns = memoizeOne(
-    (narrow: boolean): DataTableColumnContainer =>
+    (narrow: boolean): DataTableColumnContainer => {
-      narrow
+      const columns: DataTableColumnContainer = narrow
         ? {
             name: {
               title: "Device",
@@ -199,36 +199,6 @@ export class HaConfigDeviceDashboard extends LitElement {
                 `;
               },
             },
-            battery_entity: {
-              title: this.hass.localize(
-                "ui.panel.config.devices.data_table.battery"
-              ),
-              sortable: true,
-              type: "numeric",
-              width: "90px",
-              template: (
-                batteryEntityPair: DeviceRowData["battery_entity"]
-              ) => {
-                const battery =
-                  batteryEntityPair && batteryEntityPair[0]
-                    ? this.hass.states[batteryEntityPair[0]]
-                    : undefined;
-                const batteryCharging =
-                  batteryEntityPair && batteryEntityPair[1]
-                    ? this.hass.states[batteryEntityPair[1]]
-                    : undefined;
-                return battery
-                  ? html`
-                      ${isNaN(battery.state as any) ? "-" : battery.state}%
-                      <ha-battery-icon
-                        .hass=${this.hass!}
-                        .batteryStateObj=${battery}
-                        .batteryChargingStateObj=${batteryCharging}
-                      ></ha-battery-icon>
-                    `
-                  : html` - `;
-              },
-            },
           }
         : {
             name: {
@@ -240,49 +210,47 @@ export class HaConfigDeviceDashboard extends LitElement {
               grows: true,
               direction: "asc",
             },
-            manufacturer: {
+          };
+
+      columns.manufacturer = {
         title: this.hass.localize(
           "ui.panel.config.devices.data_table.manufacturer"
         ),
         sortable: true,
+        hidden: narrow,
         filterable: true,
         width: "15%",
-            },
+      };
-            model: {
+      columns.model = {
-              title: this.hass.localize(
+        title: this.hass.localize("ui.panel.config.devices.data_table.model"),
-                "ui.panel.config.devices.data_table.model"
-              ),
         sortable: true,
+        hidden: narrow,
         filterable: true,
         width: "15%",
-            },
+      };
-            area: {
+      columns.area = {
-              title: this.hass.localize(
+        title: this.hass.localize("ui.panel.config.devices.data_table.area"),
-                "ui.panel.config.devices.data_table.area"
-              ),
         sortable: true,
+        hidden: narrow,
         filterable: true,
         width: "15%",
-            },
+      };
-            integration: {
+      columns.integration = {
         title: this.hass.localize(
           "ui.panel.config.devices.data_table.integration"
         ),
         sortable: true,
+        hidden: narrow,
         filterable: true,
         width: "15%",
-            },
+      };
-            battery_entity: {
+      columns.battery_entity = {
-              title: this.hass.localize(
+        title: this.hass.localize("ui.panel.config.devices.data_table.battery"),
-                "ui.panel.config.devices.data_table.battery"
-              ),
         sortable: true,
         type: "numeric",
-              width: "15%",
+        width: narrow ? "90px" : "15%",
         maxWidth: "90px",
-              template: (
+        template: (batteryEntityPair: DeviceRowData["battery_entity"]) => {
-                batteryEntityPair: DeviceRowData["battery_entity"]
-              ) => {
           const battery =
             batteryEntityPair && batteryEntityPair[0]
               ? this.hass.states[batteryEntityPair[0]]
@@ -302,7 +270,8 @@ export class HaConfigDeviceDashboard extends LitElement {
               `
             : html` - `;
         },
-            },
+      };
+      return columns;
     }
   );