Mat Table with sticky header and Horizontal ,vertical scroll bar

Question

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

Answer 1

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