# Saving values When the user commits an edit, the new value is written into the grid's **internal data copy**. The grid does **not** mutate the array you passed in via the `data` prop - it keeps its own working copy so an undo / cancel is possible without touching your state. To round-trip edits back to your source there are two patterns. Live demo - typed editors, dirty tracking, save button: > Live demo: Inline editing - https://svgrid.com/demos/05-inline-editing/ ## Pattern A - `onCellValueChange` (recommended) The wrapper fires `onCellValueChange` whenever an inline edit commits. The payload contains everything you need to forward the edit to a server, update a cached aggregate, or push to an undo stack: ```svelte ``` The wrapper has already written the parsed value into the row by the time the callback fires, so `event.row` reflects the post-edit state. The [`18-cascade-editing` demo](https://svgrid.com/demos/18-cascade-editing/) wires this into a recompute pipeline. ## Pattern B - read a snapshot from the API Useful for batch saves, "click Save to commit" UIs, or diffing against a before-snapshot: ```svelte (api = next)} /> ``` The [`05-inline-editing` demo](https://svgrid.com/demos/05-inline-editing/) shows this pattern with dirty-cell tracking against an `initial` snapshot. ## Sync data both ways Replacing the `data` prop forces the grid to re-read it. To mirror the grid's internal copy back into a parent `$state` so other UI can react, use `onCellValueChange`: ```svelte ``` ## Persisting one cell The event tells you exactly what changed - which row, which column, from what to what. That is enough for a PATCH, and it is why you rarely need to diff the whole row. ```svelte String(r.id)} editable onCellValueChange={(e) => save(e.columnId, e.row.id, e.newValue)} />
    {#each log as line}
  • {line}
    • {/each}
``` ## Rolling back a failed save A save that fails has to put the value back, or the screen quietly disagrees with the server. Holding the old value across the await is the whole trick. ```svelte persist(e.row, e.columnId, e.newValue, e.oldValue)} />

Status: {status} (try an age under 18)

``` ## See also - [Parsing values](https://svgrid.com/docs/help/editing/parsing-values/) - [Validation](https://svgrid.com/docs/help/editing/validation/) - [Undo / redo](https://svgrid.com/docs/help/editing/undo-redo/) --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/editing/saving-values/ . All docs: https://svgrid.com/llms.txt