Search code examples
angularangular-materialangular-material2material-tableangular-material-table

Angular material table sticky headers not working as expected

I forked the example on angular material table with sticky header and I added more data. I see that the headers are not sticky. Stackblitz here

Anyone knows how headers can remain sticky?

Solution

  • The problem in your example is that the table container has overflow: auto and height: 100%; this is unnecessary, since the page will already have a scrollbar attached if the table content is bigger than the viewport.

    I've fixed it by removing all the styles that are attached to .example-container.

    In this way, the sticky element will be set relative to the top of the page.

    Example: https://stackblitz.com/edit/angular-brzwrz-aejes6

    Let me know if it works for you.