Mallesh kumar

Mallesh kumar

  • 1.6k
  • 277
  • 8.9k

How to add horizontal scroller to Mat-table in angular

Dec 10 2018 1:51 PM
How to add horizontal scroller to Mat-table( angular material ) in angular. and columns automatically adjusted.
 
<div class="mat-elevation-z8">
<mat-table #table [dataSource]="dataSource" style="overflow-x:scroll;">
<ng-container *ngFor="let thisCol of columnNames; let colIndex = index" matColumnDef="{{thisCol}}">
<mat-header-cell *matHeaderCellDef> {{thisCol}} mat-header-cell>
<mat-cell *matCellDef="let element"> {{element[thisCol]}} mat-cell>
ng-container>
<mat-header-row *matHeaderRowDef="columnNames">mat-header-row>
<mat-row *matRowDef="let row; columns: columnNames;">mat-row>
mat-table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons>mat-paginator>
div>
 
The below error i'm getting cloumn names should be set properly. Please help me out.
 
 

Answers (2)