Angular mat-table with sticky header (Fixed header) & scrollable body
In Angular, To create a mat-table
with fixed header and scrollable body, we have to add sticky
input to the matHeaderRowDef
.
Let’s go through an example to understand it further.
We will use the same mat-table
used in the previous articles.
mat-table with fixed header & scrollable body example
Follow the below steps to create mat-table
with fixed header and scrollable body.
Step 1: Add a parent container to the mat-table
Let’s go through the employee table example.
<h2>Angular mat-table with sticky header & scrollable body</h2>
<section class="table-container mat-elevation-z8" tabindex="0">
<table mat-table [dataSource]="dataSource">
<ng-container
[matColumnDef]="column"
*ngFor="let column of displayedColumns"
>
<th mat-header-cell *matHeaderCellDef>{{ column }}</th>
<td mat-cell *matCellDef="let emp">{{ emp[column] }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let emprow; columns: displayedColumns"></tr>
</table>
</section>
To create the table the fixed header and scrollable body, added a parent element to the mat-table
.
<section class="table-container mat-elevation-z8" tabindex="0">
</section>
Step 2: Add height
and overflow
CSS properties to the parent container
I have given a class name i.e, .table-container
to the parent element.
To make the header sticky we need to give fixed height
and overflow:auto
css properties to the parent element.
table {
width: 100%;
}
.table-container {
height: 300px;
overflow: auto;
}
Step 3: Add sticky: true
input to *matHeaderRowDef
And finally we have to add sticky:true
property to *matHeaderRowDef
definition.
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let emprow; columns: displayedColumns"></tr>
StackBlitz Demo
Here is the demo for the mat-table
with fixed header & scrollable body example.
https://stackblitz.com/edit/angular-mat-table-with-sticky-header-scrollable-body