Solved: Click event with React Table 7

Question:

This is my Cell data in column:
This is my page
This is how my page looks:
enter image description here
I can delete each row successfully. The problem is that it deletes when I click on any part of the row. But, I want only the button to be clickable not the whole row. I mean, when I click the delete button only, it should delete.

Best Answer:

First, remove the onClick={() => handleClick(row.original.id)} from your row td tag so it become as follows
next, move your on-click handler to the top of the table instance creation
then, remove the last two columns’ definitions (Edit & Delete def) from COLUMNS_ALLLOAN and insert those col definitions into useTable and finally add the onClick event listener to the delete button.
Here is the minimal example:

If you have better answer, please add a comment about this, thank you!

Source: Stackoverflow.com