# How to add delete button/icon to a table when row selected? **URL:** \ **Category:** Ignition\ **Created:** [June 8, 2022, 4:56pm UTC](https://forum.inductiveautomation.com/t/how-to-add-delete-button-icon-to-a-table-when-row-selected/60505 "2022-06-08T16:56:16Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [June 8, 2022, 4:56pm UTC](https://forum.inductiveautomation.com/t/how-to-add-delete-button-icon-to-a-table-when-row-selected/60505/1 "2022-06-08T16:56:16Z")
I’d like to add a delete icon (material/close) to a table row when it’s selected, but not sure the best method. I thought I could use a View for the table rows which would have the columns and the delete icon within it, and only show the icon when the row is selected. However, determining if it’s selected is harder than it sounds. I’m thinking I would need to use messaging to fire a message handler whenever the table selection changes to toggle a selected state inside of each of the row views… which doesn’t sound awfully efficient. Is there something simple I’m overlooking? ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [June 8, 2022, 5:40pm UTC](https://forum.inductiveautomation.com/t/how-to-add-delete-button-icon-to-a-table-when-row-selected/60505/2 "2022-06-08T17:40:27Z")
I’m not sure there is anything you’re missing. Typically I would have a Delete row(s) button individual of the table, allowing for multi-selection. ---
**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:** [June 8, 2022, 5:45pm UTC](https://forum.inductiveautomation.com/t/how-to-add-delete-button-icon-to-a-table-when-row-selected/60505/3 "2022-06-08T17:45:46Z")
- Create the view with the icon and add custom properties `row` and `selectedRow`. - Bind the icon’s `visible` property to `{view.params.row} = {view.params.selectedRow}`. - Add the column to the table. Set the field to “Actions” (or whatever). - Set the column `render: view`. Select the viewPath. - Add `selectedRow` to the viewParams and bind it to `this.props.selection.selectedRow`. (The `row` parameter will be automatically passed in.) I think that’s the lot. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [June 8, 2022, 10:58pm UTC](https://forum.inductiveautomation.com/t/how-to-add-delete-button-icon-to-a-table-when-row-selected/60505/4 "2022-06-08T22:58:01Z")
I probably should have mentioned that the data is coming from a query which is filtered using a where clause in the query, so I can’t bind the selected row to a key value in each of the data rows which was my first thought. Instead of a binding though, I could use a script transform on the `props.data` to add the selection data into each of the rows. To avoid the query running every time someone selects a row, I could bind the query to a custom prop, then bind to that prop in the props.data and apply the transform there. I did have the messaging working but it’s a bit average and will run a script for every single row - not good! I’ll move over to this instead, cheers ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [June 8, 2022, 10:59pm UTC](https://forum.inductiveautomation.com/t/how-to-add-delete-button-icon-to-a-table-when-row-selected/60505/5 "2022-06-08T22:59:12Z")
I often do that as well, but this table doesn’t have room around it for a separate delete button 😕 ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [June 9, 2022, 2:58am UTC](https://forum.inductiveautomation.com/t/how-to-add-delete-button-icon-to-a-table-when-row-selected/60505/6 "2022-06-09T02:58:38Z")
> [@nminchin](#): > > I could bind the query to a custom prop, then bind to that prop in the props.data and apply the transform there. Definitely do it this way. Though you could also add the key in the query, nothing prevents you from selecting a constant value as a column. I would still probably do it in a script transform. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [June 9, 2022, 4:25am UTC](https://forum.inductiveautomation.com/t/how-to-add-delete-button-icon-to-a-table-when-row-selected/60505/7 "2022-06-09T04:25:04Z")
The only reason I would separate the query from the transform is so that the query doesn’t have to run each time the selection is changed, otherwise i’d just combine the query and the transform ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [June 9, 2022, 6:25am UTC](https://forum.inductiveautomation.com/t/how-to-add-delete-button-icon-to-a-table-when-row-selected/60505/8 "2022-06-09T06:25:18Z")
> [@Transistor](#): > > - Create the view with the icon and add custom properties `row` and `selectedRow`. > - Bind the icon’s `visible` property to `{view.params.row} = {view.params.selectedRow}`. > - Add the column to the table. Set the field to “Actions” (or whatever). > - Set the column `render: view`. Select the viewPath. > - Add `selectedRow` to the viewParams and bind it to `this.props.selection.selectedRow`. (The `row` parameter will be automatically passed in.) There also is rowIndex which should work with filters. edit: nvm its rowIndex that only checks the visilble rows, row should work then no? idk which one you need. but it doesnt rly matter if you filter or not, the selected row prop should match either rowIndex or row