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

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

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

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