From 790d43bc1df23870123c3c2e38af72b7d1393fa2 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 3 Jul 2024 17:08:44 +0200
Subject: [PATCH] Allow custom localize function for datatable

---
 src/components/data-table/ha-data-table.ts  | 11 +++++++++--
 src/layouts/hass-tabs-subpage-data-table.ts |  8 ++++----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index bd1507e2eee0..1819256bab0c 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -34,6 +34,7 @@ import type { HaCheckbox } from "../ha-checkbox";
 import "../ha-svg-icon";
 import "../search-input";
 import { filterData, sortData } from "./sort-filter";
+import { LocalizeFunc } from "../../common/translations/localize";
 
 export interface RowClickedEvent {
   id: string;
@@ -110,6 +111,8 @@ const UNDEFINED_GROUP_KEY = "zzzzz_undefined";
 export class HaDataTable extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public localizeFunc?: LocalizeFunc;
+
   @property({ type: Boolean }) public narrow = false;
 
   @property({ type: Object }) public columns: DataTableColumnContainer = {};
@@ -317,6 +320,8 @@ 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) =>
@@ -436,7 +441,7 @@ 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 ||
-                      this.hass.localize("ui.components.data-table.no-data")}
+                      localize("ui.components.data-table.no-data")}
                     </div>
                   </div>
                 </div>
@@ -619,6 +624,8 @@ export class HaDataTable extends LitElement {
       return;
     }
 
+    const localize = this.localizeFunc || this.hass.localize;
+
     if (this.appendRow || this.hasFab || this.groupColumn) {
       let items = [...data];
 
@@ -672,7 +679,7 @@ export class HaDataTable extends LitElement {
               >
               </ha-icon-button>
               ${groupName === UNDEFINED_GROUP_KEY
-                ? this.hass.localize("ui.components.data-table.ungrouped")
+                ? localize("ui.components.data-table.ungrouped")
                 : groupName || ""}
             </div>`,
           });
diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts
index 4f062182a2dc..615fb2d5d056 100644
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -430,6 +430,7 @@ export class HaTabsSubpageDataTable extends LitElement {
                 : ""}
               <ha-data-table
                 .hass=${this.hass}
+                .localize=${localize}
                 .narrow=${this.narrow}
                 .columns=${this.columns}
                 .data=${this.data}
@@ -575,10 +576,9 @@ export class HaTabsSubpageDataTable extends LitElement {
             </div>
             <div slot="primaryAction">
               <ha-button @click=${this._toggleFilters}>
-                ${this.hass.localize(
-                  "ui.components.subpage-data-table.show_results",
-                  { number: this.data.length }
-                )}
+                ${localize("ui.components.subpage-data-table.show_results", {
+                  number: this.data.length,
+                })}
               </ha-button>
             </div>
           </ha-dialog>`