Two Scrolls Appearing on primeng table page

I have a normal prime Ng table which is scrollable vertically. However, if the screen size is too small, I end up with the normal page scroll aswell as the table scroll.

Is there a way around this? To make the table the size of whatever the screen is, with an infinite scroll. So basically the table scroll would turn into the main page scroll at the side of the page? Instead of having two?

Solution 1:

So basically the table scroll would turn into the main page scroll at the side of the page? Instead of having two?

Explanation By default p-table stretches downwards infinitely, unless you limit it's height, in which case it will have a vertical scroll if there's more data than can fit within the height you set. Moreover, if all your elements together on the page (including the table), don't fit the current view, page will also get it's own scroll.

E.g. I have a menu on top of the page, under it a card with other things, then a table toolbar, then the table, that's a lot of elements and they won't fit within the view, so page will get it's own scroll. Meanwhile your table has scrollHeight of 600px, yet you have data for 900px, it will get it's own scroll too. Boom 2 scrolls.

Fix You can fix it in a few different ways but it all comes down to the desired behavior/look of your page... when I had this prob I just removed height restrictions and let table expand downwards infinitely, it wasn't a problem because: 1- table was the last element of the page from top to bottom; 2- I had paginator to limit size regardless. So I ended up with only the page scroll.