Edit and save tables data on the fly

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


1 Like

Have the same question

  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;

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

return data

  1. Finally have a query to push to db

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)


Hey @mpmohi!

Have you seen this doc on writing write queries?


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.

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)


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

Yes, this fulfills my client's requirements. Thanks