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