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

<table class="gf-table w-100" mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="account">
    <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Name</th>
    <td *matCellDef="let element" class="px-1" mat-cell>
      {{ element.name }}
    </td>
  </ng-container>

  <ng-container matColumnDef="platform">
    <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Platform</th>
    <td *matCellDef="let element" class="px-1" mat-cell>
      <div class="d-flex">
        <gf-symbol-icon
          *ngIf="element.Platform?.url"
          class="mr-1"
          [tooltip]=""
          [url]="element.Platform?.url"
        ></gf-symbol-icon>
        <span>{{ element.Platform?.name }}</span>
      </div>
    </td>
  </ng-container>

  <ng-container matColumnDef="actions">
    <th *matHeaderCellDef class="px-1 text-center" i18n mat-header-cell></th>
    <td *matCellDef="let element" class="px-1 text-center" mat-cell>
      <button
        class="mx-1 no-min-width px-2"
        mat-button
        [matMenuTriggerFor]="accountMenu"
        (click)="$event.stopPropagation()"
      >
        <ion-icon name="ellipsis-vertical"></ion-icon>
      </button>
      <mat-menu #accountMenu="matMenu" xPosition="before">
        <button i18n mat-menu-item (click)="onUpdateAccount(element)">
          Edit
        </button>
        <button
          i18n
          mat-menu-item
          [disabled]="element.isDefault || element.Order?.length > 0"
          (click)="onDeleteAccount(element.id)"
        >
          Delete
        </button>
      </mat-menu>
    </td>
  </ng-container>

  <ng-container matColumnDef="transactions">
    <th *matHeaderCellDef i18n mat-header-cell>Transactions</th>
    <td *matCellDef="let element" mat-cell>
      {{ element.Order?.length }}
    </td>
  </ng-container>

  <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
  <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
</table>

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