Best way to update table in frontend

Self Hosted Retool
, ,
1

Hi,

I have a table which I want to users to fill out as part of a form. On an update or add row event, this table should not make any queries to a database but rather just update its entries in the fronted. Only once the user hits submit on the form should the table's contents be bulk inserted into the database.
Until now I have been grabbing the table's data in a javascript code block, updating it with the table.recordUpdates() and table.newRow, and using the table.setData() method to update the tables contents. That approach worked but now for some reason it just resets the table's data instead of updating it.
What is the best way to implement this kind of frontend table?

Best,
Sam Shersher

2

This is the above mentioned code by the way. assets_in_transaction_table is the table I am trying to update. This code is called whenever the "save changes" button is pressed.

Function to update table:

function update_data() {
  let data = JSON.parse(JSON.stringify(assets_in_transaction_table.data));
  //update existing records
  let updates = assets_in_transaction_table.recordUpdates;
  for (let ind = 0; ind < updates.length; ind++) {
      let record = updates[ind];
      data[record.row] = JSON.parse(JSON.stringify(record));
  }
  //add new records
  let newRow = assets_in_transaction_table.newRow;
  if (newRow) {
    if (data.map((entry) => entry.asset_id).includes(newRow.asset_id)) {
      utils.showNotification({'title': 'Could not update table', 'description' : 'Tried to insert duplicate assets'})
      return data;
    }
    newRow.row = data.length;
    newRow.transaction_id = add_transaction_form.data.transaction_id;
    data.push(newRow);
  }
  return data;
}

Function called:

let new_data = update_data();
assets_in_transaction_table.setData(new_data);

I have checked the output of the update_data() function and it seems to work as expected. I'm not sure why assets_in_transaction_table.setData() is not actually updating the table

3

Ok looks like I found the solution. The deep copy of the table data using JSON.parse() and JSON.stringify() was the problem. I'm not sure why, maybe it was struggling with the null values.