3

table-container to display records. I have a requirement, when table reaches to top of the screen it's header stick to top. Please guide me to implement this requirement.

For example see this link http://angular-data-grid.github.io/demo/fixed-header/angular-md-grid.html#!?page=1&itemsPerPage=75

Thank you, Java4you.

Java4you
  • 576
  • 2
  • 10
  • 20

1 Answers1

4

Using the Angular Material table, adding the following to the .scss file for the containing component will now achieve this, but not in IE unfortunately:

.mat-header-row {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  background-color: inherit;
}

See this for discussion.

Chris Peacock
  • 4,107
  • 3
  • 26
  • 24
  • 1
    It was perfect, I just add you might increase z-index too, as mat-icons will be one the top of the mat-row-header – Musa Haidari Apr 11 '18 at 12:37