From a39d0e35cbf84a0657053f020a1144550a6cc228 Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Tue, 10 Feb 2026 11:48:57 +0700
Subject: [PATCH] feat(lib): change dataSource to a computed field

---
 .../accounts-table/accounts-table.component.html   |  4 ++--
 .../lib/accounts-table/accounts-table.component.ts | 14 ++++++++------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/libs/ui/src/lib/accounts-table/accounts-table.component.html b/libs/ui/src/lib/accounts-table/accounts-table.component.html
index 70e8c41bf..63a7a89b6 100644
--- a/libs/ui/src/lib/accounts-table/accounts-table.component.html
+++ b/libs/ui/src/lib/accounts-table/accounts-table.component.html
@@ -3,7 +3,7 @@
     <button
       class="align-items-center d-flex"
       mat-stroked-button
-      [disabled]="dataSource?.data.length < 2"
+      [disabled]="dataSource()?.data.length < 2"
       (click)="onTransferBalance()"
     >
       <ion-icon class="mr-2" name="arrow-redo-outline" />
@@ -19,7 +19,7 @@
     matSort
     matSortActive="name"
     matSortDirection="asc"
-    [dataSource]="dataSource"
+    [dataSource]="dataSource()"
   >
     <ng-container matColumnDef="status">
       <th
diff --git a/libs/ui/src/lib/accounts-table/accounts-table.component.ts b/libs/ui/src/lib/accounts-table/accounts-table.component.ts
index 0abf08999..2c0008376 100644
--- a/libs/ui/src/lib/accounts-table/accounts-table.component.ts
+++ b/libs/ui/src/lib/accounts-table/accounts-table.component.ts
@@ -70,8 +70,6 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
   @Output() accountToUpdate = new EventEmitter<Account>();
   @Output() transferBalance = new EventEmitter<void>();
 
-  public dataSource = new MatTableDataSource<Account>();
-
   public readonly accounts = input.required<Account[] | undefined>();
   public readonly showActions = input<boolean>();
   public readonly showActivitiesCount = input(true);
@@ -81,6 +79,13 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
   public readonly showValueInBaseCurrency = input(false);
   public readonly sort = viewChild.required(MatSort);
 
+  protected readonly dataSource = computed(() => {
+    const dataSource = new MatTableDataSource<Account>(this.accounts());
+    dataSource.sortingDataAccessor = getLowercase;
+    dataSource.sort = this.sort();
+    return dataSource;
+  });
+
   protected readonly displayedColumns = computed(() => {
     const columns = ['status', 'account', 'platform'];
 
@@ -134,10 +139,7 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
   }
 
   public ngOnChanges() {
-    this.dataSource = new MatTableDataSource(this.accounts());
-    this.dataSource.sortingDataAccessor = getLowercase;
-
-    this.dataSource.sort = this.sort();
+    return;
   }
 
   public onDeleteAccount(aId: string) {