How to access to another column's value from a column in v7 (React-Table)

Viewed 2601

I see in previous versions that you can access it using :

const columns = [
  {
    Header: "Name",
    accessor: "name",
    Cell: (e) => {
      return e.original.name;
    }
  }
];

But in v7 it doesn't work.

1 Answers

In v7 the Cell gets called with a props object. One of the props is the row which has the original property that you are looking for.

{
  Header: 'Name',
  Cell: (props) => {
    return (
      <>{props.row.original.lastName}, {props.row.original.firstName}</>
    );
  }
},

You can destructure the row from the props.

{
  Header: 'Name',
  accessor: 'firstName',
  Cell: ({row, value}) => (
    <span onClick={() => alert(row.original.lastName)}>{value}</span>
  )
},
Related