How to get React Table Row Data Onclick

Question

Hi I am trying to set up my react app such that when you click on a button in a row item in my react-table the data in that row is passed onto another component. At the moment I am simply trying to console.log the correct data but am unsure of how to pass react-table row data based on click. How can I do this? Thanks

My Dummy data stored in state along with the button (Show Detailed View) which I want to trigger the data passing onclick:

    columns: [
      {
        Header: "First Name",
        accessor: "fname"
      },
      {
        Header: "Last Name",
        accessor: "lname"
      },
      {
        Header: "Employee Group",
        accessor: "egroup"
      },
      {
        Header: "Date of Birth",
        accessor: "dob"
      },
      {
        Header: "",
        id: "id",
        Cell: ({ row }) => (
          <button onClick={e => this.handleShow()}>
            Detailed View
          </button>
        )
      },
    ],
    posts: [
      {
        fname: "gerald",
        lname: "nakhle",
        egroup: "faisbuk",
        dob: "8/10/1995"
      }
    ]

My Call to render the table:

<ReactTable columns={this.state.columns} data={this.state.posts}></ReactTable>

My onclick handler function but im not sure how I can access the table row data I'm after

handleShow(e) {
    console.log(e);
  }

score 6 · Answer 1 · answered Feb 12 '21 at 13:48

In your Table definition :

export function TableCustom({handleShow}) {
    const columns = React.useMemo(() => [{
        Header: 'Action',
        accessor: 'action',
        Cell: props => <button className="btn1" onClick={() => handleShow(props)}>Details</button>,
    },]

    return <ReactTable>;
});

And in your parent component : view the data of the clicked row :

const handleShow = (cell) => {
    console.log(cell?.row?.original);
}

score 5 · Accepted Answer · answered May 11 '19 at 04:11

You will need to add an onClick handler for the row

const onRowClick = (state, rowInfo, column, instance) => {
    return {
        onClick: e => {
            console.log('A Td Element was clicked!')
            console.log('it produced this event:', e)
            console.log('It was in this column:', column)
            console.log('It was in this row:', rowInfo)
            console.log('It was in this table instance:', instance)
        }
    }
}

<ReactTable columns={this.state.columns} data={this.state.posts} getTrProps={onRowClick}></ReactTable>

check this post for more info react-table component onClick event for a column

score 2 · Answer 3 · answered Feb 01 '21 at 10:02

For React-table v7:

Pass a callback prop onRowClicked to the table component,

In your table component call the callback:

...row.getRowProps({
         onClick: e => props.onRowClicked && props.onRowClicked(row, e),
})

In react-table v7, all the spread operator on HTML element that starts with get...Props are props getter, for example:

row.getRowProps(), cell.getCellProps(), column.getHeaderProps(), getTableBodyProps(), getTableProps() etc.. You can pass any more attributes to extend it. for example:

    ...cell.getCellProps({ 
        style: {color: 'red'},  
        onClick: ()=> {}   
    })

this is very helpful as I was adding onClick in the td tag directly and not passing onClick as a prop to row.getRowProps function which was causing unwanted behaviour in the table. — Nabeel Hussain Shah, May 01 '21 at 20:35

score 1 · Answer 4 · answered Oct 24 '22 at 04:30

On @tanstack/react-table v8, you can simply put on your table component:

// this is your table component
<table>
   {table.getRowModel().rows.map((row) => {

     // onRowClick is a custom table prop -> onRowClick: (row: Row<any>) => void
     return <tr onClick={onRowClick(row)}> ... </tr>
   })}
</table>

And then on your component declaration:

<ReactTable data={data} columns={columns} onRowClick={(row) => console.log(row.original)} />

This is useful if you don't want to add another column to put clickable buttons, and just make the rows clickable instead.

score -1 · Answer 5 · answered Dec 13 '22 at 09:51

-1

Try this.
onClick={(e) => {console.log(row)}}

answered Dec 13 '22 at 09:51

Sahil

59
8

score -7 · Answer 6 · answered Feb 26 '20 at 19:56

-7

Also make sure you are binding your function in your constructor, or use the following syntax:

handleShow = (e) => {
    console.log(e);
  }

answered Feb 26 '20 at 19:56

oevillegas

1
1

How to get React Table Row Data Onclick

6 Answers6

Linked