ghostfolio/apps/client/src/app/components/positions-table/positions-table.component.html

<!--<mat-form-field appearance="outline" class="w-100">
  <input #input autocomplete="off" matInput (keyup)="applyFilter($event)" />
  <ion-icon class="mr-1" matPrefix name="search-outline"></ion-icon>
</mat-form-field>-->

<table
  class="w-100"
  matSort
  matSortActive="shareCurrent"
  matSortDirection="desc"
  mat-table
  [dataSource]="dataSource"
>
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef mat-sort-header i18n>Symbol</th>
    <td mat-cell *matCellDef="let element">{{ element.symbol | gfSymbol }}</td>
  </ng-container>

  <ng-container matColumnDef="performance">
    <th
      *matHeaderCellDef
      class="d-none d-lg-table-cell text-right"
      i18n
      mat-header-cell
    >
      Performance
    </th>
    <td class="d-none d-lg-table-cell" mat-cell *matCellDef="let element">
      <div class="d-flex justify-content-end">
        <gf-value
          [colorizeSign]="true"
          [isPercent]="true"
          [locale]="locale"
          [value]="isLoading ? undefined : element.grossPerformancePercent"
        ></gf-value>
      </div>
    </td>
  </ng-container>

  <ng-container matColumnDef="shareInvestment">
    <th
      *matHeaderCellDef
      class="justify-content-end"
      i18n
      mat-header-cell
      mat-sort-header
    >
      Initial Share
    </th>
    <td mat-cell *matCellDef="let element">
      <div class="d-flex justify-content-end">
        <gf-value
          [isPercent]="true"
          [locale]="locale"
          [value]="isLoading ? undefined : element.shareInvestment"
        ></gf-value>
      </div>
    </td>
  </ng-container>

  <ng-container matColumnDef="shareCurrent">
    <th
      *matHeaderCellDef
      class="justify-content-end"
      i18n
      mat-header-cell
      mat-sort-header
    >
      Current Share
    </th>
    <td mat-cell *matCellDef="let element">
      <div class="d-flex justify-content-end">
        <gf-value
          [isPercent]="true"
          [locale]="locale"
          [value]="isLoading ? undefined : element.shareCurrent"
        ></gf-value>
      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr
    *matRowDef="let row; columns: displayedColumns"
    mat-row
    (click)="onOpenPositionDialog({ symbol: row.symbol, title: row.name })"
  ></tr>
</table>

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

<div *ngIf="dataSource.data.length === 0 && !isLoading" class="p-3 text-center">
  <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
</div>

<div
  *ngIf="dataSource.data.length > pageSize && !isLoading"
  class="my-3 text-center"
>
  <button i18n mat-stroked-button (click)="onShowAllPositions()">
    Show all positions...
  </button>
</div>

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