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 56ac5c379..35850044e 100644
--- a/libs/ui/src/lib/accounts-table/accounts-table.component.html
+++ b/libs/ui/src/lib/accounts-table/accounts-table.component.html
@@ -336,9 +336,9 @@
|
-
+
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 fdc6ae6be..d4721b825 100644
--- a/libs/ui/src/lib/accounts-table/accounts-table.component.ts
+++ b/libs/ui/src/lib/accounts-table/accounts-table.component.ts
@@ -14,6 +14,7 @@ import {
OnDestroy,
Output,
ViewChild,
+ computed,
inject,
input
} from '@angular/core';
@@ -73,7 +74,6 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
@ViewChild(MatSort) sort: MatSort;
public dataSource = new MatTableDataSource();
- public displayedColumns = [];
public isLoading = true;
public routeQueryParams: Subscription;
@@ -84,53 +84,57 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
public readonly showValue = input(true);
public readonly showValueInBaseCurrency = input(false);
- private readonly notificationService = inject(NotificationService);
- private readonly router = inject(Router);
- private readonly unsubscribeSubject = new Subject();
-
- public constructor() {
- addIcons({
- arrowRedoOutline,
- createOutline,
- documentTextOutline,
- ellipsisHorizontal,
- eyeOffOutline,
- trashOutline,
- walletOutline
- });
- }
-
- public ngOnChanges() {
- this.displayedColumns = ['status', 'account', 'platform'];
+ protected readonly displayedColumns = computed(() => {
+ const columns = ['status', 'account', 'platform'];
if (this.showActivitiesCount()) {
- this.displayedColumns.push('activitiesCount');
+ columns.push('activitiesCount');
}
if (this.showBalance()) {
- this.displayedColumns.push('balance');
+ columns.push('balance');
}
if (this.showValue()) {
- this.displayedColumns.push('value');
+ columns.push('value');
}
- this.displayedColumns.push('currency');
+ columns.push('currency');
if (this.showValueInBaseCurrency()) {
- this.displayedColumns.push('valueInBaseCurrency');
+ columns.push('valueInBaseCurrency');
}
if (this.showAllocationInPercentage()) {
- this.displayedColumns.push('allocation');
+ columns.push('allocation');
}
- this.displayedColumns.push('comment');
+ columns.push('comment');
if (this.showActions()) {
- this.displayedColumns.push('actions');
+ columns.push('actions');
}
+ return columns;
+ });
+
+ private readonly notificationService = inject(NotificationService);
+ private readonly router = inject(Router);
+ private readonly unsubscribeSubject = new Subject();
+
+ public constructor() {
+ addIcons({
+ arrowRedoOutline,
+ createOutline,
+ documentTextOutline,
+ ellipsisHorizontal,
+ eyeOffOutline,
+ trashOutline,
+ walletOutline
+ });
+ }
+
+ public ngOnChanges() {
this.isLoading = true;
this.dataSource = new MatTableDataSource(this.accounts);