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

Tags:

React Table