Add another row value in Tooltip

Question

I have ReactTable which uses ReactTooltip and shows tooltip for that row value in tooltip. but I want to show another row's value in that tooltip. How I can do that? My code is:

import * as React from 'react'
import ReactTooltip  from 'react-tooltip'


     column=  [
           {
            Header: "Test1",
            accessor: "test1",
            minWidth: 150, 
          }, {
            Header: "Test2",
            accessor: "test2",
            minWidth: 120, 
            Cell: (props:any) => (
              <div>
                <span data-tip={true}  >
                  {props.value}
                </span>
                <ReactTooltip place="right"  >
                  //Here I want to show value of Test1
                </ReactTooltip>
              </div>
            ),
          }
        ]

In I want to show Test1 value from another row. Please advise me about it.

Answer 1

The Cell method you are using is not just exposing the value, but there is a row property where you can access all the values of that row. You can access the values in a row like

      {
        Header: "First Name",
        accessor: "firstName",
        Cell: ({ row,value }) => {
          console.log(row.values);
          return <b>{row.values["lastName"]}</b>;
        }
      },

I have an example set up under this URL.

https://codesandbox.io/s/dank-brook-wd1go?file=/src/App.js