Skip to content

DataTable: Memo props leak to DOM - React does not recognize the ... prop on DOM element. #8120

@MartinNiederl

Description

@MartinNiederl

Describe the bug

The new props cellMemo, cellMemoProps, cellMemoPropsDepth introduced in the latest version are passed to a <div> automatically as they are not stripped by not occurring in

export const DataTableBase = ComponentBase.extend({
    defaultProps: {

React console output:

React does not recognize the cellMemoPropsDepth prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase cellmemopropsdepth instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Minimal fix

Add the new keys to the default-props list:

// DataTableBase.ts
export const DataTableBase = ComponentBase.extend({
  defaultProps: {
    /* existing entries … */
    cellMemo: true,
    cellMemoProps: [
      'rowData', 'field', 'allowCellSelection', 'isCellSelected',
      'editMode', 'index', 'tabIndex', 'editing', 'expanded',
      'editingMeta', 'frozenCol', 'alignFrozenCol'
    ],
    cellMemoPropsDepth: 1,
  }
});

Reproducer

Can't use the fork as it still uses 10.9.5 ("latest") instead of 10.9.6 where the feature was introduced!

System Information

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 13.11 GB / 31.93 GB
  Binaries:
    Node: 22.16.0 - C:\nvm4w\nodejs\node.EXE
    npm: 10.9.2 - C:\nvm4w\nodejs\npm.CMD
    pnpm: 10.12.3 - C:\nvm4w\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (138.0.3351.55)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    primereact: ^10.9.6 => 10.9.6
    react: ^19.1.0 => 19.1.0 
    tailwindcss: ^4.1.10 => 4.1.11

Steps to reproduce the behavior

  1. Use PrimeReact ≥ 10.9.6 (first version that introduces cell-memoisation).
  2. Render a DataTable with any of the new props, e.g.
<DataTable value={data} cellMemoPropsDepth={2} />
  1. Open the browser console while running in development mode.

Expected behavior

No non-HTML attributes should reach the DOM; React should stay quiet.

Metadata

Metadata

Assignees

Labels

TypescriptIssue or pull request is *only* related to TypeScript definition

Type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions