Remove hass property in ha-data-table (#51304)

gallery/src/pages/misc/entity-state.ts

@@ -422,7 +422,6 @@ export class DemoEntityState extends LitElement {
 
     return html`
       <ha-data-table
-        .hass=${this.hass}
         .columns=${this._columns(this.hass)}
         .data=${this._rows()}
         auto-height

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

@@ -1,3 +1,4 @@
+import { consume, type ContextType } from "@lit/context";
 import { mdiArrowDown, mdiArrowUp, mdiChevronUp } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
@@ -21,9 +22,10 @@ import type { LocalizeFunc } from "../../common/translations/localize";
 import { debounce } from "../../common/util/debounce";
 import { groupBy } from "../../common/util/group-by";
 import { nextRender } from "../../common/util/render-status";
+import { localeContext, localizeContext } from "../../data/context";
+import type { FrontendLocaleData } from "../../data/translation";
 import { haStyleScrollbar } from "../../resources/styles";
 import { loadVirtualizer } from "../../resources/virtualizer";
-import type { HomeAssistant } from "../../types";
 import "../ha-checkbox";
 import type { HaCheckbox } from "../ha-checkbox";
 import "../ha-svg-icon";
@@ -104,9 +106,13 @@ const UNDEFINED_GROUP_KEY = "zzzzz_undefined";
 
 @customElement("ha-data-table")
 export class HaDataTable extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consume({ context: localizeContext, subscribe: true })
+  private _localize?: ContextType<typeof localizeContext>;
 
-  @property({ attribute: false }) public localizeFunc?: LocalizeFunc;
+  @state()
+  @consume({ context: localeContext, subscribe: true })
+  private _locale?: ContextType<typeof localeContext>;
 
   @property({ type: Boolean }) public narrow = false;
 
@@ -378,8 +384,6 @@ export class HaDataTable extends LitElement {
   );
 
   protected render() {
-    const localize = this.localizeFunc || this.hass.localize;
-
     const columns = this._sortedColumns(this.columns, this.columnOrder);
 
     const renderRow = (row: DataTableRowData, index: number) =>
@@ -503,7 +507,8 @@ export class HaDataTable extends LitElement {
                   <div class="mdc-data-table__row" role="row">
                     <div class="mdc-data-table__cell grows center" role="cell">
                       ${this.noDataText ||
-                      localize("ui.components.data-table.no-data")}
+                      this._localize?.("ui.components.data-table.no-data") ||
+                      "No data"}
                     </div>
                   </div>
                 </div>
@@ -515,7 +520,8 @@ export class HaDataTable extends LitElement {
                   @scroll=${this._saveScrollPos}
                   .items=${this._groupData(
                     this._filteredData,
-                    localize,
+                    this._localize,
+                    this._locale,
                     this.appendRow,
                     this.groupColumn,
                     this.groupOrder,
@@ -685,7 +691,7 @@ export class HaDataTable extends LitElement {
             this._sortColumns[this.sortColumn],
             this.sortDirection,
             this.sortColumn,
-            this.hass.locale.language
+            this._locale?.language
           )
         : filteredData;
 
@@ -711,7 +717,8 @@ export class HaDataTable extends LitElement {
   private _groupData = memoizeOne(
     (
       data: DataTableRowData[],
-      localize: LocalizeFunc,
+      localize: LocalizeFunc | undefined,
+      locale: FrontendLocaleData | undefined,
       appendRow,
       groupColumn: string | undefined,
       groupOrder: string[] | undefined,
@@ -735,11 +742,7 @@ export class HaDataTable extends LitElement {
           )
             .sort((a, b) => {
               if (!groupOrder && isGroupSortColumn) {
-                const comparison = stringCompare(
+                const comparison = stringCompare(a, b, locale?.language);
-                  a,
-                  b,
-                  this.hass.locale.language
-                );
                 if (sortDirection === "asc") {
                   return comparison;
                 }
@@ -760,7 +763,7 @@ export class HaDataTable extends LitElement {
               return stringCompare(
                 ["", "-", "—"].includes(a) ? "zzz" : a,
                 ["", "-", "—"].includes(b) ? "zzz" : b,
-                this.hass.locale.language
+                locale?.language
               );
             })
             .reduce(
@@ -787,14 +790,15 @@ export class HaDataTable extends LitElement {
               >
                 <ha-icon-button
                   .path=${mdiChevronUp}
-                  .label=${this.hass.localize(
+                  .label=${localize?.(
                     `ui.components.data-table.${collapsed ? "expand" : "collapse"}`
-                  )}
+                  ) || (collapsed ? "Expand" : "Collapse")}
                   class=${collapsed ? "collapsed" : ""}
                 >
                 </ha-icon-button>
                 ${groupName === UNDEFINED_GROUP_KEY
-                  ? localize("ui.components.data-table.ungrouped")
+                  ? localize?.("ui.components.data-table.ungrouped") ||
+                    "Ungrouped"
                   : groupName || ""}
               </div>`,
             });
@@ -863,7 +867,8 @@ export class HaDataTable extends LitElement {
 
     const groupedData = this._groupData(
       this._filteredData,
-      this.localizeFunc || this.hass.localize,
+      this._localize,
+      this._locale,
       this.appendRow,
       this.groupColumn,
       this.groupOrder,

src/layouts/hass-tabs-subpage-data-table.ts

@@ -505,7 +505,6 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
                   `
                 : ""}
               <ha-data-table
-                .hass=${this.hass}
                 .narrow=${this.narrow}
                 .columns=${this.columns}
                 .data=${this.data}

src/panels/config/apps/ha-config-apps-registries.ts

@@ -108,7 +108,6 @@ export class HaConfigAppsRegistries extends LitElement {
         .header=${this.hass.localize("ui.panel.config.apps.store.registries")}
       >
         <ha-data-table
-          .hass=${this.hass}
           .columns=${this._columns(this.hass.localize)}
           .data=${this._registries}
           .noDataText=${this.hass.localize(

src/panels/config/apps/ha-config-apps-repositories.ts

@@ -187,7 +187,6 @@ export class HaConfigAppsRepositories extends LitElement {
         .header=${this.hass.localize("ui.panel.config.apps.store.repositories")}
       >
         <ha-data-table
-          .hass=${this.hass}
           .columns=${this._columns(this.hass.localize, usedRepositories)}
           .data=${this._data(repositories)}
           .noDataText=${this.hass.localize(

src/panels/config/developer-tools/statistics/developer-tools-statistics.ts

@@ -451,7 +451,6 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
             `
           : ""}
         <ha-data-table
-          .hass=${this.hass}
           .narrow=${this.narrow}
           .columns=${columns}
           .data=${this._displayData(this._data, this.hass.localize)}

src/panels/config/hardware/ha-config-hardware-all.ts

@@ -5,7 +5,6 @@ import { customElement, property, state } from "lit/decorators";
 import { until } from "lit/directives/until";
 import memoizeOne from "memoize-one";
 import type { LocalizeFunc } from "../../../common/translations/localize";
-import "../../../components/data-table/ha-data-table";
 import type {
   DataTableColumnContainer,
   DataTableRowData,

src/panels/config/integrations/integration-panels/zha/zha-clusters-data-table.ts

@@ -74,7 +74,6 @@ export class ZHAClustersDataTable extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-data-table
-        .hass=${this.hass}
         .columns=${this._columns(this.narrow)}
         .data=${this._clusters(this.clusters)}
         .id=${"cluster_id"}

src/panels/config/integrations/integration-panels/zha/zha-device-endpoint-data-table.ts

@@ -158,7 +158,6 @@ export class ZHADeviceEndpointDataTable extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-data-table
-        .hass=${this.hass}
         .columns=${this._columns(this.hass.localize, this.narrow)}
         .data=${this._deviceEndpoints(this.deviceEndpoints, this.hass.areas)}
         .selectable=${this.selectable}

src/panels/config/integrations/integration-panels/zha/zha-device-neighbors.ts

@@ -118,7 +118,6 @@ class ZHADeviceNeighbors extends LitElement {
       ${!this._devices
         ? html`<ha-spinner size="large"></ha-spinner>`
         : html`<ha-data-table
-            .hass=${this.hass}
             .columns=${this._columns(this.narrow)}
             .data=${this._deviceNeighbors(this.device, this._devices)}
             auto-height

src/panels/config/voice-assistants/assist/ha-config-voice-assistants-assist-devices.ts

@@ -129,7 +129,6 @@ class AssistDevicesPage extends LitElement {
         <ha-data-table
           clickable
           id="device_id"
-          .hass=${this.hass}
           .columns=${this._columns(this.hass.localize)}
           .data=${this._data(
             this.hass.localize,

src/panels/lovelace/editor/card-editor/hui-entity-picker-table.ts

@@ -104,7 +104,6 @@ export class HuiEntityPickerTable extends LitElement {
     return html`
       <ha-data-table
         class=${showEntityId ? "show-entity-id" : ""}
-        .hass=${this.hass}
         selectable
         .id=${"entity_id"}
         .columns=${columns}