From fe3a63af804dfc3f8c30fa9ed25086746cd5c32d Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Fri, 1 Sep 2023 17:33:41 +0200
Subject: [PATCH] Sort data using locale in data tables (#17781)

* Sort data using locale in data tables

* Only use string compare is both values are string
---
 src/components/data-table/ha-data-table.ts      |  3 ++-
 src/components/data-table/sort-filter-worker.ts | 15 ++++++---------
 src/components/data-table/sort-filter.ts        |  6 ++++--
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index 5426e1179e..e888690639 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -458,7 +458,8 @@ export class HaDataTable extends LitElement {
           filteredData,
           this._sortColumns[this._sortColumn],
           this._sortDirection,
-          this._sortColumn
+          this._sortColumn,
+          this.hass.locale.language
         )
       : filteredData;
 
diff --git a/src/components/data-table/sort-filter-worker.ts b/src/components/data-table/sort-filter-worker.ts
index e2e3b859f4..babb0120b6 100644
--- a/src/components/data-table/sort-filter-worker.ts
+++ b/src/components/data-table/sort-filter-worker.ts
@@ -1,6 +1,7 @@
 // To use comlink under ES5
-import "proxy-polyfill";
 import { expose } from "comlink";
+import "proxy-polyfill";
+import { stringCompare } from "../../common/string/compare";
 import type {
   ClonedDataTableColumnData,
   DataTableRowData,
@@ -39,7 +40,8 @@ const sortData = (
   data: DataTableRowData[],
   column: ClonedDataTableColumnData,
   direction: SortingDirection,
-  sortColumn: string
+  sortColumn: string,
+  language?: string
 ) =>
   data.sort((a, b) => {
     let sort = 1;
@@ -58,13 +60,8 @@ const sortData = (
     if (column.type === "numeric") {
       valA = isNaN(valA) ? undefined : Number(valA);
       valB = isNaN(valB) ? undefined : Number(valB);
-    } else {
-      if (typeof valA === "string") {
-        valA = valA.toUpperCase();
-      }
-      if (typeof valB === "string") {
-        valB = valB.toUpperCase();
-      }
+    } else if (typeof valA === "string" && typeof valB === "string") {
+      return sort * stringCompare(valA, valB, language);
     }
 
     // Ensure "undefined" and "null" are always sorted to the bottom
diff --git a/src/components/data-table/sort-filter.ts b/src/components/data-table/sort-filter.ts
index e0eacf3305..b6d5310665 100644
--- a/src/components/data-table/sort-filter.ts
+++ b/src/components/data-table/sort-filter.ts
@@ -27,10 +27,12 @@ export const filterData = (
   filter: FilterDataParamTypes[2]
 ): Promise<ReturnType<FilterDataType>> =>
   getWorker().filterData(data, columns, filter);
+
 export const sortData = (
   data: SortDataParamTypes[0],
   columns: SortDataParamTypes[1],
   direction: SortDataParamTypes[2],
-  sortColumn: SortDataParamTypes[3]
+  sortColumn: SortDataParamTypes[3],
+  language?: SortDataParamTypes[4]
 ): Promise<ReturnType<SortDataType>> =>
-  getWorker().sortData(data, columns, direction, sortColumn);
+  getWorker().sortData(data, columns, direction, sortColumn, language);