Angular 6 Material Data Table with Fixed Header and Paginator

Question

How to make the Header of Data Table component fixed to the top, and the Paginator fixed to the bottom?

This is my HTML:

<div class="example-container mat-elevation-z8">

    <table mat-table #itemsTable [dataSource]="dataSource" class="items-list">

        <ng-container matColumnDef="position">
            <th mat-header-cell *matHeaderCellDef> No. </th>
            <td mat-cell *matCellDef="let element"> {{element.position}} </td>
        </ng-container>

        <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef> Name </th>
            <td mat-cell *matCellDef="let element"> {{element.name}} </td>
        </ng-container>

        <ng-container matColumnDef="weight">
            <th mat-header-cell *matHeaderCellDef> Weight </th>
            <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
        </ng-container>

        <ng-container matColumnDef="symbol">
            <th mat-header-cell *matHeaderCellDef> Symbol </th>
            <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="this.componentsDataService.displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: this.componentsDataService.displayedColumns;" (click)="onRowClicked(row)"></tr>
    </table>

    <mat-paginator [pageSizeOptions]="[50, 100, 250]" showFirstLastButtons></mat-paginator>

</div>

I tried adding sticky to the <tr mat-header-row> from the docs, but it doesn't work.

My imports in .ts file:

 import { Component, OnInit, OnChanges, Input, ViewChild } from '@angular/core';
 import { TabsDataService } from 'src/app/services/tabs-data.service';
 import { ComponentsDataService } from 'src/app/services/components-data.service';
 import { MatPaginator, MatTableDataSource, MatTable, MatTableModule } from '@angular/material';

Answer 1

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; } 

Answer 2

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;
  }

Answer 3

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