primefaces / primefaces/primereact

DataTable: Warning message related to `props` displayed

Open
#7,470 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Resolution: Workaround Type: Bug
Dominant language
CSS
Stars
8.3k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

Describe the bug

To set the default props of the DataTable component, I created a component called StyledDataTable and am using it in my project. I'm not sure when, but a warning message that was clearly invisible appears in the console.
I discovered it after updating to Vite 6, but the phenomenon is the same even after downgrading to version 5.4.11.
This is a fact I discovered while writing code to reproduce the bug.
This was caused by code injecting props from <DataTable {...props}>.
I created the same StyledDataTable component in the bug reproduction code, but I couldn't see the warning message in the StackBlitz console.

image
image
image

Reproducer

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

System Information
System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 1.10 GB / 3.83 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
    Yarn: 4.5.3 - ~/.nvm/versions/node/v20.18.0/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
    bun: 1.1.26 - ~/.bun/bin/bun
  npmPackages:
    primereact: ^10.8.5 => 10.8.5
    react: ^18.3.1 => 18.3.1
    tailwindcss: ^3.4.15 => 3.4.15
Steps to reproduce the behavior

It should happen just by loading the project.

Expected behavior

Warning messages should not appear in the console.

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 linked StackBlitz reproducer and src/StyledDataTable.tsx, then load the project and inspect how props are passed to DataTable. Compare the reproducer with the reported environment and trace when the console warning appears. Done means the reported warning no longer appears when the project is loaded.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, tailwindcss, typescript, vite
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.