Angular 6 Material Data Table with Fixed Header and Paginator

Try to update angular material in your project because the sticky attribute was added in 6.2.3.

I found in the examples on the material site that the header can be fixed by adding sticky to the matHeaderRowDef:

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true">

For the paginator i added a class to mat-paginator:

<mat-paginator ...
                class="mat-paginator-sticky"> 

with a class based on the answer in the link @frederik provided in the comments

.mat-paginator-sticky {
  bottom: 0px;
  position: sticky;
  z-index: 10;
}

The below css worked for me:

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
.mat-header-row{
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
  }

As per Material 8.1

1. For the sticky header we need to give a sticky values as shown in many answers here

2. For the sticky paginator or bottom fixed paginator.

We can wrap the table inside a div with max-height or height CSS Property and put the paninator outside that div.

Html Code sample.

 <div class="mat-elevation-z2">
    <div class="table-container">

      <!--- List of column definitions here --->
      <table mat-table [dataSource]="dataSource" matSort>
        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>

    </div>
    <mat-paginator [pageSize]="25" [pageSizeOptions]="[10, 15, 25, 100]"></mat-paginator>
 </div>

CSS

  table {
    width: 100%;
  }

  .table-container {
    max-height: calc(100vh - 155px); // or height: calc(100vh - 155px); depending on your need  change
    overflow: auto;
  }