From 261e66e57a1ab5d60a3bbdb6de61d8fa6b034573 Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Wed, 11 Feb 2026 11:19:41 +0700
Subject: [PATCH] feat(lib): make displayedColumns a computed signal

---
 .../holdings-table.component.html             |  4 +--
 .../holdings-table.component.ts               | 28 +++++++++++--------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/libs/ui/src/lib/holdings-table/holdings-table.component.html b/libs/ui/src/lib/holdings-table/holdings-table.component.html
index 8ca18e09a..f81ae738d 100644
--- a/libs/ui/src/lib/holdings-table/holdings-table.component.html
+++ b/libs/ui/src/lib/holdings-table/holdings-table.component.html
@@ -177,9 +177,9 @@
       </td>
     </ng-container>
 
-    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+    <tr *matHeaderRowDef="displayedColumns()" mat-header-row></tr>
     <tr
-      *matRowDef="let row; columns: displayedColumns"
+      *matRowDef="let row; columns: displayedColumns()"
       mat-row
       [ngClass]="{
         'cursor-pointer':
diff --git a/libs/ui/src/lib/holdings-table/holdings-table.component.ts b/libs/ui/src/lib/holdings-table/holdings-table.component.ts
index 4c0a2dfdf..01b660b9e 100644
--- a/libs/ui/src/lib/holdings-table/holdings-table.component.ts
+++ b/libs/ui/src/lib/holdings-table/holdings-table.component.ts
@@ -56,7 +56,6 @@ export class GfHoldingsTableComponent implements OnChanges, OnDestroy {
 
   @Output() holdingClicked = new EventEmitter<AssetProfileIdentifier>();
 
-  public displayedColumns: string[] = [];
   public ignoreAssetSubClasses = [AssetSubClass.CASH];
   public routeQueryParams: Subscription;
 
@@ -75,28 +74,33 @@ export class GfHoldingsTableComponent implements OnChanges, OnDestroy {
     return dataSource;
   });
 
-  protected readonly isLoading = computed(() => !this.holdings());
-
-  private readonly unsubscribeSubject = new Subject<void>();
-
-  public ngOnChanges() {
-    this.displayedColumns = ['icon', 'nameWithSymbol', 'dateOfFirstActivity'];
+  protected readonly displayedColumns = computed(() => {
+    const columns = ['icon', 'nameWithSymbol', 'dateOfFirstActivity'];
 
     if (this.hasPermissionToShowQuantities()) {
-      this.displayedColumns.push('quantity');
+      columns.push('quantity');
     }
 
     if (this.hasPermissionToShowValues()) {
-      this.displayedColumns.push('valueInBaseCurrency');
+      columns.push('valueInBaseCurrency');
     }
 
-    this.displayedColumns.push('allocationInPercentage');
+    columns.push('allocationInPercentage');
 
     if (this.hasPermissionToShowValues()) {
-      this.displayedColumns.push('performance');
+      columns.push('performance');
     }
 
-    this.displayedColumns.push('performanceInPercentage');
+    columns.push('performanceInPercentage');
+    return columns;
+  });
+
+  protected readonly isLoading = computed(() => !this.holdings());
+
+  private readonly unsubscribeSubject = new Subject<void>();
+
+  public ngOnChanges() {
+    return;
   }
 
   public onOpenHoldingDialog({ dataSource, symbol }: AssetProfileIdentifier) {