From 1b54d51e4a0607b8077ec5a9efc14c47eac7c7d8 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 22 Apr 2024 18:28:50 +0200
Subject: [PATCH] Add option for custom group order to data table (#20582)

---
 src/components/data-table/ha-data-table.ts  | 22 +++++++++++++++++----
 src/layouts/hass-tabs-subpage-data-table.ts |  3 +++
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index d6b6f8a283..553fa07777 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -133,6 +133,8 @@ export class HaDataTable extends LitElement {
 
   @property() public groupColumn?: string;
 
+  @property({ attribute: false }) public groupOrder?: string[];
+
   @property() public sortColumn?: string;
 
   @property() public sortDirection: SortingDirection = null;
@@ -254,6 +256,7 @@ export class HaDataTable extends LitElement {
       properties.has("sortColumn") ||
       properties.has("sortDirection") ||
       properties.has("groupColumn") ||
+      properties.has("groupOrder") ||
       properties.has("_collapsedGroups")
     ) {
       this._sortFilterData();
@@ -530,13 +533,24 @@ export class HaDataTable extends LitElement {
         const sorted: {
           [key: string]: DataTableRowData[];
         } = Object.keys(grouped)
-          .sort((a, b) =>
-            stringCompare(
+          .sort((a, b) => {
+            const orderA = this.groupOrder?.indexOf(a) ?? -1;
+            const orderB = this.groupOrder?.indexOf(b) ?? -1;
+            if (orderA !== orderB) {
+              if (orderA === -1) {
+                return 1;
+              }
+              if (orderB === -1) {
+                return -1;
+              }
+              return orderA - orderB;
+            }
+            return stringCompare(
               ["", "-", "—"].includes(a) ? "zzz" : a,
               ["", "-", "—"].includes(b) ? "zzz" : b,
               this.hass.locale.language
-            )
-          )
+            );
+          })
           .reduce((obj, key) => {
             obj[key] = grouped[key];
             return obj;
diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts
index 7a9f118452..eee6153e4a 100644
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -165,6 +165,8 @@ export class HaTabsSubpageDataTable extends LitElement {
 
   @property() public initialGroupColumn?: string;
 
+  @property({ attribute: false }) public groupOrder?: string[];
+
   @state() private _sortColumn?: string;
 
   @state() private _sortDirection: SortingDirection = null;
@@ -422,6 +424,7 @@ export class HaTabsSubpageDataTable extends LitElement {
                 .sortColumn=${this._sortColumn}
                 .sortDirection=${this._sortDirection}
                 .groupColumn=${this._groupColumn}
+                .groupOrder=${this.groupOrder}
               >
                 ${!this.narrow
                   ? html`