Skip to content
ZenGrid

Saving Values

Community

Introduction

Section titled “Introduction”

Once an edit is parsed, it has to be saved. By default ZenGrid writes the committed value straight back into your row and refreshes the cell — no configuration needed. Two hooks let you take it further:

  • React to a save — the edit:commit event fires after every change, so you can persist to a server, recompute a total, or log an audit trail.
  • Own the save — a column’s valueSetter replaces the default write, so you can run a side effect, or update other columns in the same row.
grid.on('edit:commit', ({ cell, oldValue, newValue }) => {
  // persist however you like — REST, GraphQL, a store action…
  api.patch(rowId(cell.row), { [field(cell.col)]: newValue });
});

Taking over the write with valueSetter

Section titled “Taking over the write with valueSetter”

When assigning the value isn’t enough — you need to update a derived sibling column, or run a save yourself — set a valueSetter on the column:

{
  field: 'revenue',
  editable: true,
  editor: 'text',
  valueParser: ({ newValue }) => Number(newValue),
  valueSetter: ({ newValue, setValue }) => {
    setValue('revenue', newValue);            // save this column
    setValue('mrr', Math.round(newValue / 12)); // and derive a sibling
  },
}

It runs on commit after valueParser, with these params:

Field What it is
newValue The committed (already parsed) value.
oldValue The cell’s value before the edit.
data The source row — mutate it directly if you prefer.
setValue(field, value) Write any column in this row by its field.
row / field The display row index and this column’s field.

Return false to signal nothing changed and skip the repaint; return anything else (or nothing) and the grid refreshes. Writing a sibling column repaints the visible rows so the derived value shows immediately.

Try it live

Section titled “Try it live”

No valueSetter here — the edit writes into the row the normal way. The edit:commit handler is where you'd persist: the readout logs a fake PATCH for every change. Edit a Name/Role/Revenue/MRR cell and commit to see it fire with oldValue → newValue.

Next

Section titled “Next”