Are we able to update a data row in a Table Component?

Queries and Resources
#1

We are looking to update a data row in a table after an action is fired on it. Is there a way to do this. The goal is to not refetch the entire data set.

In this scenario there is row action which updates the status of the record. Once the request comes back from the database we would like to update the row of data in the table to reflect the new value(s). Is it possible to update a single row through code?

In this particular case we don't want to use row editing functionality of the Table Component as a push-button update is desired, not fiddling around with specific columns of data.

Thank you,

Brett

#2

Upon further investigation it looks like we can get the index of the selected row, which is the row the action is being taken on. So get the table data, update the row based on the index and table.setData() it all back in. Seems clean enough. Is this the advisable approach?

Thank you,

Brett

#3

Hi @brettski! That sounds like a good approach

If you're using a Custom Column (button column type), you also have access to the magic variable i, so you could trigger a query updating the corresponding row (tableName.data[i])

1586×1380 205 KB

1 Like
#4

I have a modal for each row, and I want to change one of the rows when you close the modal. I'm using @brettski approach, but setData resets the other fields. STR:

I edit an editable column A. Then I open the modal. The query that runs when it closes changes the row (by accessing my_table.data[my_table.selectedRow.index]) and then sets the data again (my_table.set__data(mytable.data)). By doing that, I lose the changes at column A.

#5

Are you saying that it resets the data in the other fields in that row? It isn't clear to me what is being changed you are not expecting, other fields in the row, or other rows in the table.

What is your modal doing, changing one/many fields?

#6

The problem is that all data of the table gets reset.

This is an example of the code that I run when I close the modal. Essentially, I want to do a manual change on some data of the table:

const data = table1.selectedRow.data
data.b = 'wadus' // this won't work

const allData = table1.data
allData[1].b = '2wadus'
table1.setData(allData)
modal1.close()

When I run setData, I would expect (1) only the 2wadus value to change, and (2) the "save" button to be there.

Here's a video that shows the behaviour: video1549149374.mp4 - Google Drive

Thanks!

#7

As you see the 2wadus is being updated in the table data. My guess on why the other values change back is because changed data is still in a 'dirty' state, not saved back to the table data. The columns you updated weren't saved to the table data prior to grabbing the data in the modal code.

#8

Yep. That "dirty state" can be read at table.recordUpdates, so merging both table data and that would lead to the final state of the table to be correct. But if you do that, the save button is gone, because setting the data resets the dirty state.

We can workaround that by not relying on the save button, but it feels like this is becoming too complicated for something that looked simple, so maybe my approach is just wrong. Open to suggestions :slight_smile:

#9

I am not sure what you are trying to achieve with the modal, etc.

#10

@juanignaciosl I am facing the exact same problem. I want to update a column based on the value of another editable column i.e. if I change the tag in colA to Approved, I want colB to be populated with the amount found in colC - colB is editable so I can change the "default" if need be.

Only setData allows to update, by actually replacing the whole rowset. Not efficient as this creates a copy in memory instead of truly updating only the rows affected.

One must also ensure to include the changeSet in the data to be updated, otherwise you lose them as you have noted. Lastly to your point, the save/cancel buttons are removed as a reset is not a change (anymore).
So you really are forced to update the source instead and re-read the query for every update. Very inefficient and the bulk update cannot be used.

No reaction from Retoolers so I guess it is what it is.

#11

I would like to do the same (update one row after a query without fetching the entire dataset) in the new tables, but there is no documentation how. Does setData() work in the new tables?