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.