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?

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!https://docs.retool.com/docs/working-with-listviews

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.

Thanks

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 listviewLength.data += 1
} else if (triggeredById == “removeRow” ){
tempState.setValue(tempState.value.slice(0,tempState.value.length-1))
return listviewLength.data += -1
} else{
return startLength
}