CODEWITHSUNDEEP
htmlangularangular-materialmaterial-designangular-cdk
Chandresh Mishra
Chandresh Mishra

Reputation: 1189

Mat Table with sticky header and Horizontal ,vertical scroll bar

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

Upvotes: 2

Views: 8828

Answers (1)

Jonathan Cheth
Jonathan Cheth

Reputation: 167

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

Upvotes: 5

Related Questions