How to pass a custom prop from App to cell for react-table v7?

Question

This is how I render my Table body:

        <tbody {...getTableBodyProps()}>
          {rows.map((row, i) => {
            prepareRow(row);
            return (
              <Row {...row.getRowProps()}>
                {row.cells.map((cell) => {
                  // return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
                  return cell.render("Cell");
                })}
              </Row>
            );
          })}
        </tbody>

This is how I setup columns. I created unique components for each cell.

[
  {
    Header: "Main Header",
    Footer: "Foot",
    columns: [
      {
        Header: "Code",
        accessor: "NominalCode",
        Cell: (props) => {
          return <CodeCell>{props.cell.value}</CodeCell>;
        },
        Footer: () => {
          return <FooterTotalCell>Total</FooterTotalCell>;
        }
      },
      {
        Header: "Description",
        accessor: "Description",
        Cell: (props) => {
          return (
            <DescriptionCell country={props.row.values.Currency}>
              {String(props.cell.value)}
            </DescriptionCell>
          );
        },
        Footer: () => {
          return <td />;
        }
      }
]

I want to pass a function as a prop from my main App.jsx file to DescriptionCell component. This function will be used to do some onClick functionality inside DescriptionCell.

How can I do this?

Thanks.

score 28 · Accepted Answer · answered Jul 27 '20 at 18:07

28

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} />
      );
    },
  }

answered Jul 27 '20 at 18:07

Luke Dunscombe

314
3
7

MAJOR KEY right here. Thank you, as this concept had not been clear to me after checking the docs – eagles1283 Apr 21 '21 at 05:31
Nice answer, thank you. I took current row values as; `cell.render("Cell", { status: row.original.status })` I hope so both it is correctly way and benefits to you. `"react-table": "^7.7.0"` – Fatih Mert Doğancan Aug 19 '21 at 14:24

score 6 · Answer 2 · answered Apr 24 '20 at 21:33

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

How to pass a custom prop from App to cell for react-table v7?

2 Answers2