Mallesh kumar

Mallesh kumar

  • 1.6k
  • 328
  • 19.6k

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>
<mat-header-row *matHeaderRowDef="columnNames">mat-header-row>
<mat-row *matRowDef="let row; columns: columnNames;">mat-row>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons>mat-paginator>
The below error i'm getting cloumn names should be set properly. Please help me out.

Brought to you by: JavaScript SDK for Bold BI dashboard and analytics embedding. Free trial.

Answers (2)