How to get React Table Row Data Onclick

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

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 startswith get...Props are props getter, for example:

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

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

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);}