Search code examples
react-tablereact-table-v7

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


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.


Solution

  • 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>
      )
    },