Hi, I'm trying to build a simple workflow using Retool's Table component:
- Show one or more empty rows in the table
- Let the user manually input or select values (e.g., Category, Material, etc.)
- Allow multiple rows to be filled in
- When the user clicks a "SAVE" button, all entered rows should be collected and saved at once
However, I’m having trouble getting the user’s input from the table at the time of the button click.
What I’ve tried:
table.datatable.recordUpdates- Binding a variable to the table and reading from it
- Considering
Change cell events, but I would prefer to save only on button click, not real-time
What I need:
What’s the correct or recommended way to get all currently entered rows from a Table component when the user clicks a button? I want to collect them and run an insert query.
Thanks in advance!
Hi @krsailer82 - when you say
- When the user clicks a "SAVE" button, all entered rows should be collected and saved at once
does the table have existing rows that you want to merge with new or edited rows and cells...? Or is all the data 'new' data that the user has entered?
Hi @turps808, thanks for the follow-up!
In my case:
- The table is initially empty (or has only a few pre-filled rows as templates).
- The user is expected to fill in multiple rows manually (e.g., category, material, quantity...).
- Some rows might be completely new, and some may be edits to the initial empty templates.
- I only want to collect and save all the rows that the user has edited or filled in — but only when they click the SAVE button.
- I do not want to trigger any save in real time or per cell edit.
I believe the property you are looking for on the table is the changesetArray or the changesetObject. This would be used in your save/update query as {{ table.changesetArray }}. If you are processing new rows (via an "add row" event) there is a different property called newRows which you will need to handle.
