<mat-card class="material-table">
  <mat-card-title class="material-table__header">
    <h5 class="material-table__title">Material-UI Table</h5>
    <app-settings-menu></app-settings-menu>
  </mat-card-title>

  <mat-card-content class="material-table__content">
    <table mat-table [dataSource]="dataSource" class="material-table__table">
      <ng-container *ngFor="let column of displayedColumns" matColumnDef="{{column}}" class="material-table__table-row">
        <th mat-header-cell *matHeaderCellDef class="material-table__table-row-title">{{column}}</th>
        <td mat-cell *matCellDef="let element" class="material-table__table-content">
          <span *ngIf="column !== 'status'">{{element[column]}}</span>
          <div *ngIf="column === 'status'" class="material-table__content-badge" [ngClass]="element[column]">
            <span>{{element[column]}}</span>
          </div>
        </td>
      </ng-container>

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

