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

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.

CSS

  table {
    width: 100%;
  }

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