How can I use Select dropdowns in a Table column and save multiple rows at once?

💬 App Building
1

Hi Retool community,

I'm trying to build a form using the Table component where:

  1. Some of the columns (like category, material, unit) should be editable using Select dropdowns.
  2. After filling in multiple rows, I want to save all the rows to my database at once (bulk insert).

I’ve looked around but couldn’t find a clear tutorial on how to set this up.
I’m especially confused about how to bind the Select values per row and how to gather all the table data properly for insertion.

Any guide, example app, or tutorial would be greatly appreciated. Thank you in advance!

2

Hi @krsailer82,

I'm not sure if I understand your use case correctly. Am i correct in saying that:

  • You have one form connected to a table
  • I assume the form will pre-populate based on the selected Row of the table, right?
  • If so,it seems you want users to modify several rows before submitting, right?

Let me know if this is accurate or if the flow is different (for example there is no form component and you're only editing the table directly and multiple rows are being edited)

3

I'll breakdown this problem into 2 parts.

1. Editable Select Dropdowns Using "Tag" Columns

  • In your Table component, go to the columns section.
  • For fields like category, material, or unit, set the column type to Tag.
  • Then, in the Tag values, map your options like this:
queryCategories.data.map(cat => ({
  label: cat.name,
  value: cat.id
}))
  • Make sure these columns are set to be editable.

Note: Even though it's called "Tag", it works like a dropdown when editing a single value per cell.

2. Get Table Data

  • Use table.recordUpdates to get only edited rows.
  • Or use table.data to get all rows (useful if users are entering multiple new rows at once).

3. Bulk Insert into Database

You can either:

  • Use a Bulk Insert query directly, or
  • Create a JavaScript transformer like:
const rowsToInsert = table.changesetArray;
return rowsToInsert.map(row => ({
  category_id: row.category,
  material_id: row.material,
  unit: row.unit,
  // any other fields...
}));

Then pass {{ rowsToInsert }} into your database insert query.