How to add horizontal scroller to Mat-table in angular

Question

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.