[Bug] Duplicate frozen column elements in DOM and key collision warning when enableVirtualization={false}

Open
#4,120 1 comment 0 reactions 1 assignee View on GitHub

@nstepien is already working on this.

Since Jul 29, 2026.

  • #4005 by @nstepien — open

Assessment

This issue has not been assessed yet.

Description

Describe the bug
When enableVirtualization is set to false, frozen/pinned columns are rendered twice in the DOM structure.

While the second set of frozen columns may not be visibly apparent on the screen in regular view, it causes duplicate key warnings (Warning: Encountered two children with the same key) in the console. Furthermore, when exporting the grid to PDF (where enableVirtualization={false} is typically used to render all items), these duplicated frozen columns appear twice side-by-side in the resulting PDF document.

To Reproduce

  1. Render a grid containing frozen/pinned columns.
  2. Set enableVirtualization={false} on the grid component.
  3. Open the browser DevTools and inspect the DOM structure for the grid header/row elements.
  4. Check the browser console for React key collision warnings.
  5. Export to PDF (or trigger print view) with enableVirtualization={false}.

Expected behavior

  1. Frozen columns should only be rendered once in the DOM.
  2. No React key duplicate warnings should occur in the console.
  3. Exported PDFs should only display frozen columns once.

Actual behavior

  1. Inspecting the DOM reveals that the frozen column elements are duplicated.
  2. Console logs a React warning about duplicate keys for the frozen column elements.
  3. Exported PDF output shows the frozen columns printed twice side-by-side.

Environment

  1. Library Version: 7.0.0-beta.61
  2. React Version: 19.2.0
  3. Browser/OS: Chrome / Windows 11

Additional Context
It appears that when virtualization is disabled (enableVirtualization={false}), the internal rendering logic duplicates the frozen column container/cells alongside the main column list, resulting in duplicate DOM nodes and key conflicts.

Dominant language
TypeScript
Stars
7.7k
Forks
2.2k
Avg merge
1d 10h
Merged PRs (30d)
30

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.

More from Comcast/react-data-grid

All issues in Comcast/react-data-grid

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.