diff --git a/CHANGELOG.md b/CHANGELOG.md
index 992af4047..19baa4cc3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## Unreleased
+### Added
+
+- Added a simplified mode to the holdings table component
+
### Changed
- Made the details of holdings excluded from analysis accessible via the activities table
diff --git a/libs/ui/src/lib/holdings-table/holdings-table.component.html b/libs/ui/src/lib/holdings-table/holdings-table.component.html
index e66dac725..2ed948478 100644
--- a/libs/ui/src/lib/holdings-table/holdings-table.component.html
+++ b/libs/ui/src/lib/holdings-table/holdings-table.component.html
@@ -3,9 +3,9 @@
class="gf-table w-100"
mat-table
matSort
- matSortActive="allocationInPercentage"
- matSortDirection="desc"
[dataSource]="dataSource"
+ [matSortActive]="sortActive()"
+ [matSortDirection]="sortDirection()"
>
|
@@ -34,9 +34,11 @@
({{ element.assetProfile.assetSubClassLabel }})
}
-
- {{ element.assetProfile.symbol }}
-
+ @if (mode() === 'default') {
+
+ {{ element.assetProfile.symbol }}
+
+ }
@@ -181,7 +183,11 @@
-
+
();
public readonly locale = input(getLocale());
+ public readonly mode = input<'default' | 'simple'>('default');
public readonly pageSize = model(Number.MAX_SAFE_INTEGER);
public readonly holdingClicked = output();
@@ -62,6 +63,10 @@ export class GfHoldingsTableComponent {
protected readonly dataSource = new MatTableDataSource([]);
protected readonly displayedColumns = computed(() => {
+ if (this.mode() === 'simple') {
+ return ['icon', 'nameWithSymbol', 'performanceInPercentage'];
+ }
+
const columns = ['icon', 'nameWithSymbol', 'dateOfFirstActivity'];
if (this.hasPermissionToShowQuantities()) {
@@ -82,7 +87,19 @@ export class GfHoldingsTableComponent {
return columns;
});
- protected readonly isLoading = computed(() => !this.holdings());
+ protected readonly isLoading = computed(() => {
+ return !this.holdings();
+ });
+
+ protected readonly sortActive = computed(() => {
+ return this.mode() === 'default'
+ ? 'allocationInPercentage'
+ : 'assetProfile.name';
+ });
+
+ protected readonly sortDirection = computed(() => {
+ return this.mode() === 'default' ? 'desc' : 'asc';
+ });
public constructor() {
this.dataSource.sortingDataAccessor = getLowercase;