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

<div class="holdings">
  <table
    class="gf-table w-100"
    mat-table
    matSort
    matSortActive="allocationInPercentage"
    matSortDirection="desc"
    [dataSource]="dataSource"
  >
    <ng-container matColumnDef="icon">
      <th *matHeaderCellDef class="px-1" mat-header-cell></th>
      <td *matCellDef="let element" class="px-1 text-center" mat-cell>
        <gf-asset-profile-icon
          [dataSource]="element.dataSource"
          [symbol]="element.symbol"
          [tooltip]="element.name"
        />
      </td>
    </ng-container>

    <ng-container matColumnDef="nameWithSymbol">
      <th
        *matHeaderCellDef
        class="px-1"
        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>
        <div class="text-truncate">
          {{ element.name }}
          @if (element.name === element.symbol) {
            <span>({{ element.assetSubClassLabel }})</span>
          }
        </div>
        <div>
          <small class="text-muted">{{ element.symbol }}</small>
        </div>
      </td>
    </ng-container>

    <ng-container matColumnDef="dateOfFirstActivity">
      <th
        *matHeaderCellDef
        class="d-none d-lg-table-cell justify-content-end px-1"
        mat-header-cell
        mat-sort-header
      >
        <ng-container i18n>First Activity</ng-container>
      </th>
      <td
        *matCellDef="let element"
        class="d-none d-lg-table-cell px-1"
        mat-cell
      >
        <div class="d-flex justify-content-end">
          <gf-value
            [isDate]="element.dateOfFirstActivity ? true : false"
            [locale]="locale"
            [value]="element.dateOfFirstActivity ?? ''"
          />
        </div>
      </td>
    </ng-container>

    <ng-container matColumnDef="valueInBaseCurrency">
      <th
        *matHeaderCellDef
        class="d-none d-lg-table-cell justify-content-end px-1"
        mat-header-cell
        mat-sort-header
      >
        <ng-container i18n>Value</ng-container>
      </th>
      <td
        *matCellDef="let element"
        class="d-none d-lg-table-cell px-1"
        mat-cell
      >
        <div class="d-flex justify-content-end">
          <gf-value
            [isCurrency]="true"
            [locale]="locale"
            [value]="isLoading ? undefined : element.valueInBaseCurrency"
          />
        </div>
      </td>
    </ng-container>

    <ng-container matColumnDef="allocationInPercentage">
      <th
        *matHeaderCellDef
        class="justify-content-end px-1"
        mat-header-cell
        mat-sort-header
      >
        <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-1" mat-cell>
        <div class="d-flex justify-content-end">
          <gf-value
            [isPercent]="true"
            [locale]="locale"
            [value]="isLoading ? undefined : element.allocationInPercentage"
          />
        </div>
      </td>
    </ng-container>

    <ng-container matColumnDef="performance" stickyEnd>
      <th
        *matHeaderCellDef
        class="justify-content-end px-1"
        mat-header-cell
        mat-sort-header="netPerformancePercentWithCurrencyEffect"
      >
        <span class="d-none d-sm-block" i18n>Performance</span>
        <span class="d-block d-sm-none" title="Performance">±</span>
      </th>
      <td *matCellDef="let element" class="px-1" mat-cell>
        <div class="d-flex justify-content-end">
          <gf-value
            [colorizeSign]="true"
            [isPercent]="true"
            [locale]="locale"
            [value]="
              isLoading
                ? undefined
                : element.netPerformancePercentWithCurrencyEffect
            "
          />
        </div>
      </td>
    </ng-container>

    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
    <tr
      *matRowDef="let row; columns: displayedColumns"
      mat-row
      [ngClass]="{
        'cursor-pointer':
          hasPermissionToOpenDetails &&
          !ignoreAssetSubClasses.includes(row.assetSubClass)
      }"
      (click)="
        !ignoreAssetSubClasses.includes(row.assetSubClass) &&
          onOpenPositionDialog({
            dataSource: row.dataSource,
            symbol: row.symbol
          })
      "
    ></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)="onShowAllPositions()">
      <ng-container i18n>Show all</ng-container>
    </button>
  </div>
}

@if (
  dataSource.data.length === 0 && hasPermissionToCreateActivity && !isLoading
) {
  <div class="p-3 text-center">
    <gf-no-transactions-info-indicator [hasBorder]="false" />
  </div>
}