<div class="ml-8 mr-8 mt-8 pb-16">
  <div class="mat-elevation-z8">
      <mat-table [dataSource]="dataSource" matSort >

          <ng-container matColumnDef="id">
            <mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
            <mat-cell *matCellDef="let row" data-label="id"> {{row.id}} </mat-cell>
          </ng-container>
      
          <ng-container matColumnDef="age">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Progress </mat-header-cell>
            <mat-cell *matCellDef="let row" data-label="progress"> {{row.age}} </mat-cell>
          </ng-container>
      
          <ng-container matColumnDef="name">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
            <mat-cell *matCellDef="let row" data-label="name"> {{row.name}} </mat-cell>
          </ng-container>
      
          <ng-container matColumnDef="gender">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Gender </mat-header-cell>
            <mat-cell *matCellDef="let row" [style.color]="row.color" data-label="color"> {{row.gender}} </mat-cell>
          </ng-container>

          <ng-container matColumnDef="company">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Company </mat-header-cell>
            <mat-cell *matCellDef="let row" [style.color]="row.color" data-label="color"> {{row.company}} </mat-cell>
          </ng-container>

          <ng-container matColumnDef="email">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Company </mat-header-cell>
            <mat-cell *matCellDef="let row" [style.color]="row.color" data-label="color"> {{row.email}} </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 [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
  </div>
</div>
