react-data-table-component
react-data-table-component copied to clipboard
Styled-components warning: unknown prop grow passed to DOM when using column.grow attribute
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:
- 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' }
];
- 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