fix(lib): prevent table data source to be created every time

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(() => {
+  protected readonly dataSource = new MatTableDataSource<Account>([]);
-    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'];
@@ -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) {