What is the way to add horizontal scroll on material-ui table with many columns?

Question

I follow this table example for react material-ui framework and I am looking for a possibility to make my table scrollable horizontally when I have a lot of columns.

For instance I have many columns that are squeezed to fit page width, hence their content is shortened.

I think it's described in material-ui spec by link Display the full column content and enable horizontal scrolling in the table container.

So I wonder if it's possible in material-ui.

Answer 1

Only overflow-x is not enough. Adding 'flex-basis' and 'flex-shrink' properties to the columns is also required. In below example, adding flex-basis of 35% to 3 columns grows the table width to 105% and 'flex-shrink: 0' ensures that the columns will not be shrinked when the width is not enough:

app.component.html

<mat-table #table [dataSource]="payments" matSort class="mat-elevation-z8 overflow-x-auto">
  <ng-container matColumnDef="payment_hash">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Payment Hash</mat-header-cell>
    <mat-cell *matCellDef="let payment">{{payment?.payment_hash}}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="path">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Path</mat-header-cell>
    <mat-cell *matCellDef="let payment">{{payment?.path}}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="payment_preimage">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Payment Pre Image</mat-header-cell>
    <mat-cell *matCellDef="let payment">{{payment?.payment_preimage}}</mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

app.component.css

.overflow-x-auto {
  overflow-x: auto;
}

mat-header-cell, mat-cell {
    /* 
    flex-shrink: 0;
    flex-basis: 35%;
    */
    flex: 0 0 35%;
}