How to Make Mat Table Header Sticky in Angular?

To make mat table header sticky, you have to set the value of the sticky property to true in the matHeaderRowDef. By default, it is set to false, therefore, the table header scrolls along with the rows.

So, basically, you need to add two things to your mat table to make its header sticky:

  1. Set sticky: true; in the matHeaderRowDef
  2. Set a fixed height of the table container and set the overflow property to auto.

Let’s say, we have a mat table with three columns Id, name, and email. In the matHeaderRowDef, we have set sticky: true; to make its header sticky:

<div class="table-container">
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
      
        <!-- Id Column -->
        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef> Id </th>
          <td mat-cell *matCellDef="let element"> {{element.id}} </td>
        </ng-container>
      
        <!-- Name Column -->
        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef> Name </th>
          <td mat-cell *matCellDef="let element"> {{element.name}} </td>
        </ng-container>
      
        <!-- Email Column -->
        <ng-container matColumnDef="email">
          <th mat-header-cell *matHeaderCellDef> Email </th>
          <td mat-cell *matCellDef="let element"> {{element.email}} </td>
        </ng-container>
      
        <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true;"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
</div>

The sticky: true; alone will not work until you give a fixed height to the table container.

So, open up your component’s CSS file and set the table container’s height to some fixed value, eg. 400px. Next, you have to set the overflow property to auto.

The overflow: auto; will add a vertical scroll bar to the table container if the table’s height exceeds 400px:

.table-container{
    height: 400px;
    overflow: auto;
}
table{
    width: 100%;
}

If you follow these two steps properly, the table header will become sticky and will not scroll along with the rest of the content(rows) of the mat table.

Thanks for reading.


Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.