I have my data stored in a temp varibale called myVar (its an array of objects)
I have added a retool table componenet on screen with base data as myVar.
Now the data in myVar can change by changing values in a form present at the top
Rough UI layout
<form fields> -> sticky and always on top
<table component> -> scrollable
When a form field is changed, i calculate a new value for myVar, then i update it using myVar.setValue(newValue). The new changes are the reflected on the table UI but the whole table component refreshes (in UI i see a flicker) and the scroll is taken back to the top of the table. What i would want is for the scroll position to stay where it was after the update happened otherwise it makes it very ugly to use
Hello, i would expect that since setValue() overwrittes the current value of the variable, causing the table to refresh. You can instead use setIn()
variable1.setIn(["name", numberInput1.value-1], textArea1.value)
// Note: I used numberInput1.value-1 because my table is ordered by ID, this can cause problem if ID's are not consecutive or unordered
1 Like
Hi,
thanks for your reply.
I tried using setIn but my table is still getting refreshed.
Possible to share your code?
PS. This is how my ui is setup
one outer table (its data never changes)
another nested table inside it (its rows can be programatically updated)
we'd probably need to see an example of the json object structure and know how deeply nested you need to chance a value in it. like are you just changing the value of the data source for the nested table (i don't think this is what you meant) or are you trying to change a whole column in the nested table or just the value of one cell?
value: {
status: 200,
data: {
key1: "value1",
key2: "value2",
key3: {
key4: "value4",
key5: "value5",
key6: {
key7: ["value7", "another7"]
}
},
key8: "value8"
}
to replace all of data (the object)
.setIn(["data"], newValue)
for key1
.setIn(["data","key1"], newValue)
for key3
.setIn(["data","key3"], newObject)
for key7
.setIn(["data","key3","key6","key7"], newArray)
for the last value in the key7 array
.setIn(["data","key3","key6","key7", indexOf("another7"))
to push a value onto key7
.setIn(["data","key3","key6","key7", variable.data.key3.key6.key7.length)
to overwrite "data"
.setIn(["data"], newObject);
you can't actually use .setIn like you would .set by trying to cheat with: .setIn([], newObject), or i haven't figured it out yet.
1 Like
Thanks for the reply, will share a more detailed working on my app in some time for better understanding
Hi,
Found the reason for table scroll being reset and it was not related to setValue.
I had a filter applied on the table of type "is one of" and the value of the filter was coming from a transformer.
Basically
transformerFIlter -> (inputs = tableDataVar, search Input box value) -> output (a list of IDs)
Then to the table i had added a filter of type "ID" "is one of" transformerFilter.value
so whenever i edited the table contents, the transformer fired and the filter was applied again on the table, causing it to reset the scroll position.
I reorganised my app a bit to make sure the transformer only runs when needed and that solved the scroll issue
Thanks for all your help guys!
