primereact icon indicating copy to clipboard operation
primereact copied to clipboard

DataTable/VirtualScroller: When using scrollHeight='flex", grid has no height

Open mpearce9 opened this issue 5 months ago • 4 comments

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

  1. Ensure scrollHeight is set to 'flex' or '100%' etc...
  2. Widen the demo to be majority of the screen
  3. Run code, notice there is no height on the grid
  4. 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.

mpearce9 avatar Jul 31 '25 12:07 mpearce9

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

Image

mpearce9 avatar Jul 31 '25 13:07 mpearce9

I'm also noticing this spacer that is only noticeable on the page when this issue occurs

Image

when the grind renders as it should, it seems like it shows up below the DataTable

Image

mpearce9 avatar Jul 31 '25 14:07 mpearce9

@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

sja-cslab avatar Aug 27 '25 09:08 sja-cslab

@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

mpearce9 avatar Aug 27 '25 12:08 mpearce9