First column fixed in mat-table

Question

do you happen to know how to fix the first column and use horizontal scrolling in mat-table in Angular Material?

I would be very grateful for your help.

Answer 1

Add a method to you component, let's call it isSticky(column). Then bind [sticky] to it. See below for the entire working example link.

HTML

<div class="app-table-wrapper">
  <table mat-table [dataSource]="dataSource" id="app-table">
      <ng-container *ngFor="let column of displayedColumns" matColumnDef={{column}} [sticky]="isSticky(column)">
          <th mat-header-cell *matHeaderCellDef> {{column}} </th>
          <td mat-cell *matCellDef="let element">{{element[column]}}</td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>S
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
</div>

TS

isSticky (column: string): boolean {
  return column === 'col1' ? true : false;
}

Full Example

StackBlitz - angular-sticky-table

Answer 2

You should use mat-table API for this - sticky value.

<ng-container matColumnDef="name" sticky>
  <th mat-header-cell *matHeaderCellDef> Name </th>
  <td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>

Please check in official doc: https://material.angular.io/components/table/examples example name: "Table with a sticky columns"