feat(lib): change dataSource to a computed field

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

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());
+    return;
-    this.dataSource.sortingDataAccessor = getLowercase;
-
-    this.dataSource.sort = this.sort();
   }
 
   public onDeleteAccount(aId: string) {