<div class="console-app__registrars">
  <mat-table
    [dataSource]="dataSource"
    class="mat-elevation-z8"
    class="console-app__registrars-table"
    matSort
  >
    <ng-container
      *ngFor="let column of columns"
      [matColumnDef]="column.columnDef"
    >
      <mat-header-cell *matHeaderCellDef> {{ column.header }} </mat-header-cell>
      <mat-cell *matCellDef="let row" [innerHTML]="column.cell(row)"></mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
  </mat-table>

  <mat-paginator
    class="mat-elevation-z8"
    [pageSizeOptions]="[5, 10, 20]"
    showFirstLastButtons
  ></mat-paginator>
</div>
