<div class="mat-elevation-z8" fxFlex="100" fxLayout="column">
  <table mat-table [dataSource]="userList" fxFlex="100">
    <ng-container matColumnDef="first_name">
      <th mat-header-cell *matHeaderCellDef> First name</th>
      <td mat-cell *matCellDef="let element"> {{element.first_name}} </td>
    </ng-container>
    <ng-container matColumnDef="last_name">
      <th mat-header-cell *matHeaderCellDef> Last name</th>
      <td mat-cell *matCellDef="let element"> {{element.last_name}} </td>
    </ng-container>
    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef> Email</th>
      <td mat-cell *matCellDef="let element"> {{element.email}} </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="userSelected(row)"></tr>
  </table>
  <mat-paginator [pageSize]="3" [length]="pagesCount" (page)="pageChanged($event)"></mat-paginator>
</div>