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

<div class="overflow-x-auto">
  <table
    class="gf-table holdings-table w-100"
    mat-table
    multiTemplateDataRows
    [dataSource]="dataSource"
  >
    <colgroup>
      <col class="w-100" />
      <col />
      <col />
    </colgroup>

    <ng-container matColumnDef="name">
      <th *matHeaderCellDef class="px-2" mat-header-cell>
        <ng-container i18n>Name</ng-container>
      </th>
      <td *matCellDef="let element" class="px-2" mat-cell>
        <div class="text-truncate">{{ element?.name | titlecase }}</div>
      </td>
    </ng-container>

    <ng-container matColumnDef="valueInBaseCurrency">
      <th *matHeaderCellDef class="px-2 text-right" mat-header-cell>
        <ng-container i18n>Value</ng-container>
      </th>
      <td *matCellDef="let element" class="px-2" mat-cell>
        <div class="d-flex justify-content-end">
          <gf-value
            [isCurrency]="true"
            [locale]="locale"
            [value]="element?.valueInBaseCurrency"
          />
        </div>
      </td>
    </ng-container>

    <ng-container matColumnDef="allocationInPercentage" stickyEnd>
      <th *matHeaderCellDef class="justify-content-end px-2" mat-header-cell>
        <span class="d-none d-sm-block" i18n>Allocation</span>
        <span class="d-block d-sm-none" title="Allocation">%</span>
      </th>
      <td *matCellDef="let element" class="px-2" mat-cell>
        <div class="d-flex justify-content-end">
          <gf-value
            [isPercent]="true"
            [locale]="locale"
            [value]="element?.allocationInPercentage"
          />
        </div>
      </td>
    </ng-container>

    <ng-container matColumnDef="expandedDetail">
      <td
        *matCellDef="let element"
        class="p-0"
        mat-cell
        [attr.colspan]="displayedColumns.length"
      >
        <div [@detailExpand]="element.expand ? 'expanded' : 'collapsed'">
          <div class="holding-parents-table">
            <table
              class="gf-table w-100"
              mat-table
              [dataSource]="element.parents"
            >
              <colgroup>
                <col class="w-100" />
                <col />
                <col />
              </colgroup>

              <ng-container matColumnDef="name">
                <td *matCellDef="let parentHolding" class="px-2" mat-cell>
                  <div
                    class="align-items-center d-flex line-height-1 text-nowrap"
                  >
                    <div>{{ parentHolding?.name }}</div>
                  </div>
                  <div>
                    <small class="text-muted">{{
                      parentHolding?.symbol | gfSymbol
                    }}</small>
                  </div>
                </td>
                <td *matFooterCellDef class="px-2" mat-footer-cell>
                  <ng-container i18n>Name</ng-container>
                </td>
              </ng-container>
              <ng-container matColumnDef="valueInBaseCurrency">
                <td *matCellDef="let parentHolding" mat-cell>
                  <div class="d-flex justify-content-end">
                    <gf-value
                      [isCurrency]="true"
                      [locale]="locale"
                      [value]="parentHolding?.valueInBaseCurrency"
                    />
                  </div>
                </td>
                <td *matFooterCellDef class="px-2" mat-footer-cell>
                  <ng-container i18n>Value</ng-container>
                </td>
              </ng-container>
              <ng-container matColumnDef="allocationInPercentage" stickyEnd>
                <td *matCellDef="let parentHolding" mat-cell>
                  <div class="d-flex justify-content-end">
                    <gf-value
                      [isPercent]="true"
                      [locale]="locale"
                      [value]="parentHolding?.allocationInPercentage"
                    />
                  </div>
                </td>
                <td *matFooterCellDef class="px-2" mat-footer-cell>
                  <span class="d-none d-sm-block" i18n>Allocation</span>
                  <span class="d-block d-sm-none">%</span>
                </td>
              </ng-container>
              <tr
                *matRowDef="let row; columns: displayedColumns"
                mat-row
                [ngClass]="{ 'cursor-pointer': row.position }"
                (click)="onClickHolding(row.position)"
              ></tr>
              <tr
                *matFooterRowDef="displayedColumns"
                class="hidden"
                mat-footer-row
              ></tr>
            </table>
          </div>
        </div>
      </td>
    </ng-container>

    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
    <tr
      *matRowDef="let element; columns: displayedColumns"
      mat-row
      [ngClass]="{
        'cursor-pointer': element.parents?.length > 0,
        expanded: element.expand ?? false
      }"
      (click)="
        element.expand ? (element.expand = false) : (element.expand = true)
      "
    ></tr>
    <tr
      *matRowDef="let row; columns: ['expandedDetail']"
      class="holding-detail"
      mat-row
      [ngClass]="{ 'd-none': !row.parents?.length }"
    ></tr>
  </table>
</div>

<mat-paginator class="d-none" [pageSize]="pageSize" />

@if (isLoading) {
  <ngx-skeleton-loader
    animation="pulse"
    class="px-4 py-3"
    [theme]="{
      height: '1.5rem',
      width: '100%'
    }"
  />
}

@if (dataSource.data.length > pageSize && !isLoading) {
  <div class="my-3 text-center">
    <button mat-stroked-button (click)="onShowAllHoldings()">
      <ng-container i18n>Show more</ng-container>
    </button>
  </div>
}

@if (dataSource.data.length === 0 && !isLoading) {
  <div class="p-3 text-center text-muted">
    <small i18n>No data available</small>
  </div>
}