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:

Answer 1

You can use a normal sticky mat-footer-row with colspan and put the paginator inside:

   ...

    
        

And use some style like this, to make it more appealing to eye:

.mat-row:last-child td {
  border-bottom: none;
}

.mat-footer-row:first-child td {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.mat-footer-cell .mat-paginator {
  margin-left: -24px;
  margin-right: -24px;
}