I want to be able to save changes to the table itself! (NO DB)

[Waseem_Malik]

Problem: I need to save the the changes locally to the editable table itself when I hit the "save changes" button. This simple feauture is no where to find!

Use case:
A user can import an excel file, press on the validate button which will validate that the dates are valid and the provider is a value from the enum. If the validate fails then the user should be able to manually change the data in the table and at the end if everything checks out, the user should be able to save the data to the database.
PS: the validation is according to what the database accepts as input

I have tried using the temporary state but that doesn't work, it doesn't get updated with the latest data. Also removing and adding to that would be difficult. Here is an example:

I have also tried {{table1.recordUpdates}} but this only gives the updated records back as an array. I need the complete table with the changed data. One would assume this should be a function in Retool but it isn't. You have 2 options {{table.data}} or {{table.recordUpdates}}, nothing that gives the full table back with the changed values.

If someone could help me with this, it would be appreciated

[Tess]

Hi @Waseem_Malik

Thanks for reaching out! As you alluded to, the pending changes are only available in .recordUpdates & .changeSet

You should be able to use some JS to combine them though. Here's one possible solution --

[Waseem_Malik]

Thanks for the reply.
I see you working with id's to merge the rows and I know my example also had an exmaple with id's but this won't be the case in the main app that I'm working. There the user should be able to import an excel file, so there is no Id column there. The records will be inserted in the db, so they will get their own id's by using auto increment.

But maybe I could use the row index to map it? I will have to try that out...

Don't you think this simple functionality should be built in the table component itself?
I really need this feauture for the app to work.

[Waseem_Malik]

I found a solution with the help of @JayL
The solution was really simple, if you knew what transformers were used for.
Step 1:
Make a transformer

Code:

let changes = Object.entries({{table1.changeSet}});
let data = {{table1.data}};

changes.forEach(change => {
  data[change[0]] = _.merge(data[change[0]], change[1]);
})

return data;

Step 2:
Make an event behind the "save changes" button of a table component like this:

Result:

[Wissam]

@Waseem_Malik I added the same code and procedure that you did, but when i put save changes all the data disappears I am using a legacy table

[Tess]

Hi @Wissam,

Can we see how the transformer is evaluating right before you click save changes? I'd also be happy to check out an export of your app if thats something you're able to share!

[Wissam]

@Tess

and I deleted the function in "Only run when" to empty and also I get nothing

[Tess]

Hi @Wissam can you preview the transformer1 and show us what the result is? Can you also share a screenshot of failed_charges_daily_ops.actionType?