Auto update table cell

💬 App Building
1

Say in my table I have 3 colum A(number), B(number), C (number result of A*B) .

now i want to give user option to change value of A and B from the table (editable cell) . I want if they update A / B then C should be automatically update in the ui .

C is disabled in the table , I can not make it updated based on the user's changed value.

I can get the value with custom js and calculate (triger on change and match with selected row) but just can't find any way to update C cell.

Any suggestion is welcomed.
Thanks

2

Hello @mpmohi,

We can achieve the behavior you want (auto-updating column C = A * B when user edits A or B) using a custom column with a calculated value.

  1. Use a custom column for C
  • Open your table component settings.
  • Click “+ Add column” > Custom Column
  • Set the column’s value using JavaScript:
{{ currentSourceRow.column_A * currentSourceRow.column_B }}
  1. Screenshots
    image
    image1385×735 47.3 KB

2 Likes
3

Agreed! If you need it to change before saving the changes, you'd have to add a reference to the table's changeset in your custom logic. You can have ternary logic that checks if there are any values in the table's changeset array, and if so, use those values instead of currentSourceRow

2 Likes
4 
var selectedRow = formatTable.selectedRow;
var changedRows = formatTable.changesetArray;

console.log("Selected row:", selectedRow);
console.log("Changeset array:", changedRows);

var updatedRow = changedRows.find(row => row.id == selectedRow.id);

// Check if at least one of height or width is present in the updated row
var heightChanged = updatedRow?.hasOwnProperty('height');
var widthChanged = updatedRow?.hasOwnProperty('width');

if (heightChanged || widthChanged) {
  // Use updated value if changed, otherwise fallback to original
  var height = heightChanged ? parseFloat(updatedRow.height) : parseFloat(selectedRow.height);
  var width = widthChanged ? parseFloat(updatedRow.width) : parseFloat(selectedRow.width);

  if (!isNaN(height) && !isNaN(width)) {
    console.log("[updateSQ] height:", height, "width:", width);

    var sq = (height * width) ;
    console.log("Calculated square:", sq);

    if (updatedRow) {
      updatedRow.square_mm = sq;

      formatTable.setChangesetArray(
        changedRows.map(row => row.id == selectedRow.id ? updatedRow : row)
      );
    }
  } else {
    console.log("Skipping calculation: height or width is not a valid number");
  }
} else {
  console.log("No height or width change detected. Skipping square_mm calculation.");
}

@WidleStudioLLP as @Tess pointed we can not use current row's value for the changes because they are not yet saved.

The shared code checks if we have any change on changeset and use those updated values to calculate and show column c (without saving)

2 Likes