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

[CasperKristiansson]

Issue Check list

• Agree to the Code of Conduct
• Read the README
• You are using React 16.8.0+
• You installed styled-components
• 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 (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' }
];

2. 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

[bochove]

This is also the case for other properties set, like minWidth, with that one you additionally get this in the console:

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

[andresfdel17]

Same trouble with align.

[dungsp]

Any solution for this issue? I has the same issue with align: center, right, left.

If I tried to set origin boolean, it error:

When I extracted to string, it warning: