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

[scottcressman]

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.

[alex]

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:

[scottcressman]

Great - thank you!

[mpuga]

Hi. And how to delete multiple selcted rows?

[victoria]

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

http://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

[mpuga]

Finally did. Share code to put in JS query:

const selectedRecords = table4.selectedRow.data;

const executeQuery = async (register) => {
  const filterValue = register.id_from_scope;
  console.log(filterValue)
  await testSF2.trigger({filterValue});
  console.log(`Excecuted query for sap_id ${filterValue}`);
};

Promise.all(selectedRecords.map(executeQuery))
  .then(() => {
    console.log('All queries correctly executed');
  })
  .catch(error => {
    console.error('Error executing queries:', error);
  });

Where testSF2 is a single Delete query

[Mike_M]

Hi all, our staff is going through and updating old solutions, so I'll be modifying Alex's great solution to work for the newer version of the table component.

The delete query should look for {{ table1.selectedRow.id }} instead. Below is an example of how this might look:

This setup involves the following steps:

1. adding a new column
2. setting it as a button with "Delete" as the value (or whatever text you want on the button
3. create the event handler that deletes the item where the id matches the id of the selected row
4. call the query that populates your table after a successful delete.

If you want to delete multiple rows at once, you can change the table row selection to multiple, and create a button that calls the following query in SQL mode:

DELETE FROM table_name
WHERE id IN ({{ table1.selectedRows.map(ele => ele.id) }});