Edit and save tables data on the fly

App Building
#1

Hi,
Quick Question: I need to build functionality similar to this utility. Where user will first upload a csv, then we will give user option to modify the csv, finally a button to push the data to db.

What I can not do is : how to update cell value, I am showing user file.parsedValues in a table and giving him option to edit. Now how do I update the table's data on the fly like this: Import CSV to PostgreSQL

Thanks

1 Like
#2

Have the same question

#3
  1. take a state, on file's parse event set state's value to parsed value.
  2. Show the value on a table
  3. on tables save event map a js query with this code:
const data = csvDataStoreState.value;

const changesetObject = csvDataTable.changesetObject;
console.log(changesetObject)

_.forEach(changesetObject, function (change, id) {
    // console.log(change, id)
  _.assign(data[id], change);
});
csvDataTable.changesetObject = null;

console.log(data);
csvDataStoreState.setValue(data)
return data
  1. Finally have a query to push to db
#4

CSV_to_PSQL.json (38.6 KB)
Here's a json of the app if anyone needs it.

dummy data:
table-data.csv (1.6 KB)

Thanks

#5

Hey @mpmohi!

Have you seen this doc on writing write queries?

https://docs.retool.com/docs/sql-writes

Given that you're using a Table component, you'd likely be passing in the Table's changesetArray property, which returns an array of row objects of the edited rows!

Let me know if you have any questions.

#6

for final I shifted to legacy table that only have changeSet object. I am generating sql in text and executing them . Here's updated app:
CSV_to_PSQL.json (39.5 KB)

updated with bulk upsert:
CSV_to_PSQL_with_upsert.json (64.1 KB)

thanks.

#7

By final, do you mean this works for you now? :slight_smile:

#8

Yes, this fulfills my client's requirements. Thanks

#9