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.

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

Solution 2

I have had a similar problem and I have solved it as follows:

Cell: (tableInfo) => `$ {tableInfo.data [tableInfo.row.index] .dateToShow}`

where: tableInfo is an object that has among other things the following attributes: {columns: []}, data: [], comlumn: {}, row: [.], cell: {}} and dateToShow is a value that is not in the view, but exists in the data model. If you need to access data that is in the table view you can use the row object, if it is not in the table view you can access the data model using the data array.

Solution 3

in a column you can have:

 {
     Header: "dataProperty",
     accessor: "dataProperty",
     Cell: ({ value, row }) => {
         // here you can use value to render cell 
         // with value of dataProperty
         // or you can access all other row data properties 
         // from row.original
         // for example:
         return row.original.id; 
      }
    },

Comments

[softweave]

My question is a couple of years old and react-table has changed a lot. Which version were you using?

[Rodolfo F Juarez]

The version I am using is 7.0.0. It is correct that it is a couple of years old, but I have not found other solutions, so it seemed convenient to post my experience, in case it is useful for others.

[Faktor 10]

I am using version 7. If you console.log(cellInfo) in the body of the Cell function you can see all the properties. objects, functions returned. It is a lot. The way I got to the original object. I.e. the object you pass in when you define the array of data passed to the useTable hook, is to go cellIinfo.row.original.linkName. I think the API changed a bit between 6 and 7