DataTable/VirtualScroller: When using scrollHeight='flex", grid has no height
Describe the bug
When I attempt to use scrollHeight="flex" on the DataTable when using the VirtualScroller, I seem to get no height on my Table, the header is visible but no columns are seen, this includes the column header.
In my actual codebase, I noticed that sometimes, if the width is less than 1400px, it'll actually give height to the Datatable, but I cannot make that reproducible in the Stackblitz project
Reproducer
https://stackblitz.com/edit/xf281zjf?file=src%2FApp.jsx
System Information
npmPackages:
primereact: 10.9.6 => 10.9.6
react: 18.3.1 => 18.3.1
Steps to reproduce the behavior
- Ensure scrollHeight is set to 'flex' or '100%' etc...
- Widen the demo to be majority of the screen
- Run code, notice there is no height on the grid
- Sometimes for a brief moment you can see the columns appear and then disappear
Expected behavior
I feel like with this setup, I should have height on my DataTable, but it always seems to have a height of 0.
Something else to note, is that while setting the virtualScrollerOptions classname to 'h-full' does end up showing the table, resizing the window can sometimes cause the height to shrink and when you expand the window again, never takes up the full height again until a full refresh
https://github.com/user-attachments/assets/c931b3c6-d981-487a-8aa9-1a5965460941
As you can see, as you adjust the height of the window, the height of the virtual scroller container shrinks, and as you expand it, it'll expand as well, but sometimes it stops expanding prematurely and takes hold of that smaller height with no way to fix it without a refresh. This was not an issue in 10.6.6 but seems to be an issue in 10.9.6
I'm not seeing this issue in the StackBlitz project, but one difference is that I'm running React 19 locally
I'm also noticing this spacer that is only noticeable on the page when this issue occurs
when the grind renders as it should, it seems like it shows up below the DataTable
@mpearce9 that whole flex thing only works if the parent works with flex too. So the parent needs display:flex at least. In case of virtualScroll i would add overflow hidden to parent too
@mpearce9 that whole flex thing only works if the parent works with flex too. So the parent needs display:flex at least. In case of virtualScroll i would add overflow hidden to parent too
If you look in the reproducer, you can see that both parents are flex as well, I did attempt the overflow-hidden in the parent to no avail. I had to edit the reproducing steps, because I was using a wide monitor originally, and realized that width seems to play a factor in whether the rows show or not with scrollheight: flex