primefaces / primefaces/primereact

Datatable: Left Position incorrect with scroll + frozen + toggle columns

Open
#8,504 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Status: Needs Triage
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.

Image
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.