feat(lib): add column sorting

libs/ui/src/lib/benchmark/benchmark.component.html

@@ -1,7 +1,16 @@
 <div class="overflow-x-auto">
-  <table class="gf-table w-100" mat-table [dataSource]="benchmarks">
+  <table
+    class="gf-table w-100"
+    mat-table
+    matSort
+    [dataSource]="dataSource"
+    [matSortActive]="sortColumn"
+    [matSortDirection]="sortDirection"
+  >
     <ng-container matColumnDef="name">
-      <th *matHeaderCellDef class="px-2" i18n mat-header-cell>Name</th>
+      <th *matHeaderCellDef class="px-2" i18n mat-header-cell mat-sort-header>
+        Name
+      </th>
       <td *matCellDef="let element" class="px-2 text-nowrap" mat-cell>
         {{ element?.name }}
       </td>
@@ -91,7 +100,12 @@
     </ng-container>
 
     <ng-container matColumnDef="change">
-      <th *matHeaderCellDef class="px-2 text-right" mat-header-cell>
+      <th
+        *matHeaderCellDef
+        class="px-2 text-right"
+        mat-header-cell
+        mat-sort-header
+      >
         <span class="d-none d-sm-block text-nowrap" i18n
           >Change from All Time High</span
         >

libs/ui/src/lib/benchmark/benchmark.component.ts

@@ -12,6 +12,7 @@ import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { CommonModule } from '@angular/common';
 import {
+  AfterViewInit,
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
@@ -19,14 +20,16 @@ import {
   Input,
   OnChanges,
   OnDestroy,
-  Output
+  Output,
+  ViewChild
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { MatMenuModule } from '@angular/material/menu';
-import { MatTableModule } from '@angular/material/table';
+import { MatSort, MatSortModule, SortDirection } from '@angular/material/sort';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
-import { isNumber } from 'lodash';
+import { get, isNumber } from 'lodash';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { Subject, takeUntil } from 'rxjs';
 
@@ -41,6 +44,7 @@ import { BenchmarkDetailDialogParams } from './benchmark-detail-dialog/interface
     GfValueComponent,
     MatButtonModule,
     MatMenuModule,
+    MatSortModule,
     MatTableModule,
     NgxSkeletonLoaderModule,
     RouterModule
@@ -50,7 +54,9 @@ import { BenchmarkDetailDialogParams } from './benchmark-detail-dialog/interface
   styleUrls: ['./benchmark.component.scss'],
   templateUrl: './benchmark.component.html'
 })
-export class GfBenchmarkComponent implements OnChanges, OnDestroy {
+export class GfBenchmarkComponent
+  implements AfterViewInit, OnChanges, OnDestroy
+{
   @Input() benchmarks: Benchmark[];
   @Input() deviceType: string;
   @Input() hasPermissionToDeleteItem: boolean;
@@ -59,6 +65,9 @@ export class GfBenchmarkComponent implements OnChanges, OnDestroy {
 
   @Output() itemDeleted = new EventEmitter<AssetProfileIdentifier>();
 
+  @ViewChild(MatSort) sort: MatSort;
+
+  public dataSource = new MatTableDataSource<Benchmark>([]);
   public displayedColumns = [
     'name',
     'date',
@@ -69,6 +78,8 @@ export class GfBenchmarkComponent implements OnChanges, OnDestroy {
   public isLoading = true;
   public isNumber = isNumber;
   public resolveMarketCondition = resolveMarketCondition;
+  public sortColumn = 'name';
+  public sortDirection: SortDirection = 'asc';
   public translate = translate;
 
   private unsubscribeSubject = new Subject<void>();
@@ -95,8 +106,22 @@ export class GfBenchmarkComponent implements OnChanges, OnDestroy {
       });
   }
 
+  ngAfterViewInit() {
+    this.dataSource.sort = this.sort;
+
+    this.dataSource.sortingDataAccessor = (item, property) => {
+      switch (property) {
+        case 'change':
+          return item.performances?.allTimeHigh?.performancePercent;
+        default:
+          return get(item, property);
+      }
+    };
+  }
+
   public ngOnChanges() {
     if (this.benchmarks) {
+      this.dataSource.data = this.benchmarks;
       this.isLoading = false;
     }