Merge 829b75ce56 into 8920b60a72

libs/ui/src/lib/holdings-table/holdings-table.component.html

@@ -21,13 +21,17 @@
     <ng-container matColumnDef="nameWithSymbol">
       <th
         *matHeaderCellDef
-        class="px-1"
+        class="px-1 name-col"
         mat-header-cell
         mat-sort-header="symbol"
       >
         <ng-container i18n>Name</ng-container>
       </th>
-      <td *matCellDef="let element" class="line-height-1 px-1" mat-cell>
+      <td
+        *matCellDef="let element"
+        class="line-height-1 px-1 name-col"
+        mat-cell
+      >
         <div class="text-truncate">
           {{ element.name }}
           @if (element.name === element.symbol) {
@@ -63,8 +67,34 @@
         </div>
       </td>
     </ng-container>
+    <ng-container
+      matColumnDef="marketPrice"
+      [stickyEnd]="dataSource?.sort?.active === 'marketPrice'"
+    >
+      <th
+        *matHeaderCellDef
+        class="justify-content-end px-1"
+        mat-header-cell
+        mat-sort-header
+      >
+        <span class="d-none d-sm-block" i18n>Marketprice</span>
+        <span class="d-block d-sm-none" i18n>Price</span>
+      </th>
+      <td *matCellDef="let element" class="px-1" mat-cell>
+        <div class="d-flex justify-content-end">
+          <gf-value
+            [isCurrency]="true"
+            [locale]="locale"
+            [value]="isLoading ? undefined : element.marketPrice"
+          />
+        </div>
+      </td>
+    </ng-container>
 
-    <ng-container matColumnDef="valueInBaseCurrency">
+    <ng-container
+      matColumnDef="valueInBaseCurrency"
+      [stickyEnd]="dataSource?.sort?.active === 'valueInBaseCurrency'"
+    >
       <th
         *matHeaderCellDef
         class="d-none d-lg-table-cell justify-content-end px-1"
@@ -88,7 +118,10 @@
       </td>
     </ng-container>
 
-    <ng-container matColumnDef="allocationInPercentage">
+    <ng-container
+      matColumnDef="allocationInPercentage"
+      [stickyEnd]="dataSource?.sort?.active === 'allocationInPercentage'"
+    >
       <th
         *matHeaderCellDef
         class="justify-content-end px-1"
@@ -109,7 +142,12 @@
       </td>
     </ng-container>
 
-    <ng-container matColumnDef="performance">
+    <ng-container
+      matColumnDef="performance"
+      [stickyEnd]="
+        dataSource?.sort?.active === 'netPerformanceWithCurrencyEffect'
+      "
+    >
       <th
         *matHeaderCellDef
         class="justify-content-end px-1"

libs/ui/src/lib/holdings-table/holdings-table.component.scss

@@ -1,6 +1,22 @@
 :host {
   display: block;
 
+  .mat-column-nameWithSymbol {
+    word-wrap: break-word !important;
+    white-space: unset !important;
+    max-width: 250px;
+    width: 60%;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+
+    word-break: break-word;
+
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+  }
+
   .gf-table {
     th {
       ::ng-deep {
@@ -11,3 +27,7 @@
     }
   }
 }
+
+.mat-sort-header-sorted {
+  position: sticky !important;
+}

libs/ui/src/lib/holdings-table/holdings-table.component.ts

@@ -77,6 +77,7 @@ export class GfHoldingsTableComponent implements OnChanges, OnDestroy {
     }
 
     this.displayedColumns.push('allocationInPercentage');
+    this.displayedColumns.push('marketPrice');
 
     if (this.hasPermissionToShowValues) {
       this.displayedColumns.push('performance');