diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index af549b942f..db83db5a6d 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/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) => {
-              const [key, column] = columnEntry;
+            ${Object.entries(this.columns).map(([key, column]) => {
+              if (column.hidden) {
+                return "";
+              }
               const sorted = key === this._sortColumn;
               const classes = {
                 "mdc-data-table__header-cell--numeric": Boolean(
@@ -346,41 +349,45 @@ export class HaDataTable extends LitElement {
                                 </div>
                               `
                             : ""}
-                          ${Object.entries(this.columns).map((columnEntry) => {
-                            const [key, column] = columnEntry;
-                            return html`
-                              <div
-                                role="cell"
-                                class="mdc-data-table__cell ${classMap({
-                                  "mdc-data-table__cell--numeric": Boolean(
-                                    column.type === "numeric"
-                                  ),
-                                  "mdc-data-table__cell--icon": Boolean(
-                                    column.type === "icon"
-                                  ),
-                                  "mdc-data-table__cell--icon-button": Boolean(
-                                    column.type === "icon-button"
-                                  ),
-                                  grows: Boolean(column.grows),
-                                  forceLTR: Boolean(column.forceLTR),
-                                })}"
-                                style=${column.width
-                                  ? styleMap({
-                                      [column.grows
-                                        ? "minWidth"
-                                        : "width"]: column.width,
-                                      maxWidth: column.maxWidth
-                                        ? column.maxWidth
-                                        : "",
-                                    })
-                                  : ""}
-                              >
-                                ${column.template
-                                  ? column.template(row[key], row)
-                                  : row[key]}
-                              </div>
-                            `;
-                          })}
+                          ${Object.entries(this.columns).map(
+                            ([key, column]) => {
+                              if (column.hidden) {
+                                return "";
+                              }
+                              return html`
+                                <div
+                                  role="cell"
+                                  class="mdc-data-table__cell ${classMap({
+                                    "mdc-data-table__cell--numeric": Boolean(
+                                      column.type === "numeric"
+                                    ),
+                                    "mdc-data-table__cell--icon": Boolean(
+                                      column.type === "icon"
+                                    ),
+                                    "mdc-data-table__cell--icon-button": Boolean(
+                                      column.type === "icon-button"
+                                    ),
+                                    grows: Boolean(column.grows),
+                                    forceLTR: Boolean(column.forceLTR),
+                                  })}"
+                                  style=${column.width
+                                    ? styleMap({
+                                        [column.grows
+                                          ? "minWidth"
+                                          : "width"]: column.width,
+                                        maxWidth: column.maxWidth
+                                          ? column.maxWidth
+                                          : "",
+                                      })
+                                    : ""}
+                                >
+                                  ${column.template
+                                    ? column.template(row[key], row)
+                                    : row[key]}
+                                </div>
+                              `;
+                            }
+                          )}
                         </div>
                       `;
                     },
diff --git a/src/components/data-table/sort_filter_worker.ts b/src/components/data-table/sort_filter_worker.ts
index 4c0d6d1987..1c04338a3c 100644
--- a/src/components/data-table/sort_filter_worker.ts
+++ b/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)
         ) {
diff --git a/src/panels/config/areas/ha-config-areas-dashboard.ts b/src/panels/config/areas/ha-config-areas-dashboard.ts
index d5c776baa7..3b2262ee75 100644
--- a/src/panels/config/areas/ha-config-areas-dashboard.ts
+++ b/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 {
diff --git a/src/panels/config/devices/ha-config-devices-dashboard.ts b/src/panels/config/devices/ha-config-devices-dashboard.ts
index 884c7c16dc..274eecf5e0 100644
--- a/src/panels/config/devices/ha-config-devices-dashboard.ts
+++ b/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
+    (narrow: boolean): DataTableColumnContainer => {
+      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,70 +210,69 @@ export class HaConfigDeviceDashboard extends LitElement {
               grows: true,
               direction: "asc",
             },
-            manufacturer: {
-              title: this.hass.localize(
-                "ui.panel.config.devices.data_table.manufacturer"
-              ),
-              sortable: true,
-              filterable: true,
-              width: "15%",
-            },
-            model: {
-              title: this.hass.localize(
-                "ui.panel.config.devices.data_table.model"
-              ),
-              sortable: true,
-              filterable: true,
-              width: "15%",
-            },
-            area: {
-              title: this.hass.localize(
-                "ui.panel.config.devices.data_table.area"
-              ),
-              sortable: true,
-              filterable: true,
-              width: "15%",
-            },
-            integration: {
-              title: this.hass.localize(
-                "ui.panel.config.devices.data_table.integration"
-              ),
-              sortable: true,
-              filterable: true,
-              width: "15%",
-            },
-            battery_entity: {
-              title: this.hass.localize(
-                "ui.panel.config.devices.data_table.battery"
-              ),
-              sortable: true,
-              type: "numeric",
-              width: "15%",
-              maxWidth: "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 && !isNaN(battery.state as any)
-                  ? html`
-                      ${battery.state}%
-                      <ha-battery-icon
-                        .hass=${this.hass!}
-                        .batteryStateObj=${battery}
-                        .batteryChargingStateObj=${batteryCharging}
-                      ></ha-battery-icon>
-                    `
-                  : html` - `;
-              },
-            },
-          }
+          };
+
+      columns.manufacturer = {
+        title: this.hass.localize(
+          "ui.panel.config.devices.data_table.manufacturer"
+        ),
+        sortable: true,
+        hidden: narrow,
+        filterable: true,
+        width: "15%",
+      };
+      columns.model = {
+        title: this.hass.localize("ui.panel.config.devices.data_table.model"),
+        sortable: true,
+        hidden: narrow,
+        filterable: true,
+        width: "15%",
+      };
+      columns.area = {
+        title: this.hass.localize("ui.panel.config.devices.data_table.area"),
+        sortable: true,
+        hidden: narrow,
+        filterable: true,
+        width: "15%",
+      };
+      columns.integration = {
+        title: this.hass.localize(
+          "ui.panel.config.devices.data_table.integration"
+        ),
+        sortable: true,
+        hidden: narrow,
+        filterable: true,
+        width: "15%",
+      };
+      columns.battery_entity = {
+        title: this.hass.localize("ui.panel.config.devices.data_table.battery"),
+        sortable: true,
+        type: "numeric",
+        width: narrow ? "90px" : "15%",
+        maxWidth: "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 && !isNaN(battery.state as any)
+            ? html`
+                ${battery.state}%
+                <ha-battery-icon
+                  .hass=${this.hass!}
+                  .batteryStateObj=${battery}
+                  .batteryChargingStateObj=${batteryCharging}
+                ></ha-battery-icon>
+              `
+            : html` - `;
+        },
+      };
+      return columns;
+    }
   );
 
   public constructor() {