Table

import { CurrencyPipe } from '@angular/common';
import { FrBadgeModule } from '@frame-ui-ng/components/badge';
import { FrTableModule } from '@frame-ui-ng/components/table';

columns = ['id', 'app', 'status', 'region', 'cost'];

deployments = [
  { id: 'DEP-2048', app: 'Atlas Studio', owner: 'Mira', status: 'Ready', region: 'EU Central', cost: 1280 },
  { id: 'DEP-2049', app: 'Northwind Portal', owner: 'Rhea', status: 'Queued', region: 'US East', cost: 860 },
  { id: 'DEP-2050', app: 'Signal Desk', owner: 'Nora', status: 'Ready', region: 'AP South', cost: 1440 },
];

badgeVariant(status: string): 'success' | 'secondary' | 'destructive' {
  if (status === 'Failed') {
    return 'destructive';
  }

  return status === 'Queued' ? 'secondary' : 'success';
}

totalCost(): number {
  return this.deployments.reduce((total, deployment) => total + deployment.cost, 0);
}

<div frTableContainer>
  <table frTable variant="outline" [dataSource]="deployments">
    <caption frTableCaption>Deployment activity from the current workspace.</caption>

    <ng-container frColumnDef="id">
      <th frHeaderCell *frHeaderCellDef>Deploy</th>
      <td frCell *frCellDef="let deployment">{{ deployment.id }}</td>
    </ng-container>

    <ng-container frColumnDef="app">
      <th frHeaderCell *frHeaderCellDef>Application</th>
      <td frCell *frCellDef="let deployment">{{ deployment.app }}</td>
    </ng-container>

    <ng-container frColumnDef="status">
      <th frHeaderCell *frHeaderCellDef>Status</th>
      <td frCell *frCellDef="let deployment">
        <span frBadge [variant]="badgeVariant(deployment.status)">{{ deployment.status }}</span>
      </td>
    </ng-container>

    <ng-container frColumnDef="region">
      <th frHeaderCell *frHeaderCellDef>Region</th>
      <td frCell frTableMuted *frCellDef="let deployment">{{ deployment.region }}</td>
    </ng-container>

    <ng-container frColumnDef="cost">
      <th frHeaderCell frTableNumeric *frHeaderCellDef>Monthly</th>
      <td frCell frTableNumeric *frCellDef="let deployment">{{ deployment.cost | currency }}</td>
    </ng-container>

    <tr frHeaderRow *frHeaderRowDef="columns"></tr>
    <tr frRow *frRowDef="let row; columns: columns"></tr>
  </table>
</div>