Adding consecutive rows in a table

💬 App Building
1

Hi!

I want to know if it’s possible to consecutively add rows in a table. That is, I want to add a row, click the button to add a new one, and have a new row ready to be filled.

Initially the ‘Add Row’ button would clear any non-saved rows I had if I clicked on it again. I was able to come up with a workaround that allowed me to add any amount of rows I wanted by clicking the button, but then all of them were populated with the same data.

I am wondering if it would be possible to add multiple new rows on one go (so I don’t have to hit on save everytime I want to add a new one), and have those rows be separate from each other.

3

You can consecutively add any number of separate, blank rows in Retool by configuring a custom button or action to append empty rows to your table’s data array, instead of duplicating or resetting data. Make sure the action adds truly empty objects (like {} or objects with empty field values) to your data array each time you click, so each new row is independent and ready for entry. Adjust the logic as needed to fit your table’s expected data structure.

1 Like
4

Hi @Ignacio_Bianchi
Yes — the approach suggested by @Anuragsinh is correct.
Retool absolutely allows you to add multiple new, independent rows consecutively, as long as you append truly blank row objects to the table’s data source instead of re-using or mutating the same object.

:white_check_mark: Why your rows were getting overwritten

Your workaround was likely pushing the same row object repeatedly. When that happens, each new row is just another reference to the same underlying object — so editing one row updates all of them.

:white_check_mark: Correct way to add multiple blank rows

Use your “Add Row” button to append a new empty object each time, for example:

table1.setData([
  ...table1.data,
  {}        // a fresh, empty row every click
]);

Or if your table expects predefined columns:

table1.setData([
  ...table1.data,
  { name: "", email: "", amount: null }   // blank row template
]);

Each click adds a separate row, and none of them overwrite each other.

:white_check_mark: Result

  • You can click Add Row as many times as you want.

  • Every row stays independent, editable, and unsaved until you decide to save.

  • The table never clears previous new rows unless you explicitly reset it.

This aligns perfectly with what @Anuragsinh explained — his solution is the correct way to handle consecutive row additions in Retool.

5

Hi @Ignacio_Bianchi,

Let me know if the above suggestions were helpful to you.

I also wanted to clarify on weather you wanted to add in multiple blank rows (empty row objects) or if you want to add in multiple rows that are each populated with data.

I believe the above responses are assuming you want the first :sweat_smile:

6

Hi @Ignacio_Bianchi,

Just wanted to follow up again to get a better understanding of how you want to add in these empty rows.

@Saurabh_Panja's comment is close, but the issue is that tables do not have a .setValue() method. Instead, you would need to use a place holder variable as the tables data source.

This placeholder variable can be modified with javascript to add in additional 'empty' rows of data.