hermes-web-angular/src/app/policies/policy-table/policy-table.component.html

<table mat-table [dataSource]="policies" class="mat-elevation-z8">
  <ng-container matColumnDef="path">
    <th mat-header-cell *matHeaderCellDef>Path</th>
    <td mat-cell *matCellDef="let policy">
      {{policy.path}}
    </td>
  </ng-container>

  <ng-container matColumnDef="group">
    <th mat-header-cell *matHeaderCellDef>Group</th>
    <td mat-cell *matCellDef="let policy">
      {{getGroupById(policy.group_id)?.name || '\<unknown group\>'}}
    </td>
  </ng-container>

  <ng-container matColumnDef="usage">
    <th mat-header-cell *matHeaderCellDef>Usage Rate</th>
    <td mat-cell class="center" *matCellDef="let policy">
      {{policy.usage}}
    </td>
  </ng-container>

  <ng-container matColumnDef="span">
    <th mat-header-cell *matHeaderCellDef>Span (ms)</th>
    <td mat-cell class="center" *matCellDef="let policy">
      {{policy.span}}
    </td>
  </ng-container>

  <ng-container matColumnDef="actions">
    <th mat-header-cell *matHeaderCellDef> Actions </th>
    <td mat-cell *matCellDef="let policy">
      <button mat-button (click)="edit(policy)"><mat-icon>edit</mat-icon>Edit</button>
      <button mat-button class="delete" (click)="delete(policy)"><mat-icon>delete</mat-icon>Delete</button>
    </td>
  </ng-container>

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