primefaces / primefaces/primereact
DataTable with VirtualScroller: layout bug
Nobody has claimed this yet.
- Dominant language
- CSS
- Stars
- 8.3k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
Describe the bug
When DataTable with VirtualScroller is used in container that uses calculated height i.e.: calc(100vh-20px), when you decrease viewport size and scroll, then the current height of DataTable persists when the viewport is extended again until page refresh.
Reproducer
https://codesandbox.io/s/primereact-data-table-with-virtual-scroller-selection-errors-forked-r8vo31
PrimeReact version
9.4
React version
18.x
Language
ES6
Build / Runtime
Create React App (CRA)
Browser(s)
No response
Steps to reproduce the behavior
- Reduce the height of the viewport
- Scroll the table
- Expand the viewport height back
Expected behavior
The height of the table should follow the height of the viewport
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox reproducer and inspect the DataTable with VirtualScroller behavior when the viewport height changes. Reproduce the sequence of shrinking the viewport, scrolling, and expanding it again, then trace the component entry points involved in calculating table height. Done means the table height follows the calculated viewport height without requiring a refresh.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100