Material Angular Table with sticky header,sticky column and Sticky Footer,Material Angular Table Part 3
Material Angular Table with sticky header, sticky column and Sticky Footer Part 3
Refer Mat-Table from material Angular io
Table with sticky header
By using position: sticky styling, the table's rows and columns can be fixed so that they do not leave the viewport even when scrolled.
use sticky input to the matHeaderRowDef as below
<tr mat-header-row *matHeaderRowDef="customerdisplayedColumns; sticky: true"></tr>
Table with sticky Footer
use sticky input to the matFooterRowDef as below
<tr mat-footer-row *matFooterRowDef="customerdisplayedColumns; sticky: true"></tr>
Table with a sticky columns
use sticky input to the matColumnDef as below
<ng-container matColumnDef="name" sticky >
<th mat-header-cell *matHeaderCellDef mat-sort-header >Name</th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
<td mat-footer-cell *matFooterCellDef> Count </td>…
<th mat-header-cell *matHeaderCellDef mat-sort-header >Name</th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
<td mat-footer-cell *matFooterCellDef> Count </td>…