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>
  </ng-container>

Table with a stickyend columns

use sticky input to the matColumnDef as below  

<ng-container matColumnDef="Dateofjoin" stickyEnd>
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Dateofjoin </th>
    <td mat-cell *matCellDef="let element"> {{element.Dateofjoin|date: 'dd-MM-yyyy' }}       </td>
    <td mat-footer-cell *matFooterCellDef>  </td>
</ng-container>

OutPut 

Code Action @StackBlitz