primefaces / primefaces/primereact
Datatable: Left Position incorrect with scroll + frozen + toggle columns
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 using frozen columns in combination with toggle columns and a horizontally scrollable datable the left position of the cells is incorrectly calculated when showing/hiding columns.
When adding columns which cause horizontal scroll the frozen columns in the body have an increased value added to the left style properly added to the cell which cause them to be out of alignment and for the scrolled content to be visible in the 'gap' to the left.
The left style value applied to the and cells are different. seems to be applied correctly.
Reproducer
https://codesandbox.io/p/sandbox/festive-tu-8l54fm
System Information
System:
OS: macOS 26.3
CPU: (10) x64 Apple M4
Memory: 21.77 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 24.5.0 - /usr/local/bin/node
Yarn: 1.22.22 - /usr/local/bin/yarn
npm: 11.5.1 - /usr/local/bin/npm
Browsers:
Chrome: 145.0.7632.77
Firefox: 146.0
Safari: 26.3
npmPackages:
primereact: ^10.9.7 => 10.9.7
react: ^19.1.0 => 19.1.1
Steps to reproduce the behavior
No response
Expected behavior
The tbody cells should align correctly using the inline applied style > left as per the thead cells.
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 DataTable frozen-column and column-toggle layout logic, using the linked CodeSandbox reproducer to observe the misalignment. Compare the inline left values applied to thead and tbody cells while showing and hiding horizontally scrolling columns. Done means frozen tbody cells align with the corresponding thead cells without a visible gap.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100