New: Add New Row Toolbar Button on Table

Hi all! We are thrilled to announce the cloud launch of the add new row toolbar button on Table!

How to add this button to your table

To add this button to your table, go to Add-ons -> Toolbar -> Toolbar Buttons (+) sign:

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.44-edge and 3.47-stable. Please let us know in this thread if you have any comments/suggestions.

Happy building!

– Darya


Very cool - also love the idea of adding multiple rows. For non-editable fields, what gets put into the new row?


@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.

However, if you'd like to be able to edit new row cells that aren't editable, I'd love to hear the use case! We might consider supporting it.

Sounds good. Looking forward to taking it out for a spin!

1 Like

Is there a way to make a column required when creating a row?

1 Like

What is the recommended practice for the save event handler to include the new row?
Something like this?

@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!

1 Like

@w2go This looks good to me. Have you tried it yet? Does it work as expected?

We used to be able to get the input for adding rows by referencing the table.newRow.

With the new table there's only table.newRows and I can't do table.newRows.selector anymore. any tips?

I guess I can do table.newRows['0'].selector, but what happens if I have multiple new rows then?

1 Like

Yes, multiple new rows should be supported.

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.


How can I fix this?

That's right, .newRows[0] would be the correct way to do this now! Since the UI only supports a single new row at this time, you can safely do this.


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.

@kschirrmacher This is a great idea! I have let our product team know about this, and we'll come here with any updates if we do it.


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!

1 Like

@bradlymathews Update: I have implemented a feature that does one of your suggestions:


This should be out next week!

Still don't have timeline yet for you second feature request (onNew).