Row Action "DEL" always deletes the last row instead of the clicked one

[krsailer82]

Hi Retool Community,

I'm having trouble getting a Row Action button (DEL) to delete the correct row from a dynamic table.

Here's my setup:

• I have a table component (table_entry_inven) with 5 manually added rows.
• The data source of the table is a temporary variable (table_data_var), and the user can edit each row directly.
• I added a Row Action button labeled DEL to remove the clicked row.

This is the script I’m currently using for the DEL action:

js

const newData = [...table_data_var.value];
newData.splice(table_entry_inven.selectedRow, 1);
table_data_var.setValue(newData);

Issue:
When I click the DEL button on the middle row (not the first or last), it deletes the last row instead of the one I clicked.

I'm not sure if selectedRow is the right property here, or if there’s a better way to get the clicked row index in a Row Action context.

---

My goal:
When the DEL button is clicked on a specific row, I want that exact row to be removed from table_data_var.value.

Any help or guidance would be greatly appreciated. Thank you!

[krsailer82]

When I click the DEL button on the second row (the one with data) in this screenshot, the third row gets deleted instead.

[WidleStudioLLP]

Hi @krsailer82 ,

I saw your question and wanted to help clarify the issue!

You're almost there — the problem is that you're referencing table3.selectedRow, which returns the selected row object, not its index in the array. When modifying an array like sample_users_variable, you need the index to remove the correct item.

Solution: Use table3.selectedDataIndex instead.

Here’s an example script that deletes the selected row from the sample_users_variable array:

const newData = [...sample_users_variable.value];
const selectedIndex = table3.selectedDataIndex;

if (selectedIndex !== undefined && selectedIndex >= 0) {
  newData.splice(selectedIndex, 1);
  sample_users_variable.setValue(newData);
} else {
  utils.showNotification({ title: "Error", description: "No row selected", type: "error" });
}

Demo (video + screenshot):

[krsailer82]

Thank you so much for your helpful answer!
I'm still a beginner, so I tried the script you shared, but unfortunately, it's still not working as expected.

I'm getting the "No row selected" error — even when I manually select a row before triggering the action.

I also added a console log, and it seems like selectedRow is returning undefined.
Is it possible that I'm approaching this the wrong way from the beginning?

Any guidance would be greatly appreciated. Thanks again!

[WidleStudioLLP]

@krsailer82 ,

Have you updated the variable and table names to match your setup and used the exact script I shared? For reference, here’s the code again:

const newData = [...sample_users_variable.value]; // your_variable_name.value
const selectedIndex = table3.selectedDataIndex; // your_table_name.selectedDataIndex

if (selectedIndex !== undefined && selectedIndex >= 0) {
  newData.splice(selectedIndex, 1);
  sample_users_variable.setValue(newData); // your_variable_name.setValue(newData)
} else {
  utils.showNotification({ title: "Error", description: "No row selected", type: "error" });
}

If you're still encountering the same issue, export your app as a JSON file and send it over. I'll take a look and help identify where the problem lies.

[krsailer82]

I was about to upload the JSON file, but it looks like I don't have permission to upload files in this thread. Is there another way I could share it with you?

The variable and table names are correct.

[WidleStudioLLP]

Hey @krsailer82,
If you're unable to upload files directly, you can upload them to Google Drive, Dropbox, or any other similar service.

[krsailer82]

Thank you even though I know you're busy.
I'll leave the Google Drive link here.
I'd appreciate your help when you have time.

https://drive.google.com/drive/folders/1J7zSSM8MQWmUt3CvGoiLji1t9uUGuXmI

[WidleStudioLLP]

Hey @krsailer82 ,

I've uploaded the updated app JSON (with the new JS query) to your shared Google Drive folder. Just to share here as well, below is the JavaScript query I updated in the app:

// Step 1: Start with original table data from the variable
let mergedData = [...table_data_var.value];

// Step 2: Apply all changes from changesetArray into the merged data
table_entry_inven.changesetArray.forEach((change, index) => {
  mergedData[index] = { ...mergedData[index], ...change };
});

// Step 3: Set merged data back into the variable (table data source)
table_data_var.setValue(mergedData);
  //  Clear changesetArray by resetting the table data source
 table_entry_inven.clearChangeset();

// Step 4: Get the selected index
const selectedIndex = table_entry_inven.selectedDataIndex;

// Step 5: Validate and remove the row at the selected index
if (
  selectedIndex !== undefined &&
  selectedIndex >= 0 &&
  selectedIndex < mergedData.length
) {
  // Remove the row
  mergedData.splice(selectedIndex, 1);

  // Step 6: Update the variable again with row removed
  table_data_var.setValue(mergedData);

  table_entry_inven.setData?.(mergedData); // use only if table supports setData()

  utils.showNotification({
    title: "Deleted",
    description: `Row at index ${selectedIndex} has been removed.`,
    type: "success",
  });
} else {
  utils.showNotification({
    title: "Error",
    description: "No valid row selected to delete.",
    type: "error",
  });
}

Let me know if you run into any issues while reviewing or testing it out.