react-data-table-component icon indicating copy to clipboard operation
react-data-table-component copied to clipboard

Styled-components warning: unknown prop grow passed to DOM when using column.grow attribute

Open CasperKristiansson opened this issue 7 months ago • 3 comments

Issue Check list

  • [x] Agree to the Code of Conduct
  • [x] Read the README
  • [x] You are using React 16.8.0+
  • [x] You installed styled-components
  • [x] Include relevant code or preferably a code sandbox

Describe the bug

When defining a column with the grow attribute in a React Data Table, the table renders correctly (columns grow as expected), but a warning appears in the browser console:

styled-components: it looks like an unknown prop "grow" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via <StyleSheetManager shouldForwardProp={...}> (connect an API like @emotion/is-prop-valid) or consider using transient props ($ prefix for automatic filtering.)

To Reproduce

Steps to reproduce the behavior:

  1. Define a data table columns array, including a column with grow, e.g.:
const columns: TableColumn<FileWithMetadata>[] = [
  { name: 'Name', selector: row => row.name, sortable: true, grow: 1 },
  { name: 'Type', selector: row => row.type, sortable: true, width: '150px' }
];
  1. Render <DataTable columns={columns} data={...} />

Expected behavior

No console warnings should be emitted when using the documented grow property on a column.

Code Sandbox, Screenshots, or Relevant Code

import DataTable, { TableColumn } from 'react-data-table-component';

const columns: TableColumn<FileWithMetadata>[] = [
  { name: 'Name', selector: row => row.name, sortable: true, grow: 1 },
  { name: 'Type', selector: row => row.type, sortable: true, width: '150px' }
];

<DataTable columns={columns} data={files} />;

Versions (please complete the following information)

  • React: 19.1.0
  • Styled Components: 6.1.17
  • OS: macos Sequoia 15.4.1
  • Browser: chrome 135.0.7049.96

CasperKristiansson avatar Apr 22 '25 11:04 CasperKristiansson