2

I have a mat table with sticky header and the vertical scroll of the page. It works fine until I add more columns dynamically and the horizontal scroll bar appears.

The sticky headers stop working.

is there any way to make it work?

Please see the example:

https://stackblitz.com/edit/angular-hdg9xh

Chandresh Mishra
  • 1,081
  • 3
  • 24
  • 45
  • Not sure what you want to achieve - so there are few solutions. E.g. you can remove the wrapper altogether - this will make table overflow on both x and y to body, and body scrollbars will handle scrolling the data. Or, you could add height property to the wrapper (i.e. .example-container) and then wrapper will handle both x and y overflows. Basically, read up on how sticky works in conjunction with overflow - there a lot of good articles on that that will explain it much better than I could :) – TotallyNewb Jun 10 '20 at 10:47
  • Making container of fix height will fix the issue but my design is not allowing me to do the same. I want header sticky with page scroll in Y-direction and table scroll in x-direction as shown in the https://stackblitz.com/edit/angular-hdg9xh – Chandresh Mishra Jun 10 '20 at 11:02

1 Answers1

4

You can set the width and height to the div container wrap around the mat-table. On stylesheet, you can apply something like this:

.example-container {
  width: 100%;
  height: calc(100vh - 32px);
  overflow: auto;
}

Example: https://stackblitz.com/edit/angular-hdg9xh-uxkaeh

Sovichea Cheth
  • 157
  • 7