Skip to content

Column frozen is broken when DataTable is using headerColumnGroup (ColumnGroup) #8320

New issue
New issue
Open
#8327
Open
Column frozen is broken when DataTable is using headerColumnGroup (ColumnGroup)#8320
#8327
Labels
Status: Needs TriageIssue will be reviewed by Core Team and a relevant label will be added as soon as possible
@hunterfunt43

Description

@hunterfunt43
hunterfunt43
opened on Oct 6, 2025

Describe the bug

When using DataTable with headerColumnGroup,
The header Column only able to froze the first 2 column without errors.
When trying to froze 3rd column and up, will get this errors:

Uncaught TypeError: Cannot read properties of undefined (reading 'style')
    at updateStickyPosition2 (primereact_datatable.js?v=b366be7b:13887:36)
    at primereact_datatable.js?v=b366be7b:13976:7
    at react-stack-bottom-frame (react-dom_client.js?v=71bf81dc:17478:20)
    at runWithFiberInDEV (react-dom_client.js?v=71bf81dc:1485:72)
    at commitHookEffectListMount (react-dom_client.js?v=71bf81dc:8460:122)
    at commitHookPassiveMountEffects (react-dom_client.js?v=71bf81dc:8518:60)
    at commitPassiveMountOnFiber (react-dom_client.js?v=71bf81dc:9887:29)
    at recursivelyTraversePassiveMountEffects (react-dom_client.js?v=71bf81dc:9868:13)
    at commitPassiveMountOnFiber (react-dom_client.js?v=71bf81dc:9984:13)
    at recursivelyTraversePassiveMountEffects (react-dom_client.js?v=71bf81dc:9868:13)

Usage Example:
Image

Here is the column group definitions:
Image

Here is another, more detailed error message from local NextJS Project:

updateStickyPosition
node_modules/primereact/datatable/datatable.esm.js (5209:36)
HeaderCell.useEffect
node_modules/primereact/datatable/datatable.esm.js (5298:7)
Object.react_stack_bottom_frame
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (23668:20)
runWithFiberInDEV
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (871:30)
commitHookEffectListMount
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (12344:29)
commitHookPassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (12465:11)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14386:13)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14359:11)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14513:11)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14359:11)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14513:11)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14359:11)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14379:11)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14359:11)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14513:11)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14359:11)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14379:11)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14359:11)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14513:11)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14359:11)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14513:11)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14359:11)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14513:11)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14359:11)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14379:11)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14359:11)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14513:11)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14359:11)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14379:11)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14359:11)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14513:11)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14359:11)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14379:11)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14359:11)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14513:11)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14359:11)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14513:11)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14359:11)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14379:11)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14359:11)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14389:11)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14359:11)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14379:11)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14359:11)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14389:11)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14359:11)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14379:11)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14359:11)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14379:11)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (14359:11)
<unknown>
node_modules/primereact/datatable/datatable.esm.js (5590:59)
<unknown>
node_modules/next/dist/compiled/react/cjs/react.development.js (444:21)
mapIntoArray
node_modules/next/dist/compiled/react/cjs/react.development.js (345:20)
mapIntoArray
node_modules/next/dist/compiled/react/cjs/react.development.js (390:32)
Object.mapChildren [as map]
node_modules/next/dist/compiled/react/cjs/react.development.js (443:7)
createHeaderCells
node_modules/primereact/datatable/datatable.esm.js (5587:27)
createGroupHeaderCells
node_modules/primereact/datatable/datatable.esm.js (5584:12)
<unknown>
node_modules/primereact/datatable/datatable.esm.js (5719:13)
Array.map
<anonymous>
createContent
node_modules/primereact/datatable/datatable.esm.js (5706:19)
TableHeader
node_modules/primereact/datatable/datatable.esm.js (5731:17)
createTableHeader
node_modules/primereact/datatable/datatable.esm.js (7232:44)
contentTemplate
node_modules/primereact/datatable/datatable.esm.js (7522:27)
ObjectUtils.getJSXElement
node_modules/primereact/utils/utils.esm.js (1655:41)
VirtualScroller
node_modules/primereact/virtualscroller/virtualscroller.esm.js (969:33)
createContent
node_modules/primereact/datatable/datatable.esm.js (7498:55)
DataTable
node_modules/primereact/datatable/datatable.esm.js (7639:17)
FrozenColumnsDemo
src/app/table.tsx (70:7)

Reproducer

https://stackblitz.com/edit/vitejs-vite-xexovjkg?file=src%2FApp.tsx

System Information

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
    Memory: 4.28 GB / 31.93 GB
  Binaries:
    Node: 18.20.3 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 140.0.7339.208
    Edge: Chromium (140.0.3485.54)
    Firefox: 143.0.4 - C:\Program Files\Mozilla Firefox\firefox.exe
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    primereact: ^10.9.7 => 10.9.7 
    react: 19.1.0 => 19.1.0
    tailwindcss: ^4 => 4.1.14

Steps to reproduce the behavior

  1. Go on provided Stackblitz project.
  2. Click at the Lock button.
Image
  1. See errors in the console.

Expected behavior

Be able to froze 3rd column correctly, possibly 4th and so on.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: Needs TriageIssue will be reviewed by Core Team and a relevant label will be added as soon as possible

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions