How to get row information on click event in react-table?

Question

I want to add a onClick event to each row of the table and i want to obtain the row information on click. Use case :- To edit a row in a table.

Answer 1

Checkout this code
https://react-table-onlick-get-row-info.stackblitz.io

https://stackblitz.com/edit/react-table-onlick-get-row-info?file=src/MyTable.js

Answer 2

Thank you for sharing this helpful tutorial on getting row information on click events in react-table! I've been working with react-table for a while, and one approach that has worked for me is using the "getTdProps" function to attach an onClick event handler to each table cell.
Here's an example:
const tableColumns = [
{
Header: "Name",
accessor: "name"
},
{
Header: "Age",
accessor: "age"
},
{
Header: "Actions",
Cell: ({ row }) => (
<button
onClick={() => handleRowClick(row)}
>
View Details
</button>
)
}
];

const handleRowClick = (row) => {
console.log("Row data:", row.original);
// You can do whatever you need with the row data here
};

<ReactTable
data={tableData}
columns={tableColumns}
getTdProps={(state, rowInfo, column) => {
return {
onClick: () => handleRowClick(rowInfo)
};
}}
/>
This approach allows you to access the full row data when the user clicks on any cell in the row. I hope this helps! If you're interested in learning more about using react-table, then check out this React Table blog for more resources.
https://www.copycat.dev/blog/react-table/