react-table custom cell component that references several row properties

Question

I need to implement table sorting by column so am rewriting my react table component using react-table's ReactTable component.

One of table cells will contain a link and needs to access more one row property. So far, the link column code looks like:

{
    Header: "Name",
    accessor: "name",
    Cell: cellInfo => (
        <Link className="scenarioDetailLink"
              to={cellInfo.row.linkDestination}
              id={cellInfo.row.linkName}>{cellInfo.row.name}</Link>
    )
},

It results in elements like this:

The generated anchor element is missing id and href properties. What am I doing wrong.

Answer 1

It turned out I needed to use cellInfo.original rather than cellInfo.row. When you provide a Cell renderer you should use cellInfo.original to get at all of your row data (especially if you aren’t showing that data as columns). The row only has what is displayed in the table.