First column fixed in mat-table
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/examplesexample name: "Table with a sticky columns"
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