Convert to table layout with less padding for better UI

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

@@ -85,31 +85,52 @@
               }
             </div>
 
-            <mat-list>
+            <table mat-table [dataSource]="element.parents">
-              @for (parentHolding of element.parents; track parentHolding) {
+              <ng-container matColumnDef="name">
-                <mat-list-item>
+                <th *matHeaderCellDef mat-header-cell>Name</th>
-                  <span matListItemTitle style="font-size: inherit"
+                <td *matCellDef="let parentHolding" mat-cell>
-                    >{{ parentHolding.name }} ({{
+                  <span
-                      parentHolding.symbol
+                    class="colorBadge"
-                    }}):</span
+                    [style.background-color]="getColor(parentHolding?.symbol)"
-                  >
+                  ></span>
-                  <span matListItemMeta>
+                  {{ parentHolding?.name }}
-                    <gf-value
+                </td>
-                      [isCurrency]="true"
+              </ng-container>
-                      [locale]="locale"
+              <ng-container matColumnDef="symbol">
-                      [value]="parentHolding?.valueInBaseCurrency"
+                <th *matHeaderCellDef mat-header-cell>Symbol</th>
-                    />
+                <td *matCellDef="let parentHolding" mat-cell>
-                  </span>
+                  {{ parentHolding?.symbol }}
-                  <span matListItemMeta>
+                </td>
-                    <gf-value
+              </ng-container>
-                      [isPercent]="true"
+              <ng-container matColumnDef="valueInBaseCurrency">
-                      [locale]="locale"
+                <th *matHeaderCellDef mat-header-cell>Value</th>
-                      [value]="parentHolding?.allocationInPercentage"
+                <td *matCellDef="let parentHolding" mat-cell>
-                    />
+                  <gf-value
-                  </span>
+                    [isCurrency]="true"
-                </mat-list-item>
+                    [locale]="locale"
-              }
+                    [value]="parentHolding?.valueInBaseCurrency"
-            </mat-list>
+                  />
+                </td>
+              </ng-container>
+              <ng-container matColumnDef="allocationInPercentage">
+                <th *matHeaderCellDef mat-header-cell>Allocation</th>
+                <td *matCellDef="let parentHolding" mat-cell>
+                  <gf-value
+                    [isPercent]="true"
+                    [locale]="locale"
+                    [value]="parentHolding?.allocationInPercentage"
+                  />
+                </td>
+              </ng-container>
+              <tr
+                *matHeaderRowDef="displayedHoldingParentColumns"
+                mat-header-row
+              ></tr>
+              <tr
+                *matRowDef="let row; columns: displayedHoldingParentColumns"
+                mat-row
+              ></tr>
+            </table>
           </div>
         </div>
       </td>

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

@@ -21,6 +21,7 @@
 
   .holdingParents {
     padding: 1em 0;
+    --table-padding: 0.5em;
 
     .holdingParentProportionChart {
       height: 2em;
@@ -28,15 +29,31 @@
       div {
         box-sizing: border-box;
         line-height: 2em;
-        padding: 0 0.5em;
+        padding: 0 var(--table-padding);
         overflow: hidden;
       }
     }
 
+    .colorBadge {
+      width: 0.75em;
+      height: 0.75em;
+      border-radius: 100%;
+      display: inline-block;
+    }
+
     table,
     tr,
+    th,
     td {
       background-color: transparent;
     }
+
+    tr {
+      height: auto;
+    }
+    th,
+    td {
+      padding: var(--table-padding);
+    }
   }
 }

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

@@ -20,7 +20,6 @@ import {
   ViewChild
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatListModule } from '@angular/material/list';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
@@ -60,7 +59,6 @@ const {
     CommonModule,
     GfValueComponent,
     MatButtonModule,
-    MatListModule,
     MatPaginatorModule,
     MatSortModule,
     MatTableModule,
@@ -92,6 +90,12 @@ export class GfTopHoldingsComponent implements OnChanges, OnDestroy {
     'valueInBaseCurrency',
     'allocationInPercentage'
   ];
+  public displayedHoldingParentColumns: string[] = [
+    'name',
+    'symbol',
+    'valueInBaseCurrency',
+    'allocationInPercentage'
+  ];
   public isLoading = true;
 
   private unsubscribeSubject = new Subject<void>();