ngx-data-table.component.html

<div class="mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">

    <ng-container [matColumnDef]="cols" *ngFor="let cols of displayedColumns">
      <mat-header-cell *matHeaderCellDef mat-sort-header> {{cols}} </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element[cols]}} </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 #paginator
    [length]="dataSource.data.length"
    [pageIndex]="0"
    [pageSize]="50"
    [pageSizeOptions]="[25, 50, 100, 250]">
  </mat-paginator>
</div>