How to pass a custom prop from App to cell for react-table v7?
You can also do this on a Cell
by Cell
basis by passing a props object directly to the render function:
...
{rows.cells.map(cell => cell.render('Cell', { test: 'this is a test'}))}
...
Then in your columns definition
columns: [
...
{
Cell: (props) => {
console.log(props.test) // the value is 'this is a test'
return (
<CustomComponent test={props.test} />
);
},
}
You can do it via using the column
prop which is passed to the Cell
component:
columns: [
...
{
Header: "Description",
accessor: "Description",
onClick: () => { alert('click!'); },
Cell: (props) => {
return (
<DescriptionCell onClick={props.column.onClick} country={props.row.values.Currency}>
{String(props.cell.value)}
</DescriptionCell>
);
},
}
Or if your function might be used by many other cell (like to update your backend) you could pass the function to the main Table
component as in this example: https://github.com/tannerlinsley/react-table/blob/master/examples/kitchen-sink-controlled/src/App.js#L622