In DataTable, when using VirtualScroller and RowGroup, the grouped item is messing up its sticky position (it seems to be conflicting the "group header"
with items
).
The buggy effect can be seen after scrolling above the second group onwards. Then, the header keeps popping in the screen and messing up even with the items rows spacing/height.
Scroll the table items below the second row group.
See the strange behavior (row group header position, spacing/height problems, multiple groups elements in DOM, etc).
Expected behavior
It was expected VirtualScroller to ignore row group header/footer items, so everything could work as it does without the virtual scrolling functionality (which is something really needed in some scenarios, where a big list can't be nicely rendered without stucking the application).
Describe the bug
In DataTable, when using VirtualScroller and RowGroup, the grouped item is messing up its sticky position (it seems to be conflicting the "group header"
The buggy effect can be seen after scrolling above the second group onwards. Then, the header keeps popping in the screen and messing up even with the items rows spacing/height.
Reproducer
https://codesandbox.io/s/primereact-demo-forked-iid9th?file=/src/demo.js:2552-2816
PrimeReact version
9.2.1
React version
18.x
Language
ALL
Build / Runtime
Create React App (CRA)
Browser(s)
No response
Steps to reproduce the behavior
Expected behavior
It was expected VirtualScroller to ignore row group header/footer items, so everything could work as it does without the virtual scrolling functionality (which is something really needed in some scenarios, where a big list can't be nicely rendered without stucking the application).