From d135052a47579ba61a1e2474c8eea02251d77e8f Mon Sep 17 00:00:00 2001
From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com>
Date: Wed, 11 Feb 2026 08:53:19 +0000
Subject: [PATCH] fix(lib): prevent table data source to be created every time

---
 .../accounts-table.component.ts               | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

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 834e33fb3..26a721a2b 100644
--- a/libs/ui/src/lib/accounts-table/accounts-table.component.ts
+++ b/libs/ui/src/lib/accounts-table/accounts-table.component.ts
@@ -13,6 +13,7 @@ import {
   OnDestroy,
   Output,
   computed,
+  effect,
   inject,
   input,
   viewChild
@@ -78,12 +79,7 @@ export class GfAccountsTableComponent implements 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 dataSource = new MatTableDataSource<Account>([]);
 
   protected readonly displayedColumns = computed(() => {
     const columns = ['status', 'account', 'platform'];
@@ -135,6 +131,18 @@ export class GfAccountsTableComponent implements OnDestroy {
       trashOutline,
       walletOutline
     });
+
+    this.dataSource.sortingDataAccessor = getLowercase;
+
+    // Reactive data update
+    effect(() => {
+      this.dataSource.data = this.accounts();
+    });
+
+    // Reactive view connection
+    effect(() => {
+      this.dataSource.sort = this.sort();
+    });
   }
 
   public onDeleteAccount(aId: string) {