How to add delete button/icon to a table when row selected?

Ignition
1

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?

2

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.

3
  • 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.

4

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

5

I often do that as well, but this table doesn’t have room around it for a separate delete button :confused:

6

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.

7

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

8

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