Add a edit and delete buttons in each row in a table

I prefer having buttons on the side, like this:

image

It avoids polluting the data in the table, and it's easier to implement.

Then you can just use the table's .props.selection property to do whatever you want.
If the data comes from a database, remember to have the id in an invisible column.

This particular one opens a popup when clicking on the 'add' and 'edit' button, then sends the data back to the table through messages.
The delete one also opens a confirmation popup.

I do use a variant on this where you can edit the table directly by clicking in the cells, with 4 buttons to add/delete rows and columns, then a save and a cancel buttons to save the whole thing at once, but I find it's usually less user-friendly.

6 Likes