# Add a edit and delete buttons in each row in a table **URL:** \ **Category:** Ignition\ **Tags:** scripting, perspective\ **Created:** [April 8, 2024, 1:21pm UTC](https://forum.inductiveautomation.com/t/add-a-edit-and-delete-buttons-in-each-row-in-a-table/88508 "2024-04-08T13:21:38Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![Rachana\_Rudra](https://avatars.discourse-cdn.com/v4/letter/r/53a042/32.png) [@Rachana\_Rudra](https://forum.inductiveautomation.com/u/Rachana_Rudra)\ **Post date:** [April 8, 2024, 1:21pm UTC](https://forum.inductiveautomation.com/t/add-a-edit-and-delete-buttons-in-each-row-in-a-table/88508/1 "2024-04-08T13:21:38Z")
![Screenshot (172)](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/5/655cf3714cb93d76ee73e8493beb7f95e70100f2.png) Hi everyone, I have a table which represents data from a query. I added edit and delete buttons for each row in my table and also added checkbox for edit and delete along with hidden checkboxes that in the above table. I also want to do some actions with these buttons. When a user clicks the edit button in each table row, it will trigger that checkbox also that change the button turns green. Thank you for your time! ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [April 8, 2024, 1:29pm UTC](https://forum.inductiveautomation.com/t/add-a-edit-and-delete-buttons-in-each-row-in-a-table/88508/2 "2024-04-08T13:29:58Z")
You didn't ask a question! Where are you stuck? ---
**Author:** ![Rachana\_Rudra](https://avatars.discourse-cdn.com/v4/letter/r/53a042/32.png) [@Rachana\_Rudra](https://forum.inductiveautomation.com/u/Rachana_Rudra)\ **Post date:** [April 8, 2024, 4:04pm UTC](https://forum.inductiveautomation.com/t/add-a-edit-and-delete-buttons-in-each-row-in-a-table/88508/3 "2024-04-08T16:04:43Z")
I have done UI part but I don't know how to write script for edit and delete buttons for each row in a table. I want script for this action with these buttons. When a user clicks the edit button in each table row, it will trigger that checkbox also that change the button turns green. ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [April 8, 2024, 4:11pm UTC](https://forum.inductiveautomation.com/t/add-a-edit-and-delete-buttons-in-each-row-in-a-table/88508/4 "2024-04-08T16:11:02Z")
You use the `system.db` functions to script the updates to your table. You probably just need, > **[system.db.runPrepUpdate | Ignition User Manual](https://docs.inductiveautomation.com/docs/8.1/appendix/scripting-functions/system-db/system-db-runPrepUpdate)** > > Runs a prepared statement against the database, returning the number of rows that were affected. I don't know what you're doing with hidden checkboxes but I would be quite sure that you don't need them. ---
**Author:** ![Rachana\_Rudra](https://avatars.discourse-cdn.com/v4/letter/r/53a042/32.png) [@Rachana\_Rudra](https://forum.inductiveautomation.com/u/Rachana_Rudra)\ **Post date:** [April 9, 2024, 3:21pm UTC](https://forum.inductiveautomation.com/t/add-a-edit-and-delete-buttons-in-each-row-in-a-table/88508/5 "2024-04-09T15:21:40Z")
I have a table. I added edit and delete buttons for each row in my table and also added checkbox for edit and delete in the above table ![Screenshot (173)](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/b/2bc4151d19615162d6dd3bfba8b8dea3be37d7d2.png) I also want to do some actions with these buttons. When a user clicks the edit button in each table row, it will trigger that checkbox also that change the button turns green. I have to write a script on the `onClick` event of our buttons in a table. write a logic for trigger that checkbox on clicking I will get the value 0 to 1 on trigger that checkbox. ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [April 9, 2024, 3:33pm UTC](https://forum.inductiveautomation.com/t/add-a-edit-and-delete-buttons-in-each-row-in-a-table/88508/6 "2024-04-09T15:33:14Z")
> I added edit and delete buttons for each row in my table ... That is standard practice for delete. For edit it is normal to edit in the cell or open a popup to edit a whole record (row). > ... and also added checkbox for edit and delete in the above table. That is not standard practice, unnecessary and confusing to users. > When a user clicks the edit button in each table row, it will trigger that checkbox also that change the button turns green. > I have to write a script on the `onClick` event of our buttons in a table. write a logic for trigger that checkbox on clicking I will get the value 0 to 1 on trigger that checkbox. Don't do any of that. For editing, either: - Allow the user to edit in cell by setting the `column.x.editable : true` or - Use the button to open a popup form with the row data in it. The popup would have a Save and Cancel button and the Save button would only be enabled when the data meets the validation criteria. The Save button would update the database and then refresh the table's data binding. For deleting, - Have the button open a popup with the database rowId as a parameter. Offer Delete and Cancel buttons and if Delete is selected then issue the SQL command to delete row using the id in the WHERE clause. Then refresh the table data binding. ---
**Author:** ![Rachana\_Rudra](https://avatars.discourse-cdn.com/v4/letter/r/53a042/32.png) [@Rachana\_Rudra](https://forum.inductiveautomation.com/u/Rachana_Rudra)\ **Post date:** [April 10, 2024, 6:58am UTC](https://forum.inductiveautomation.com/t/add-a-edit-and-delete-buttons-in-each-row-in-a-table/88508/7 "2024-04-10T06:58:45Z")
![Screenshot (174)](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/a/7a8da79787a9afa7274c6018fbbbb1daa29581f1.png) In this view i have added Edit button and checkbox but I hidden that checkbox I want to do some actions with this button. When a user clicks the edit button it will trigger that checkbox also that change the button turns green. I have to write a script on the `onClick` event of our button. write a logic for trigger that checkbox on clicking I will change the value 0 to 1 on trigger that checkbox. ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [April 10, 2024, 7:54am UTC](https://forum.inductiveautomation.com/t/add-a-edit-and-delete-buttons-in-each-row-in-a-table/88508/8 "2024-04-10T07:54:23Z")
You already said all of that in post #5. ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [April 10, 2024, 8:02am UTC](https://forum.inductiveautomation.com/t/add-a-edit-and-delete-buttons-in-each-row-in-a-table/88508/9 "2024-04-10T08:02:36Z")
I prefer having buttons on the side, like this: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/7/8707587660f8b41cb6ea86e29166759edf15e94c.png) 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. ---
**Author:** ![srinivasan\_s](https://avatars.discourse-cdn.com/v4/letter/s/eb9ed0/32.png) [@srinivasan\_s](https://forum.inductiveautomation.com/u/srinivasan_s)\ **Post date:** [May 21, 2024, 9:28am UTC](https://forum.inductiveautomation.com/t/add-a-edit-and-delete-buttons-in-each-row-in-a-table/88508/10 "2024-05-21T09:28:40Z")
Hey pascal, can you please guide how you have added those button and functionality. A Kind request! ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [May 21, 2024, 7:01pm UTC](https://forum.inductiveautomation.com/t/add-a-edit-and-delete-buttons-in-each-row-in-a-table/88508/11 "2024-05-21T19:01:22Z")
Implement the add/delete/edit logic on the table's scripts (either directly in message handlers, or you put them in the component's methods and have the message handlers call those methods.) Then, have the buttons open popups. Each popup will have the necessary form components to gather the data you need. For example, if you have a table like the default ones with cities, their respective countries, and the population, you'll need a field for each. Maybe the country is already in another table and you want to selected it with a dropdown, maybe it's not and you just want a simple text input field... That's for you to decide. Then have a button to validate the new record. This button will gather the data from the input components, format it however necessary, and pass it to `system.util.sendMessage` as its payload. Now, you have a table that manages its own operations, and popups that can ask it to perform those operations through message handlers. I suggest passing the messages names as parameters to the popup, so the popup never needs to know exactly what it's used for. In some cases (delete comfirmation for example) it will allow you to reuse the same popup for every confirmation you'll need. In the specific case of the screenshot I showed, I believe the data source was a database. So the table's methods would pretty much just grab the data received in the payload of the message, maybe make some validity checks on it, then pass it to named queries that would insert/delete/update one or several tables, then use `refreshBinding` to refresh the data. I don't think the refresh button you see in the screenshot has any actual use. ---
**Author:** ![srinivasan\_s](https://avatars.discourse-cdn.com/v4/letter/s/eb9ed0/32.png) [@srinivasan\_s](https://forum.inductiveautomation.com/u/srinivasan_s)\ **Post date:** [May 22, 2024, 4:44am UTC](https://forum.inductiveautomation.com/t/add-a-edit-and-delete-buttons-in-each-row-in-a-table/88508/12 "2024-05-22T04:44:36Z")
Thank you pascal, Will try the same