From f681135eb7b5b7b7a3bca7971e8225535e5a6e7f Mon Sep 17 00:00:00 2001
From: Lauest <nla@iterator-it.dk>
Date: Wed, 5 Mar 2025 15:46:59 +0100
Subject: [PATCH 1/2] added sorting arrow to devices and gateway table

---
 .../applications-table.component.html         |   1 -
 .../iot-devices-table.component.html          |  75 +++++++++--
 .../iot-devices-table.component.scss          |  13 ++
 .../iot-devices-table.component.ts            |  19 ++-
 .../iot-devices/iot-devices.module.ts         |  44 +++---
 .../gateway-table.component.html              | 125 +++++++++++++++---
 .../gateway-table.component.scss              |  21 ++-
 .../gateway-table/gateway-table.component.ts  |  39 ++++--
 src/app/gateway/gateway.module.ts             |  26 ++--
 9 files changed, 271 insertions(+), 92 deletions(-)

diff --git a/src/app/applications/applications-list/applications-table/applications-table.component.html b/src/app/applications/applications-list/applications-table/applications-table.component.html
index 8adf062c4..1d1fc6395 100644
--- a/src/app/applications/applications-list/applications-table/applications-table.component.html
+++ b/src/app/applications/applications-list/applications-table/applications-table.component.html
@@ -208,7 +208,6 @@
 
       <ng-container matColumnDef="menu">
         <th mat-header-cell *matHeaderCellDef class="col-1"></th>
-
         <td mat-cell *matCellDef="let element">
           <div class="dropdown" *ngIf="element?.id | canEditApplication">
             <a
diff --git a/src/app/applications/iot-devices/iot-devices-table/iot-devices-table.component.html b/src/app/applications/iot-devices/iot-devices-table/iot-devices-table.component.html
index 404ea8474..9a7dc8d3b 100644
--- a/src/app/applications/iot-devices/iot-devices-table/iot-devices-table.component.html
+++ b/src/app/applications/iot-devices/iot-devices-table/iot-devices-table.component.html
@@ -20,7 +20,10 @@
     <!-- Name Column -->
     <ng-container matColumnDef="name">
       <th mat-sort-header="name" *matHeaderCellDef mat-header-cell>
-        {{ "APPLICATION-TABLE.NAME" | translate }}
+        <div [ngClass]="this.sort.active === 'name' ? 'column-title-color' : 'column-title-color-inactive'">
+          {{ "APPLICATION-TABLE.NAME" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('name')" />
       </th>
       <td mat-cell *matCellDef="let iotDevice">
         <a [routerLink]="['../iot-device', iotDevice.id]" routerLinkActive="active" class="device-link">{{
@@ -31,41 +34,80 @@
 
     <!-- Technology Column -->
     <ng-container matColumnDef="type">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "IOT-TABLE.NETWORK-TECHNOLOGY" | translate }}</th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>
+        <div [ngClass]="this.sort.active === 'type' ? 'column-title-color' : 'column-title-color-inactive'">
+          {{ "IOT-TABLE.NETWORK-TECHNOLOGY" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('type')" />
+      </th>
       <td mat-cell *matCellDef="let iotDevice">{{ "IOT-DEVICE-TYPES." + iotDevice.type | translate }}</td>
     </ng-container>
 
     <ng-container matColumnDef="commentOnLocation">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "GATEWAY.PLACEMENT-LABEL" | translate }}</th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>
+        <div
+          [ngClass]="this.sort.active === 'commentOnLocation' ? 'column-title-color' : 'column-title-color-inactive'"
+        >
+          {{ "GATEWAY.PLACEMENT-LABEL" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('commentOnLocation')" />
+      </th>
       <td mat-cell *matCellDef="let iotDevice">
         {{ iotDevice.commentOnLocation ? truncateText(iotDevice.commentOnLocation) : "-" }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="deviceModel">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "IOTDEVICE.DEVICEMODEL" | translate }}</th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>
+        <div [ngClass]="this.sort.active === 'deviceModel' ? 'column-title-color' : 'column-title-color-inactive'">
+          {{ "IOTDEVICE.DEVICEMODEL" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('deviceModel')" />
+      </th>
       <td mat-cell *matCellDef="let iotDevice">{{ iotDevice.deviceModel?.body?.name ?? "-" }}</td>
     </ng-container>
 
     <ng-container matColumnDef="deviceProfileName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "IOTDEVICE.LORA.DEVICEPROFILE" | translate }}</th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>
+        <div
+          [ngClass]="this.sort.active === 'deviceProfileName' ? 'column-title-color' : 'column-title-color-inactive'"
+        >
+          {{ "IOTDEVICE.LORA.DEVICEPROFILE" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('deviceProfileName')" />
+      </th>
       <td mat-cell *matCellDef="let iotDevice">{{ iotDevice.deviceProfileName ?? "-" }}</td>
     </ng-container>
 
     <ng-container matColumnDef="deviceEUI">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "IOT-TABLE.DEV-EUI" | translate }}</th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>
+        <div [ngClass]="this.sort.active === 'deviceEUI' ? 'column-title-color' : 'column-title-color-inactive'">
+          {{ "IOT-TABLE.DEV-EUI" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('deviceEUI')" />
+      </th>
       <td mat-cell *matCellDef="let iotDevice">{{ iotDevice.deviceEUI ?? "-" }}</td>
     </ng-container>
 
     <ng-container matColumnDef="OTAAapplicationKey">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "IOT-TABLE.APP-KEY" | translate }}</th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>
+        <div
+          [ngClass]="this.sort.active === 'OTAAapplicationKey' ? 'column-title-color' : 'column-title-color-inactive'"
+        >
+          {{ "IOT-TABLE.APP-KEY" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('OTAAapplicationKey')" />
+      </th>
       <td mat-cell *matCellDef="let iotDevice">{{ iotDevice.OTAAapplicationKey ?? "-" }}</td>
     </ng-container>
 
     <!-- RSSI column -->
     <ng-container matColumnDef="rssi">
       <th *matHeaderCellDef mat-header-cell mat-sort-header="rssi">
-        {{ "IOT-TABLE.RSSI" | translate }}
+        <div [ngClass]="this.sort.active === 'rssi' ? 'column-title-color' : 'column-title-color-inactive'">
+          {{ "IOT-TABLE.RSSI" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('rssi')" />
       </th>
       <td mat-cell *matCellDef="let iotDevice">
         <ng-container *ngIf="iotDevice.type === 'LORAWAN' || iotDevice.type === 'SIGFOX'; else notSupported">
@@ -79,7 +121,10 @@
     <!-- SNR column -->
     <ng-container matColumnDef="snr">
       <th *matHeaderCellDef mat-header-cell mat-sort-header="snr">
-        {{ "IOT-TABLE.SNR" | translate }}
+        <div [ngClass]="this.sort.active === 'snr' ? 'column-title-color' : 'column-title-color-inactive'">
+          {{ "IOT-TABLE.SNR" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('snr')" />
       </th>
       <td mat-cell *matCellDef="let iotDevice">
         <ng-container *ngIf="iotDevice.type === 'LORAWAN' || iotDevice.type === 'SIGFOX'; else notSupported">
@@ -92,7 +137,10 @@
 
     <ng-container matColumnDef="dataTargets">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>
-        {{ "APPLICATION-TABLE.DATA-TARGETS" | translate }}
+        <div [ngClass]="this.sort.active === 'dataTargets' ? 'column-title-color' : 'column-title-color-inactive'">
+          {{ "APPLICATION-TABLE.DATA-TARGETS" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('dataTargets')" />
       </th>
       <td mat-cell *matCellDef="let iotDevice">{{ iotDevice.connections?.length ?? 0 }}</td>
     </ng-container>
@@ -118,7 +166,10 @@
     <!-- Active Column -->
     <ng-container matColumnDef="active">
       <th mat-header-cell *matHeaderCellDef mat-sort-header="active">
-        {{ "IOT-TABLE.ACTIVE" | translate }}
+        <div [ngClass]="this.sort.active === 'active' ? 'column-title-color' : 'column-title-color-inactive'">
+          {{ "IOT-TABLE.ACTIVE" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
       </th>
       <td mat-cell *matCellDef="let iotDevice">{{ lastActive(iotDevice) }}</td>
     </ng-container>
@@ -142,7 +193,7 @@
                 >{{ "IOTDEVICE-TABLE-ROW.EDIT" | translate }}
               </a>
             </li>
-            <li class="dropdown-item" *ngIf="iotDevice.type!==deviceTypes.SIGFOX">
+            <li class="dropdown-item" *ngIf="iotDevice.type !== deviceTypes.SIGFOX">
               <a (click)="onOpenChangeApplicationDialog(iotDevice.id)" routerLinkActive="active">{{
                 "IOTDEVICE.CHANGE-APPLICATION.TITLE" | translate
               }}</a>
diff --git a/src/app/applications/iot-devices/iot-devices-table/iot-devices-table.component.scss b/src/app/applications/iot-devices/iot-devices-table/iot-devices-table.component.scss
index e69de29bb..c8718451c 100644
--- a/src/app/applications/iot-devices/iot-devices-table/iot-devices-table.component.scss
+++ b/src/app/applications/iot-devices/iot-devices-table/iot-devices-table.component.scss
@@ -0,0 +1,13 @@
+@import "../../../../assets/scss/setup/variables";
+.column-title-color {
+  color: $color-link;
+  font-weight: bold;
+}
+
+.column-title-color-inactive {
+  color: $default-icon-color;
+}
+
+.mat-sort-header-arrow {
+  display: none !important;
+}
diff --git a/src/app/applications/iot-devices/iot-devices-table/iot-devices-table.component.ts b/src/app/applications/iot-devices/iot-devices-table/iot-devices-table.component.ts
index 5eaa2e4ac..0db2e3ee2 100644
--- a/src/app/applications/iot-devices/iot-devices-table/iot-devices-table.component.ts
+++ b/src/app/applications/iot-devices/iot-devices-table/iot-devices-table.component.ts
@@ -1,25 +1,25 @@
-import { AfterViewInit, Component, Input, OnInit, ViewChild } from "@angular/core";
+import { AfterViewInit, Component, Input, OnInit, ViewChild, ViewEncapsulation } from "@angular/core";
 import { MatDialog } from "@angular/material/dialog";
 import { MatPaginator } from "@angular/material/paginator";
 import { MatSort } from "@angular/material/sort";
+import { ActivatedRoute } from "@angular/router";
 import { IotDevice, IotDevicesResponse } from "@applications/iot-devices/iot-device.model";
 import { environment } from "@environments/environment";
 import { TranslateService } from "@ngx-translate/core";
 import { DeleteDialogComponent } from "@shared/components/delete-dialog/delete-dialog.component";
 import { DeleteDialogService } from "@shared/components/delete-dialog/delete-dialog.service";
+import { DefaultPageSizeOptions } from "@shared/constants/page.constants";
+import { OrganizationAccessScope } from "@shared/enums/access-scopes";
 import { DeviceType } from "@shared/enums/device-type";
+import { IoTDeviceApplicationDialogModel } from "@shared/models/dialog.model";
 import { MeService } from "@shared/services/me.service";
-import { OrganizationAccessScope } from "@shared/enums/access-scopes";
+import { TableColumn } from "@shared/types/table.type";
 import moment from "moment";
 import { merge, Observable, of as observableOf } from "rxjs";
 import { catchError, map, startWith, switchMap } from "rxjs/operators";
 import { RestService } from "src/app/shared/services/rest.service";
-import { IoTDeviceService } from "../iot-device.service";
-import { DefaultPageSizeOptions } from "@shared/constants/page.constants";
-import { ActivatedRoute } from "@angular/router";
-import { TableColumn } from "@shared/types/table.type";
 import { IoTDeviceChangeApplicationDialogComponent } from "../iot-device-change-application-dialog/iot-device-change-application-dialog.component";
-import { IoTDeviceApplicationDialogModel } from "@shared/models/dialog.model";
+import { IoTDeviceService } from "../iot-device.service";
 
 const columnDefinitions: TableColumn[] = [
   {
@@ -106,6 +106,7 @@ const columnDefinitions: TableColumn[] = [
   selector: "app-iot-devices-table",
   templateUrl: "./iot-devices-table.component.html",
   styleUrls: ["./iot-devices-table.component.scss"],
+  encapsulation: ViewEncapsulation.None,
 })
 export class IotDevicesTableComponent implements AfterViewInit, OnInit {
   @Input() applicationId: number;
@@ -262,6 +263,10 @@ export class IotDevicesTableComponent implements AfterViewInit, OnInit {
     });
   }
 
+  getSortDirection(id: string) {
+    return columnDefinitions.find(c => c.id === id).sort;
+  }
+
   public truncateText(text: string): string {
     const maxLength = 32;
     if (text.length <= maxLength) {
diff --git a/src/app/applications/iot-devices/iot-devices.module.ts b/src/app/applications/iot-devices/iot-devices.module.ts
index fa6361a87..29cac2ae3 100644
--- a/src/app/applications/iot-devices/iot-devices.module.ts
+++ b/src/app/applications/iot-devices/iot-devices.module.ts
@@ -1,40 +1,41 @@
+import { ClipboardModule } from "@angular/cdk/clipboard";
 import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import { RouterModule } from "@angular/router";
+import { GraphModule } from "@app/graph/graph.module";
+import { IotDeviceDetailsMqttExternalBrokerComponent } from "@applications/iot-devices/iot-device-detail/iot-device-details-mqtt-external-broker/iot-device-details-mqtt-external-broker.component";
+import { IotDeviceDetailsMqttInternalBrokerComponent } from "@applications/iot-devices/iot-device-detail/iot-device-details-mqtt-internal-broker/iot-device-details-mqtt-internal-broker.component";
+import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { TranslateModule } from "@ngx-translate/core";
 import { FormModule } from "@shared/components/forms/form.module";
+import { TableSortIconComponent } from "@shared/components/table-sort-icon/table-sort-icon.component";
 import { NGMaterialModule } from "@shared/Modules/materiale.module";
+import { PipesModule } from "@shared/pipes/pipes.module";
+import { SharedModule } from "@shared/shared.module";
+import { MonacoEditorModule } from "ngx-monaco-editor-v2";
+import { IoTDeviceChangeApplicationDialogComponent } from "./iot-device-change-application-dialog/iot-device-change-application-dialog.component";
+import { DataPackageComponent } from "./iot-device-detail/data-package/data-package.component";
+import { DataPackagesTimestampComponent } from "./iot-device-detail/data-packages-timestamp/data-packages-timestamp.component";
+import { DeviceModelComponent } from "./iot-device-detail/device-model/device-model.component";
+import { DownlinkDialogComponent } from "./iot-device-detail/downlink/downlink-dialog/downlink-dialog.component";
+import { DownlinkTablesComponent } from "./iot-device-detail/downlink/downlink-tables/downlink-tables.component";
 import { DownlinkComponent } from "./iot-device-detail/downlink/downlinks/downlink.component";
+import { IotDeviceDataPacketsTabComponent } from "./iot-device-detail/iot-device-data-packets-tab/iot-device-data-packets-tab.component";
 import { IotDeviceDetailGenericComponent } from "./iot-device-detail/iot-device-detail-generic/iot-device-detail-generic.component";
 import { IotDeviceDetailLorawanComponent } from "./iot-device-detail/iot-device-detail-lorawan/iot-device-detail-lorawan.component";
 import { IotDeviceDetailSigfoxComponent } from "./iot-device-detail/iot-device-detail-sigfox/iot-device-detail-sigfox.component";
 import { IoTDeviceDetailComponent } from "./iot-device-detail/iot-device-detail.component";
-import { IotDeviceEditComponent } from "./iot-device-edit/iot-device-edit.component";
-import { SigfoxDeviceEditComponent } from "./iot-device-edit/sigfox-device-edit/sigfox-device-edit.component";
-import { IotDevicesTableComponent } from "./iot-devices-table/iot-devices-table.component";
-import { DownlinkDialogComponent } from "./iot-device-detail/downlink/downlink-dialog/downlink-dialog.component";
-import { SharedModule } from "@shared/shared.module";
-import { PipesModule } from "@shared/pipes/pipes.module";
-import { DeviceModelComponent } from "./iot-device-detail/device-model/device-model.component";
-import { MonacoEditorModule } from "ngx-monaco-editor-v2";
-import { DataPackageComponent } from "./iot-device-detail/data-package/data-package.component";
-import { DataPackagesTimestampComponent } from "./iot-device-detail/data-packages-timestamp/data-packages-timestamp.component";
-import { GraphModule } from "@app/graph/graph.module";
-import { IotDevicesTabComponent } from "./iot-devices-tab/iot-devices-tab.component";
-import { IotDeviceHistoryTabComponent } from "./iot-device-detail/iot-device-history-tab/iot-device-history-tab.component";
 import { IotDeviceDetailsTabComponent } from "./iot-device-detail/iot-device-details-tab/iot-device-details-tab.component";
-import { IotDeviceDataPacketsTabComponent } from "./iot-device-detail/iot-device-data-packets-tab/iot-device-data-packets-tab.component";
 import { IotDeviceDownlinkTabComponent } from "./iot-device-detail/iot-device-downlink-tab/iot-device-downlink-tab.component";
-import { MqttDeviceEditComponent } from "./iot-device-edit/mqtt-device-edit/mqtt-device-edit.component";
-import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
+import { IotDeviceHistoryTabComponent } from "./iot-device-detail/iot-device-history-tab/iot-device-history-tab.component";
+import { IotDeviceEditComponent } from "./iot-device-edit/iot-device-edit.component";
 import { MqttAuthenticationSelectComponent } from "./iot-device-edit/mqtt-device-edit/mqtt-authentication-select/mqtt-authentication-select.component";
-import { ClipboardModule } from "@angular/cdk/clipboard";
+import { MqttDeviceEditComponent } from "./iot-device-edit/mqtt-device-edit/mqtt-device-edit.component";
+import { SigfoxDeviceEditComponent } from "./iot-device-edit/sigfox-device-edit/sigfox-device-edit.component";
 import { ExportCsvDialogComponent } from "./iot-devices-tab/export-csv-dialog/export-csv-dialog.component";
-import { IotDeviceDetailsMqttInternalBrokerComponent } from "@applications/iot-devices/iot-device-detail/iot-device-details-mqtt-internal-broker/iot-device-details-mqtt-internal-broker.component";
-import { IotDeviceDetailsMqttExternalBrokerComponent } from "@applications/iot-devices/iot-device-detail/iot-device-details-mqtt-external-broker/iot-device-details-mqtt-external-broker.component";
-import { DownlinkTablesComponent } from "./iot-device-detail/downlink/downlink-tables/downlink-tables.component";
-import { IoTDeviceChangeApplicationDialogComponent } from "./iot-device-change-application-dialog/iot-device-change-application-dialog.component";
+import { IotDevicesTabComponent } from "./iot-devices-tab/iot-devices-tab.component";
+import { IotDevicesTableComponent } from "./iot-devices-table/iot-devices-table.component";
 
 @NgModule({
   declarations: [
@@ -77,6 +78,7 @@ import { IoTDeviceChangeApplicationDialogComponent } from "./iot-device-change-a
     GraphModule,
     FontAwesomeModule,
     ClipboardModule,
+    TableSortIconComponent,
   ],
 })
 export class IotDevicesModule {}
diff --git a/src/app/gateway/gateway-table/gateway-table.component.html b/src/app/gateway/gateway-table/gateway-table.component.html
index de9fac45e..561beb6bb 100644
--- a/src/app/gateway/gateway-table/gateway-table.component.html
+++ b/src/app/gateway/gateway-table/gateway-table.component.html
@@ -11,7 +11,10 @@
   <table mat-table [dataSource]="data" matSort matSortActive="name" matSortDirection="asc" matSortDisableClear>
     <ng-container matColumnDef="name">
       <th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-150">
-        {{ "LORA-GATEWAY-TABLE.NAME" | translate }}
+        <div [ngClass]="this.sort.active === 'name' ? 'column-title-color' : 'column-title-color-inactive'">
+          {{ "LORA-GATEWAY-TABLE.NAME" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
       </th>
       <td mat-cell *matCellDef="let gateway">
         <a
@@ -26,7 +29,10 @@
 
     <ng-container matColumnDef="gatewayId">
       <th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-150">
-        {{ "LORA-GATEWAY-TABLE.GATEWAYID" | translate }}
+        <div [ngClass]="this.sort.active === 'gatewayId' ? 'column-title-color' : 'column-title-color-inactive'">
+          {{ "LORA-GATEWAY-TABLE.GATEWAYID" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
       </th>
       <td mat-cell *matCellDef="let gateway">
         {{ gateway.gatewayId }}
@@ -35,7 +41,10 @@
 
     <ng-container matColumnDef="organizationName">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>
-        {{ "LORA-GATEWAY-TABLE.ORGANIZATION" | translate }}
+        <div [ngClass]="this.sort.active === 'organizationName' ? 'column-title-color' : 'column-title-color-inactive'">
+          {{ "LORA-GATEWAY-TABLE.ORGANIZATION" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
       </th>
       <td mat-cell *matCellDef="let gateway">
         {{ gateway.organizationName }}
@@ -44,7 +53,12 @@
 
     <ng-container matColumnDef="rxPacketsReceived">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>
-        {{ "LORA-GATEWAY-TABLE.PACKETS-RECEIVED" | translate }}
+        <div
+          [ngClass]="this.sort.active === 'rxPacketsReceived' ? 'column-title-color' : 'column-title-color-inactive'"
+        >
+          {{ "LORA-GATEWAY-TABLE.PACKETS-RECEIVED" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
       </th>
       <td mat-cell *matCellDef="let gateway">
         {{ gateway.rxPacketsReceived }}
@@ -53,7 +67,10 @@
 
     <ng-container matColumnDef="txPacketsEmitted">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>
-        {{ "LORA-GATEWAY-TABLE.PACKETS-SENT" | translate }}
+        <div [ngClass]="this.sort.active === 'txPacketsEmitted' ? 'column-title-color' : 'column-title-color-inactive'">
+          {{ "LORA-GATEWAY-TABLE.PACKETS-SENT" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
       </th>
       <td mat-cell *matCellDef="let gateway">
         {{ gateway.txPacketsEmitted }}
@@ -61,7 +78,14 @@
     </ng-container>
 
     <ng-container matColumnDef="placement">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "LORA-GATEWAY-TABLE.PLACEMENT" | translate }}</th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>
+        <div [ngClass]="this.sort.active === 'placement' ? 'column-title-color' : 'column-title-color-inactive'">
+          '
+
+          {{ "LORA-GATEWAY-TABLE.PLACEMENT" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
+      </th>
       <td mat-cell *matCellDef="let gateway">
         {{ gateway.placement ? ("GATEWAY.PLACEMENT." + gateway.placement | translate) : "" }}
       </td>
@@ -69,7 +93,10 @@
 
     <ng-container matColumnDef="modelName">
       <th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-150">
-        {{ "LORA-GATEWAY-TABLE.MODEL-NAME" | translate }}
+        <div [ngClass]="this.sort.active === 'modelName' ? 'column-title-color' : 'column-title-color-inactive'">
+          {{ "LORA-GATEWAY-TABLE.MODEL-NAME" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
       </th>
       <td mat-cell *matCellDef="let gateway">
         {{ gateway.modelName }}
@@ -78,7 +105,10 @@
 
     <ng-container matColumnDef="antennaType">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>
-        {{ "LORA-GATEWAY-TABLE.ANTENNA-TYPE" | translate }}
+        <div [ngClass]="this.sort.active === 'antennaType' ? 'column-title-color' : 'column-title-color-inactive'">
+          {{ "LORA-GATEWAY-TABLE.ANTENNA-TYPE" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
       </th>
       <td mat-cell *matCellDef="let gateway">
         {{ gateway.antennaType }}
@@ -86,7 +116,12 @@
     </ng-container>
 
     <ng-container matColumnDef="status">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "LORA-GATEWAY-TABLE.STATUS" | translate }}</th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>
+        <div [ngClass]="this.sort.active === 'status' ? 'column-title-color' : 'column-title-color-inactive'">
+          {{ "LORA-GATEWAY-TABLE.STATUS" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
+      </th>
       <td mat-cell *matCellDef="let gateway">
         {{ gateway.status ? ("GATEWAY.STATUS." + gateway.status | translate) : "" }}
       </td>
@@ -94,7 +129,14 @@
 
     <ng-container matColumnDef="gatewayResponsibleName">
       <th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-150">
-        {{ "LORA-GATEWAY-TABLE.RESPONSIBLE-NAME" | translate }}
+        <div
+          [ngClass]="
+            this.sort.active === 'gatewayResponsibleName' ? 'column-title-color' : 'column-title-color-inactive'
+          "
+        >
+          {{ "LORA-GATEWAY-TABLE.RESPONSIBLE-NAME" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
       </th>
       <td mat-cell *matCellDef="let gateway">
         {{ gateway.gatewayResponsibleName }}
@@ -103,7 +145,14 @@
 
     <ng-container matColumnDef="gatewayResponsibleEmail">
       <th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-150">
-        {{ "LORA-GATEWAY-TABLE.RESPONSIBLE-EMAIL" | translate }}
+        <div
+          [ngClass]="
+            this.sort.active === 'gatewayResponsibleEmail' ? 'column-title-color' : 'column-title-color-inactive'
+          "
+        >
+          {{ "LORA-GATEWAY-TABLE.RESPONSIBLE-EMAIL" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
       </th>
       <td mat-cell *matCellDef="let gateway">
         {{ gateway.gatewayResponsibleEmail }}
@@ -112,7 +161,14 @@
 
     <ng-container matColumnDef="gatewayResponsiblePhoneNumber">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>
-        {{ "LORA-GATEWAY-TABLE.RESPONSIBLE-PHONE-NUMBER" | translate }}
+        <div
+          [ngClass]="
+            this.sort.active === 'gatewayResponsiblePhoneNumber' ? 'column-title-color' : 'column-title-color-inactive'
+          "
+        >
+          {{ "LORA-GATEWAY-TABLE.RESPONSIBLE-PHONE-NUMBER" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
       </th>
       <td mat-cell *matCellDef="let gateway">
         {{ gateway.gatewayResponsiblePhoneNumber }}
@@ -121,7 +177,14 @@
 
     <ng-container matColumnDef="operationalResponsibleName">
       <th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-150">
-        {{ "LORA-GATEWAY-TABLE.OPERATIONAL-NAME" | translate }}
+        <div
+          [ngClass]="
+            this.sort.active === 'operationalResponsibleName' ? 'column-title-color' : 'column-title-color-inactive'
+          "
+        >
+          {{ "LORA-GATEWAY-TABLE.OPERATIONAL-NAME" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
       </th>
       <td mat-cell *matCellDef="let gateway">
         {{ gateway.operationalResponsibleName }}
@@ -130,7 +193,14 @@
 
     <ng-container matColumnDef="operationalResponsibleEmail">
       <th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-150">
-        {{ "LORA-GATEWAY-TABLE.OPERATIONAL-EMAIL" | translate }}
+        <div
+          [ngClass]="
+            this.sort.active === 'operationalResponsibleEmail' ? 'column-title-color' : 'column-title-color-inactive'
+          "
+        >
+          {{ "LORA-GATEWAY-TABLE.OPERATIONAL-EMAIL" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
       </th>
       <td mat-cell *matCellDef="let gateway">
         {{ gateway.operationalResponsibleEmail }}
@@ -139,7 +209,10 @@
 
     <ng-container matColumnDef="tags">
       <th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-250">
-        {{ "LORA-GATEWAY-TABLE.TAGS" | translate }}
+        <div [ngClass]="this.sort.active === 'tags' ? 'column-title-color' : 'column-title-color-inactive'">
+          {{ "LORA-GATEWAY-TABLE.TAGS" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
       </th>
       <td mat-cell *matCellDef="let gateway">
         {{ gateway.tagsString }}
@@ -148,7 +221,10 @@
 
     <ng-container matColumnDef="location">
       <th mat-header-cell *matHeaderCellDef class="min-width-150">
-        {{ "LORA-GATEWAY-TABLE.LOCATION" | translate }}
+        <div [ngClass]="this.sort.active === 'location' ? 'column-title-color' : 'column-title-color-inactive'">
+          {{ "LORA-GATEWAY-TABLE.LOCATION" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
       </th>
       <td mat-cell *matCellDef="let gateway">
         {{ gateway.location.latitude | number : "2.1-6" }},
@@ -157,7 +233,12 @@
     </ng-container>
 
     <ng-container matColumnDef="createdAt">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "LORA-GATEWAY-TABLE.CREATED-AT" | translate }}</th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>
+        <div [ngClass]="this.sort.active === 'createdAt' ? 'column-title-color' : 'column-title-color-inactive'">
+          {{ "LORA-GATEWAY-TABLE.CREATED-AT" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
+      </th>
       <td mat-cell *matCellDef="let gateway">
         {{ gateway.createdAt | dateOnly }}
       </td>
@@ -165,7 +246,10 @@
 
     <ng-container matColumnDef="lastSeenAt">
       <th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-150">
-        {{ "LORA-GATEWAY-TABLE.LAST-SEEN-AT" | translate }}
+        <div [ngClass]="this.sort.active === 'lastSeenAt' ? 'column-title-color' : 'column-title-color-inactive'">
+          {{ "LORA-GATEWAY-TABLE.LAST-SEEN-AT" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
       </th>
       <td mat-cell *matCellDef="let gateway">
         {{ lastActive(gateway) }}
@@ -174,7 +258,10 @@
 
     <ng-container matColumnDef="onlineStatus">
       <th mat-header-cell *matHeaderCellDef>
-        {{ "LORA-GATEWAY-TABLE.STATUS" | translate }}
+        <div [ngClass]="this.sort.active === 'onlineStatus' ? 'column-title-color' : 'column-title-color-inactive'">
+          {{ "LORA-GATEWAY-TABLE.STATUS" | translate }}
+        </div>
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
       </th>
       <td mat-cell *matCellDef="let gateway">
         <ng-container *ngIf="gatewayStatus(gateway); then statusOk; else statusError"></ng-container>
diff --git a/src/app/gateway/gateway-table/gateway-table.component.scss b/src/app/gateway/gateway-table/gateway-table.component.scss
index b00a2928e..99d3b5377 100644
--- a/src/app/gateway/gateway-table/gateway-table.component.scss
+++ b/src/app/gateway/gateway-table/gateway-table.component.scss
@@ -1,10 +1,4 @@
-.fa-error {
-  color: red !important;
-}
-
-.fa-ok {
-  color: green !important;
-}
+@import "../../../assets/scss/setup/variables";
 
 .min-width-150 {
   min-width: 150px;
@@ -13,3 +7,16 @@
 .min-width-250 {
   min-width: 250px;
 }
+
+.column-title-color {
+  color: $color-link;
+  font-weight: bold;
+}
+
+.column-title-color-inactive {
+  color: $default-icon-color;
+}
+
+.mat-sort-header-arrow {
+  display: none !important;
+}
diff --git a/src/app/gateway/gateway-table/gateway-table.component.ts b/src/app/gateway/gateway-table/gateway-table.component.ts
index c5b8ceebd..c34ef8d88 100644
--- a/src/app/gateway/gateway-table/gateway-table.component.ts
+++ b/src/app/gateway/gateway-table/gateway-table.component.ts
@@ -1,22 +1,31 @@
-import { ChirpstackGatewayService } from "src/app/shared/services/chirpstack-gateway.service";
-import { TranslateService } from "@ngx-translate/core";
-import { Gateway, GatewayResponseMany } from "../gateway.model";
-import { faCheckCircle, faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
-import moment from "moment";
-import { AfterViewInit, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild } from "@angular/core";
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  ViewEncapsulation,
+} from "@angular/core";
+import { MatDialog } from "@angular/material/dialog";
 import { MatPaginator } from "@angular/material/paginator";
-import { merge, Observable, Subject, Subscription } from "rxjs";
-import { MeService } from "@shared/services/me.service";
-import { DeleteDialogService } from "@shared/components/delete-dialog/delete-dialog.service";
-import { environment } from "@environments/environment";
 import { MatSort } from "@angular/material/sort";
-import { OrganizationAccessScope } from "@shared/enums/access-scopes";
+import { environment } from "@environments/environment";
+import { faCheckCircle, faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
+import { TranslateService } from "@ngx-translate/core";
+import { DeleteDialogService } from "@shared/components/delete-dialog/delete-dialog.service";
 import { DefaultPageSizeOptions } from "@shared/constants/page.constants";
+import { OrganizationAccessScope } from "@shared/enums/access-scopes";
+import { GatewayDialogModel } from "@shared/models/dialog.model";
+import { MeService } from "@shared/services/me.service";
 import { TableColumn } from "@shared/types/table.type";
+import moment from "moment";
+import { merge, Observable, Subject, Subscription } from "rxjs";
 import { catchError, map, startWith, switchMap } from "rxjs/operators";
-import { MatDialog } from "@angular/material/dialog";
-import { GatewayDialogModel } from "@shared/models/dialog.model";
+import { ChirpstackGatewayService } from "src/app/shared/services/chirpstack-gateway.service";
 import { GatewayChangeOrganizationDialogComponent } from "../gateway-change-organization-dialog/gateway-change-organization-dialog.component";
+import { Gateway, GatewayResponseMany } from "../gateway.model";
 
 const columnDefinitions: TableColumn[] = [
   {
@@ -115,6 +124,7 @@ const columnDefinitions: TableColumn[] = [
   selector: "app-gateway-table",
   templateUrl: "./gateway-table.component.html",
   styleUrls: ["./gateway-table.component.scss"],
+  encapsulation: ViewEncapsulation.None,
 })
 export class GatewayTableComponent implements AfterViewInit, OnDestroy, OnInit {
   @Input() organisationChangeSubject: Subject<any>;
@@ -265,6 +275,9 @@ export class GatewayTableComponent implements AfterViewInit, OnDestroy, OnInit {
       } as GatewayDialogModel,
     });
   }
+  getSortDirection(id: string) {
+    return columnDefinitions.find(c => c.id === id).sort;
+  }
 
   protected readonly columnDefinitions = columnDefinitions;
 }
diff --git a/src/app/gateway/gateway.module.ts b/src/app/gateway/gateway.module.ts
index 337b176ad..c5860b78a 100644
--- a/src/app/gateway/gateway.module.ts
+++ b/src/app/gateway/gateway.module.ts
@@ -1,24 +1,25 @@
-import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { RouterModule, Routes } from "@angular/router";
-import { TranslateModule } from "@ngx-translate/core";
-import { GatewayTableComponent } from "./gateway-table/gateway-table.component";
-import { GatewaysComponent } from "./gateways/gateways.component";
-import { GatewayOverviewComponent } from "./gateway-overview/gateway-overview.component";
-import { GatewayEditComponent } from "./gateway-edit/gateway-edit.component";
+import { NgModule } from "@angular/core";
 import { FormsModule } from "@angular/forms";
-import { GatewayDetailComponent } from "./gateway-detail/gateway-detail.component";
+import { RouterModule, Routes } from "@angular/router";
+import { GraphModule } from "@app/graph/graph.module";
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
+import { TranslateModule } from "@ngx-translate/core";
 import { NGMaterialModule } from "@shared/Modules/materiale.module";
 import { FormModule } from "@shared/components/forms/form.module";
-import { SharedModule } from "@shared/shared.module";
+import { TableSortIconComponent } from "@shared/components/table-sort-icon/table-sort-icon.component";
 import { PipesModule } from "@shared/pipes/pipes.module";
-import { GatewayStatusComponent } from "./gateway-status/gateway-status.component";
-import { GraphModule } from "@app/graph/graph.module";
+import { SharedModule } from "@shared/shared.module";
+import { GatewayChangeOrganizationDialogComponent } from "./gateway-change-organization-dialog/gateway-change-organization-dialog.component";
+import { GatewayDetailComponent } from "./gateway-detail/gateway-detail.component";
+import { GatewayEditComponent } from "./gateway-edit/gateway-edit.component";
+import { GatewayOverviewComponent } from "./gateway-overview/gateway-overview.component";
 import { GatewayListComponent } from "./gateway-overview/gateway-tabs/gateway-list/gateway-list.component";
 import { GatewayMapComponent } from "./gateway-overview/gateway-tabs/gateway-map/gateway-map.component";
 import { GatewayStatusOverviewComponent } from "./gateway-overview/gateway-tabs/gateway-status-overview/gateway-status-overview.component";
-import { GatewayChangeOrganizationDialogComponent } from "./gateway-change-organization-dialog/gateway-change-organization-dialog.component";
+import { GatewayStatusComponent } from "./gateway-status/gateway-status.component";
+import { GatewayTableComponent } from "./gateway-table/gateway-table.component";
+import { GatewaysComponent } from "./gateways/gateways.component";
 
 const gatewayRoutes: Routes = [
   {
@@ -66,6 +67,7 @@ const gatewayRoutes: Routes = [
     SharedModule,
     PipesModule,
     GraphModule,
+    TableSortIconComponent,
   ],
   exports: [
     GatewayTableComponent,

From 781d789b4ee91b753d2d7bc9aecc6a7c988396d7 Mon Sep 17 00:00:00 2001
From: Frederik Christ Vestergaard <fcv@iterator-it.dk>
Date: Mon, 24 Mar 2025 08:14:06 +0100
Subject: [PATCH 2/2] Format and fix exception

---
 .../gateway-table.component.html              | 155 +++++++++---------
 .../gateway-table/gateway-table.component.ts  |  58 ++++---
 2 files changed, 104 insertions(+), 109 deletions(-)

diff --git a/src/app/gateway/gateway-table/gateway-table.component.html b/src/app/gateway/gateway-table/gateway-table.component.html
index 561beb6bb..b18b37b1f 100644
--- a/src/app/gateway/gateway-table/gateway-table.component.html
+++ b/src/app/gateway/gateway-table/gateway-table.component.html
@@ -5,22 +5,22 @@
 ></app-column-selector>
 
 <div class="mat-elevation-z8 overflow-auto">
-  <div class="loading-shade" *ngIf="isLoadingResults">
+  <div *ngIf="isLoadingResults" class="loading-shade">
     <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
   </div>
-  <table mat-table [dataSource]="data" matSort matSortActive="name" matSortDirection="asc" matSortDisableClear>
+  <table [dataSource]="data" mat-table matSort matSortActive="name" matSortDirection="asc" matSortDisableClear>
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-150">
+      <th *matHeaderCellDef class="min-width-150" mat-header-cell mat-sort-header>
         <div [ngClass]="this.sort.active === 'name' ? 'column-title-color' : 'column-title-color-inactive'">
           {{ "LORA-GATEWAY-TABLE.NAME" | translate }}
         </div>
-        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
       </th>
-      <td mat-cell *matCellDef="let gateway">
+      <td *matCellDef="let gateway" mat-cell>
         <a
           [routerLink]="'/gateways/gateway-detail/' + gateway.gatewayId"
-          routerLinkActive="active"
           class="application-link"
+          routerLinkActive="active"
         >
           {{ gateway.name }}
         </a>
@@ -28,107 +28,107 @@
     </ng-container>
 
     <ng-container matColumnDef="gatewayId">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-150">
+      <th *matHeaderCellDef class="min-width-150" mat-header-cell mat-sort-header>
         <div [ngClass]="this.sort.active === 'gatewayId' ? 'column-title-color' : 'column-title-color-inactive'">
           {{ "LORA-GATEWAY-TABLE.GATEWAYID" | translate }}
         </div>
-        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
       </th>
-      <td mat-cell *matCellDef="let gateway">
+      <td *matCellDef="let gateway" mat-cell>
         {{ gateway.gatewayId }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="organizationName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>
         <div [ngClass]="this.sort.active === 'organizationName' ? 'column-title-color' : 'column-title-color-inactive'">
           {{ "LORA-GATEWAY-TABLE.ORGANIZATION" | translate }}
         </div>
-        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
       </th>
-      <td mat-cell *matCellDef="let gateway">
+      <td *matCellDef="let gateway" mat-cell>
         {{ gateway.organizationName }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="rxPacketsReceived">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>
         <div
           [ngClass]="this.sort.active === 'rxPacketsReceived' ? 'column-title-color' : 'column-title-color-inactive'"
         >
           {{ "LORA-GATEWAY-TABLE.PACKETS-RECEIVED" | translate }}
         </div>
-        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
       </th>
-      <td mat-cell *matCellDef="let gateway">
+      <td *matCellDef="let gateway" mat-cell>
         {{ gateway.rxPacketsReceived }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="txPacketsEmitted">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>
         <div [ngClass]="this.sort.active === 'txPacketsEmitted' ? 'column-title-color' : 'column-title-color-inactive'">
           {{ "LORA-GATEWAY-TABLE.PACKETS-SENT" | translate }}
         </div>
-        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
       </th>
-      <td mat-cell *matCellDef="let gateway">
+      <td *matCellDef="let gateway" mat-cell>
         {{ gateway.txPacketsEmitted }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="placement">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>
         <div [ngClass]="this.sort.active === 'placement' ? 'column-title-color' : 'column-title-color-inactive'">
           '
 
           {{ "LORA-GATEWAY-TABLE.PLACEMENT" | translate }}
         </div>
-        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
       </th>
-      <td mat-cell *matCellDef="let gateway">
+      <td *matCellDef="let gateway" mat-cell>
         {{ gateway.placement ? ("GATEWAY.PLACEMENT." + gateway.placement | translate) : "" }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="modelName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-150">
+      <th *matHeaderCellDef class="min-width-150" mat-header-cell mat-sort-header>
         <div [ngClass]="this.sort.active === 'modelName' ? 'column-title-color' : 'column-title-color-inactive'">
           {{ "LORA-GATEWAY-TABLE.MODEL-NAME" | translate }}
         </div>
-        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
       </th>
-      <td mat-cell *matCellDef="let gateway">
+      <td *matCellDef="let gateway" mat-cell>
         {{ gateway.modelName }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="antennaType">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>
         <div [ngClass]="this.sort.active === 'antennaType' ? 'column-title-color' : 'column-title-color-inactive'">
           {{ "LORA-GATEWAY-TABLE.ANTENNA-TYPE" | translate }}
         </div>
-        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
       </th>
-      <td mat-cell *matCellDef="let gateway">
+      <td *matCellDef="let gateway" mat-cell>
         {{ gateway.antennaType }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="status">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>
         <div [ngClass]="this.sort.active === 'status' ? 'column-title-color' : 'column-title-color-inactive'">
           {{ "LORA-GATEWAY-TABLE.STATUS" | translate }}
         </div>
-        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
       </th>
-      <td mat-cell *matCellDef="let gateway">
+      <td *matCellDef="let gateway" mat-cell>
         {{ gateway.status ? ("GATEWAY.STATUS." + gateway.status | translate) : "" }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="gatewayResponsibleName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-150">
+      <th *matHeaderCellDef class="min-width-150" mat-header-cell mat-sort-header>
         <div
           [ngClass]="
             this.sort.active === 'gatewayResponsibleName' ? 'column-title-color' : 'column-title-color-inactive'
@@ -136,15 +136,15 @@
         >
           {{ "LORA-GATEWAY-TABLE.RESPONSIBLE-NAME" | translate }}
         </div>
-        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
       </th>
-      <td mat-cell *matCellDef="let gateway">
+      <td *matCellDef="let gateway" mat-cell>
         {{ gateway.gatewayResponsibleName }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="gatewayResponsibleEmail">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-150">
+      <th *matHeaderCellDef class="min-width-150" mat-header-cell mat-sort-header>
         <div
           [ngClass]="
             this.sort.active === 'gatewayResponsibleEmail' ? 'column-title-color' : 'column-title-color-inactive'
@@ -152,15 +152,15 @@
         >
           {{ "LORA-GATEWAY-TABLE.RESPONSIBLE-EMAIL" | translate }}
         </div>
-        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
       </th>
-      <td mat-cell *matCellDef="let gateway">
+      <td *matCellDef="let gateway" mat-cell>
         {{ gateway.gatewayResponsibleEmail }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="gatewayResponsiblePhoneNumber">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>
         <div
           [ngClass]="
             this.sort.active === 'gatewayResponsiblePhoneNumber' ? 'column-title-color' : 'column-title-color-inactive'
@@ -168,15 +168,15 @@
         >
           {{ "LORA-GATEWAY-TABLE.RESPONSIBLE-PHONE-NUMBER" | translate }}
         </div>
-        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
       </th>
-      <td mat-cell *matCellDef="let gateway">
+      <td *matCellDef="let gateway" mat-cell>
         {{ gateway.gatewayResponsiblePhoneNumber }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="operationalResponsibleName">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-150">
+      <th *matHeaderCellDef class="min-width-150" mat-header-cell mat-sort-header>
         <div
           [ngClass]="
             this.sort.active === 'operationalResponsibleName' ? 'column-title-color' : 'column-title-color-inactive'
@@ -184,15 +184,15 @@
         >
           {{ "LORA-GATEWAY-TABLE.OPERATIONAL-NAME" | translate }}
         </div>
-        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
       </th>
-      <td mat-cell *matCellDef="let gateway">
+      <td *matCellDef="let gateway" mat-cell>
         {{ gateway.operationalResponsibleName }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="operationalResponsibleEmail">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-150">
+      <th *matHeaderCellDef class="min-width-150" mat-header-cell mat-sort-header>
         <div
           [ngClass]="
             this.sort.active === 'operationalResponsibleEmail' ? 'column-title-color' : 'column-title-color-inactive'
@@ -200,70 +200,67 @@
         >
           {{ "LORA-GATEWAY-TABLE.OPERATIONAL-EMAIL" | translate }}
         </div>
-        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
       </th>
-      <td mat-cell *matCellDef="let gateway">
+      <td *matCellDef="let gateway" mat-cell>
         {{ gateway.operationalResponsibleEmail }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="tags">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-250">
+      <th *matHeaderCellDef class="min-width-250" mat-header-cell mat-sort-header>
         <div [ngClass]="this.sort.active === 'tags' ? 'column-title-color' : 'column-title-color-inactive'">
           {{ "LORA-GATEWAY-TABLE.TAGS" | translate }}
         </div>
-        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
       </th>
-      <td mat-cell *matCellDef="let gateway">
+      <td *matCellDef="let gateway" mat-cell>
         {{ gateway.tagsString }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="location">
-      <th mat-header-cell *matHeaderCellDef class="min-width-150">
+      <th *matHeaderCellDef class="min-width-150" mat-header-cell>
         <div [ngClass]="this.sort.active === 'location' ? 'column-title-color' : 'column-title-color-inactive'">
           {{ "LORA-GATEWAY-TABLE.LOCATION" | translate }}
         </div>
-        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
       </th>
-      <td mat-cell *matCellDef="let gateway">
+      <td *matCellDef="let gateway" mat-cell>
         {{ gateway.location.latitude | number : "2.1-6" }},
         {{ gateway.location.longitude | number : "2.1-6" }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="createdAt">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>
+      <th *matHeaderCellDef mat-header-cell mat-sort-header>
         <div [ngClass]="this.sort.active === 'createdAt' ? 'column-title-color' : 'column-title-color-inactive'">
           {{ "LORA-GATEWAY-TABLE.CREATED-AT" | translate }}
         </div>
-        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
       </th>
-      <td mat-cell *matCellDef="let gateway">
+      <td *matCellDef="let gateway" mat-cell>
         {{ gateway.createdAt | dateOnly }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="lastSeenAt">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-150">
+      <th *matHeaderCellDef class="min-width-150" mat-header-cell mat-sort-header>
         <div [ngClass]="this.sort.active === 'lastSeenAt' ? 'column-title-color' : 'column-title-color-inactive'">
           {{ "LORA-GATEWAY-TABLE.LAST-SEEN-AT" | translate }}
         </div>
-        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
+        <app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
       </th>
-      <td mat-cell *matCellDef="let gateway">
+      <td *matCellDef="let gateway" mat-cell>
         {{ lastActive(gateway) }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="onlineStatus">
-      <th mat-header-cell *matHeaderCellDef>
-        <div [ngClass]="this.sort.active === 'onlineStatus' ? 'column-title-color' : 'column-title-color-inactive'">
-          {{ "LORA-GATEWAY-TABLE.STATUS" | translate }}
-        </div>
-        <app-table-sort-icon [sortDirection]="getSortDirection('active')" />
+      <th *matHeaderCellDef mat-header-cell>
+        {{ "LORA-GATEWAY-TABLE.STATUS" | translate }}
       </th>
-      <td mat-cell *matCellDef="let gateway">
+      <td *matCellDef="let gateway" mat-cell>
         <ng-container *ngIf="gatewayStatus(gateway); then statusOk; else statusError"></ng-container>
         <ng-template #statusOk>
           <fa-icon [icon]="faCheckCircle" class="fa-ok"></fa-icon>
@@ -275,28 +272,28 @@
     </ng-container>
 
     <ng-container matColumnDef="menu">
-      <th mat-header-cell *matHeaderCellDef></th>
-      <td mat-cell *matCellDef="let gateway" class="overflowVisible">
-        <div class="dropdown" *ngIf="gateway.canEdit">
+      <th *matHeaderCellDef mat-header-cell></th>
+      <td *matCellDef="let gateway" class="overflowVisible" mat-cell>
+        <div *ngIf="gateway.canEdit" class="dropdown">
           <a
-            href="#"
-            role="button"
-            id="tableRowDropdown-{{ gateway.id }}"
+            [attr.aria-label]="'LORA-GATEWAY-TABLE-ROW.SHOW-OPTIONS' | translate"
+            aria-expanded="false"
             class="applicationRow__edit dropdown-toggle"
             data-toggle="dropdown"
-            aria-expanded="false"
-            [attr.aria-label]="'LORA-GATEWAY-TABLE-ROW.SHOW-OPTIONS' | translate"
+            href="#"
+            id="tableRowDropdown-{{ gateway.id }}"
+            role="button"
           ></a>
-          <ul class="dropdown-menu dropdown-menu--table" attr.aria-labelledby="tableRowDropdown-{{ gateway.id }}">
+          <ul attr.aria-labelledby="tableRowDropdown-{{ gateway.id }}" class="dropdown-menu dropdown-menu--table">
             <li class="dropdown-item">
               <a [routerLink]="['../gateway-edit', gateway.gatewayId]" routerLinkActive="active">{{
-                "GEN.EDIT" | translate
-              }}</a>
+                  "GEN.EDIT" | translate
+                }}</a>
             </li>
             <li class="dropdown-item">
               <a (click)="onOpenChangeOrganizationDialog(gateway.id)" routerLinkActive="active">{{
-                "GATEWAY.CHANGE-ORGANIZATION.TITLE" | translate
-              }}</a>
+                  "GATEWAY.CHANGE-ORGANIZATION.TITLE" | translate
+                }}</a>
             </li>
             <li class="dropdown-item">
               <a (click)="clickDelete(gateway)" [routerLink]="[]">{{ "GEN.DELETE" | translate }}</a>
@@ -306,13 +303,13 @@
       </td>
     </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+    <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
   </table>
   <mat-paginator
+    [length]="resultsLength"
     [pageSizeOptions]="pageSizeOptions"
     [pageSize]="pageSize"
-    [length]="resultsLength"
     showFirstLastButtons
   >
   </mat-paginator>
diff --git a/src/app/gateway/gateway-table/gateway-table.component.ts b/src/app/gateway/gateway-table/gateway-table.component.ts
index c34ef8d88..17a82cd07 100644
--- a/src/app/gateway/gateway-table/gateway-table.component.ts
+++ b/src/app/gateway/gateway-table/gateway-table.component.ts
@@ -139,12 +139,11 @@ export class GatewayTableComponent implements AfterViewInit, OnDestroy, OnInit {
   refetchIntervalId: NodeJS.Timeout;
   resultsLength = 0;
   isLoadingResults = true;
-  private fetchSubscription: Subscription;
-
   gatewayTableSavedColumns = "gatewayTableSavedColumns";
-
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
+  protected readonly columnDefinitions = columnDefinitions;
+  private fetchSubscription: Subscription;
 
   constructor(
     private chirpstackGatewayService: ChirpstackGatewayService,
@@ -205,35 +204,10 @@ export class GatewayTableComponent implements AfterViewInit, OnDestroy, OnInit {
     this.fetchSubscription.unsubscribe();
   }
 
-  private refresh() {
-    this.getGateways(this.sort.active, this.sort.direction).subscribe(data => {
-      data.resultList.forEach(gw => {
-        gw.canEdit = this.canEdit(gw.organizationId);
-        gw.tagsString = JSON.stringify(gw.tags ?? {});
-      });
-      this.data = data.resultList;
-      this.resultsLength = data.totalCount;
-      this.isLoadingResults = false;
-    });
-  }
-
   canEdit(internalOrganizationId: number): boolean {
     return this.meService.hasAccessToTargetOrganization(OrganizationAccessScope.GatewayWrite, internalOrganizationId);
   }
 
-  private getGateways(orderByColumn: string, orderByDirection: string): Observable<GatewayResponseMany> {
-    const params = {
-      limit: this.paginator.pageSize,
-      offset: this.paginator.pageIndex * this.paginator.pageSize,
-      orderOn: orderByColumn,
-      sort: orderByDirection,
-    };
-    if (this.organizationId > 0) {
-      params["organizationId"] = this.organizationId;
-    }
-    return this.chirpstackGatewayService.getMultiple(params);
-  }
-
   gatewayStatus(gateway: Gateway): boolean {
     return this.chirpstackGatewayService.isGatewayActive(gateway);
   }
@@ -275,9 +249,33 @@ export class GatewayTableComponent implements AfterViewInit, OnDestroy, OnInit {
       } as GatewayDialogModel,
     });
   }
+
   getSortDirection(id: string) {
-    return columnDefinitions.find(c => c.id === id).sort;
+    return columnDefinitions.find(c => c.id === id)?.sort ?? "asc";
   }
 
-  protected readonly columnDefinitions = columnDefinitions;
+  private refresh() {
+    this.getGateways(this.sort.active, this.sort.direction).subscribe(data => {
+      data.resultList.forEach(gw => {
+        gw.canEdit = this.canEdit(gw.organizationId);
+        gw.tagsString = JSON.stringify(gw.tags ?? {});
+      });
+      this.data = data.resultList;
+      this.resultsLength = data.totalCount;
+      this.isLoadingResults = false;
+    });
+  }
+
+  private getGateways(orderByColumn: string, orderByDirection: string): Observable<GatewayResponseMany> {
+    const params = {
+      limit: this.paginator.pageSize,
+      offset: this.paginator.pageIndex * this.paginator.pageSize,
+      orderOn: orderByColumn,
+      sort: orderByDirection,
+    };
+    if (this.organizationId > 0) {
+      params["organizationId"] = this.organizationId;
+    }
+    return this.chirpstackGatewayService.getMultiple(params);
+  }
 }