You can then edit the new row like you would any other row in the table once you press the + button.
How to use this new row (newRows property)
All changes to your new row will show up in the table property called newRows:
You can then access this property in your Save Actions event handler and use it however you’d like.
Quick Q&A
What cells can users edit?
Users can only edit cells in the new row if their respective columns are editable as well.
Why is the property newRows plural?
Eventually, we’d like to add the ability to add multiple rows at once, like a spreadsheet almost. This is not yet supported. However, we wanted to make sure this property was future proofed for when we implement that feature in the future, so we decided to make it plural. (Please let us know if this is something you’d like! We’d love to hear from you.)
We have launched this feature to 100% of cloud users, and hope to get it out to on-prem version 3.46-edge and 3.52-stable. Please let us know in this thread if you have any comments/suggestions.
@jg80 It depends on how you set up your Save actions event handler. The newRows prop will not have any information about the non-editable cells, so in your Save actions event handler, if you'd like those cells to have values, you'll have to handle it there.
@OlliePartly -- currently, there is not a way to make it required. But, I think this is a great idea! I have made a note of it internally, and I'll update you if we make any progress on that feature!
The old Table component had two separate methods for saving, one for saving new (adding a row), and the other for saving changes (updating a row).
The new one doesn't have one for saving changes, we have two separate queries, one for adding and one for updating. But now I can't bind the update query to a "Save changes" event handler.
Yeah, the new table has a unified event handler via the "Save actions" add-on. Could you use a Run script action and check whether newRows is populated to determine which query to run? Something like:
Would you consider adding a 'default new row value' to the column config to handle non-editable columns? For instance I have an app where I need to split records off of others and change some attributes while others need to stay consistent with the split row. I'd love to be able to select a row and hit +, using {{table.selectedRow.column}} as the default for the new row's unchanged values.
First off, fantastic! this will save me some dev time for sure. And the future option for adding multiple rows should open up some nice UX options.
However, I would definitely want to let the user enter data into a non-editable cell. In the old Table for cases where I wanted the user to be able to add an entire record, not just the editable ones I gave them, I was forced to create a separate form to do so. Of course that was SOP with the new table until you added this feature.
In the old table, rather than a new form, I was sometimes forced to make a column editable so that the user could add that value in a new record, but I would not otherwise want them to be able to edit the value later, at least not in this particular table.
One option is to have a new flag for each column called Show When New or something like that. It could default to true for any editable columns.
I also highly recommend having an onNew event in addition to the onSave event. Making me check .newRows to see whether I am running a Bulk Update or an Insert query is not compatible with the Retool Way IMO.
@bradlymathews These are all great points! Thanking you for spending the time to write out your thoughts + solutions (saves us some product thinking time haha). I've noted them internally, and will update here with any updates!
