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

Queries and Resources
1

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.

2

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:

image
image3602×2036 620 KB

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:

image
image890×244 10.7 KB

3

Great - thank you!

1 Like
4

Hi. And how to delete multiple selcted rows?

5

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

6

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

1 Like