Adding multiple rows in a table before "save changes"

Hi Retool Team,

I want to have a tool that allows users to input multiple rows of record before they is same changes to trigger the bulk add query.

To records to be added have three columns:

  1. Charge name
  2. Charge currency
  3. Charge amount

My problem:

  • the JSON form component limits the user to add one row of record at a time
  • the "On Row Add" feature of a table component also limits the user to add one row of record at a time (see print screen)
  • the users want to type in multiple rows of records, before hitting "Save Changes"

Question: How can this requirement be done?

1 Like

Hi Oliver, The table component currently only supports adding one row at a time. This sounds like a good case to use List View option in Retool. You would first create a list locally in an app and then upload it into your table. I have included a screen shot below and attached a JSON file here we used to create the view - feel free to adapt it for your purposes!

1 Like

Thanks Grace. That works.

Not very versed with JS and listView - with your current method, after I input data in the three rows and when I click “Add Raw”, the number of rows increase to 4 but all input data is cleared? I guess it’s something to do with the Row Keys of the listView component but how can I execute that exactly, please?

Similar question to remove rows, i.e. rather than remove row + clear all input, can we only remove a row but keep all the input.


In this case, Grace is using a temporary state to store the values of each row, and the components reference those values in their default value settings like this:

{{tempState.value[i].description}} Using this code to update the values when inputs are changed, triggered in the textinput’s “On blue run” setting:
var startLength = 1 // change to list of data if you are pre-filling the lsitview with items from something
if( triggeredById == “addRow”){
return += 1
} else if (triggeredById == “removeRow” ){
return += -1
} else{
return startLength

Hi @alex-w and @grace ,

I'm wondering how to use removeRow button inside the lisView to remove a specific row. For example, when clicks the removeRow button on the second row, the expected result is: the second row is removed, while the first and third rows' values are preserved and the third row now becomes the second row.

My approach to the listView is similar to the discussion here. The length of the listview is controlled by a temp state tempNumRows and the values of each row are stored in another temp state tempData. There's an addRow button triggering two js queries

  • to increment the temNumRows
    tempNumRows.setValue(tempNumRows.value += 1)

  • to keep the tempData updated

    tempArray = [];
    for (let i = 0; i < tempNumRows.value; i++) {
    let el = {
    type: select1[i].value,
    note: textInput1[i].value

I'm figuring out how to manipulate the removeRow button. I have tried to associate a js query tempData.setValue(tempData.value.spice(i, 1)) but it is not working.

Thank you in advance for your time and help :innocent: