Hide columns in unused entities on mobile (#3719)

* Hide columns in unused entities on mobile

* Update hui-unused-entities.ts

* Fix

* Update hui-unused-entities.ts

src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts

@@ -10,6 +10,9 @@ import {
 } from "lit-element";
 
 import { classMap } from "lit-html/directives/class-map";
+
+import memoizeOne from "memoize-one";
+
 import "../../../../components/ha-fab";
 import "../../../../components/entity/state-badge";
 import "../../../../components/ha-relative-time";
@@ -17,7 +20,10 @@ import "../../../../components/ha-icon";
 
 import "../../../../components/ha-data-table";
 // tslint:disable-next-line
-import { SelectionChangedEvent } from "../../../../components/ha-data-table";
+import {
+  SelectionChangedEvent,
+  DataTabelColumnContainer,
+} from "../../../../components/ha-data-table";
 
 import computeStateName from "../../../../common/entity/compute_state_name";
 import computeDomain from "../../../../common/entity/compute_domain";
@@ -38,6 +44,8 @@ export class HuiUnusedEntities extends LitElement {
 
   @property() public hass?: HomeAssistant;
 
+  @property() public narrow?: boolean;
+
   @property() private _unusedEntities: string[] = [];
 
   private _selectedEntities: string[] = [];
@@ -46,7 +54,8 @@ export class HuiUnusedEntities extends LitElement {
     return this.lovelace!.config;
   }
 
-  private _columns = {
+  private _columns = memoizeOne((narrow: boolean) => {
+    const columns: DataTabelColumnContainer = {
       entity: {
         title: "Entity",
         sortable: true,
@@ -55,22 +64,31 @@ export class HuiUnusedEntities extends LitElement {
         direction: "asc",
         template: (stateObj) => html`
           <div @click=${this._handleEntityClicked} style="cursor: pointer;">
-          <state-badge .hass=${this.hass!} .stateObj=${stateObj}></state-badge>
+            <state-badge
+              .hass=${this.hass!}
+              .stateObj=${stateObj}
+            ></state-badge>
             ${stateObj.friendly_name}
           </div>
         `,
       },
-    entity_id: {
+    };
+
+    if (narrow) {
+      return columns;
+    }
+
+    columns.entity_id = {
       title: "Entity id",
       sortable: true,
       filterable: true,
-    },
-    domain: {
+    };
+    columns.domain = {
       title: "Domain",
       sortable: true,
       filterable: true,
-    },
-    last_changed: {
+    };
+    columns.last_changed = {
       title: "Last Changed",
       type: "numeric",
       sortable: true,
@@ -80,9 +98,11 @@ export class HuiUnusedEntities extends LitElement {
           .datetime=${lastChanged}
         ></ha-relative-time>
       `,
-    },
     };
 
+    return columns;
+  });
+
   protected updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
 
@@ -114,7 +134,7 @@ export class HuiUnusedEntities extends LitElement {
         </div>
       </ha-card>
       <ha-data-table
-        .columns=${this._columns}
+        .columns=${this._columns(this.narrow!)}
         .data=${this._unusedEntities.map((entity) => {
           const stateObj = this.hass!.states[entity];
           return {

src/panels/lovelace/hui-root.ts

@@ -602,6 +602,7 @@ class HUIRoot extends LitElement {
         () => {
           unusedEntities.hass = this.hass!;
           unusedEntities.lovelace = this.lovelace!;
+          unusedEntities.narrow = this.narrow;
         }
       );
       if (this.config.background) {