Editable Table - best way to allow users to delete one or more rows?

I think I’ve figured out how to allow users to add new rows and edit within the table (it’s a little confusing but I trust it will work once I hook it up to bulk queries?), but unclear on best practice for users to delete rows.

Should I just add a delete button that activates with one or more selections? Or is there a construct within the table to enable this that I’m missing?

Thanks,
Scott.

Hey @scottcressman! The best way to have users delete rows from a table is with a button that triggers a delete query. Your query should look for {{table1.selectedRow.data.id}} or whatever your unique ID is for the record.

You can do this using a standalone button component next to the table, or you can add a custom column (aka calculated column) to the table with the type button. In either case you’ll want the button to trigger your delete query.

Here’s an example using the custom column:

Oh also, you should have your delete query trigger a refresh of the table by using the “on success trigger” section of the delete query:

Great - thank you!

1 Like

Hi. And how to delete multiple selcted rows?

Hi @mpuga! Would something like this work for you?

https://community.retool.com/t/how-to-run-a-rest-api-query-for-each-item-in-an-array-and-return-all-results-together/2352

You'd have a JS query that looks like:

const id_arr = table1.selectedRows.map(row=>row.id) //your array of things to iterate over

const query = deleteRow // your query to trigger for each

const promises = id_arr.map((id) => {
    return query.trigger({
      additionalScope: {
        id_from_scope: id //assignment_id would be available inside {{id_from_scope}} in the target query when run
      }
   });
});

return Promise.all(promises)

And your single Delete query would look like