# Data updates

Replace rowData when receiving a complete query result. For partial changes, pass add, update, and remove to applyTransaction. Updates match through getRowId, not display positions.

Canonical: https://grid.syidax.com/docs/features/data-updates/

<a id="understand"></a>

## How it works and when to use it

Transaction returns describe what actually happened. Inspect updated, rejected, and other results instead of assuming requested values were applied. Browser changes do not imply server persistence.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

- [Installation and integration · Shared sample data](https://grid.syidax.com/docs/guides/getting-started.md)

<a id="example-1"></a>

## Example 1. Replace the full query result

Replace the list with orders queried for another period. Pass the array returned by your app's query API all at once.

```javascript
const response = await fetch('/api/orders?month=2026-10');
if (!response.ok) throw new Error('Query failed');
const rows = await response.json();
grid.rowData = rows;
```

Verify the result: Only the new query result appears. /api/orders is an example endpoint your app must implement; if its response is an object, extract the actual rows array.

<a id="example-2"></a>

## Example 2. Increase one order's quantity

Change the first order's quantity from 10 to 20. Pass a new row object that includes the other fields too.

```javascript
const row = grid.rowData.find(row => row.id === 'ORD-0001');
if (row) {
  const result = await grid.applyTransaction({ update: [{ ...row, quantity: row.quantity + 10 }] });
  console.log(result.updated, result.rejected);
}
```

Verify the result: The matching order's quantity increases by 10. A total column calculated with valueGetter recalculates from the new quantity.

<a id="example-3"></a>

## Example 3. Handle additions and removals together

Remove a cancelled order while adding a new one. Find the removal target in the current data before passing it.

```javascript
const cancelled = grid.rowData.find(row => row.id === 'ORD-0002');
const result = await grid.applyTransaction({
  add: [{ id: 'ORD-0004', product: 'Delta', quantity: 5, price: 100 }],
  remove: cancelled ? [cancelled] : []
});
console.log(result.added, result.removed, result.rejected);
```

Verify the result: Additions and removals appear in the same result report. Batching high-frequency incoming changes at intervals also reduces call volume.

<a id="pitfalls"></a>

## Combining features and troubleshooting

Do not assume how missing fields in update objects are handled; spread the existing row and override changed values. Manage request order so stale responses cannot overwrite recent edits.

For large changes, collect the delta instead of reassigning all rowData for every row. Server row models have their own transaction APIs, distinct from client transactions.

<a id="related-api"></a>

## APIs used by this feature

- [rowData](https://grid.syidax.com/docs/options/rowData.md) — The source row array for the table. Pass a new array to replace a complete query result, or use applyTransaction for partial updates.
- [columnDefs](https://grid.syidax.com/docs/options/columnDefs.md) — Defines column data fields, headings, sizes, visibility, and editing. Include column groups to create multi-level headers.
- [defaultColDef](https://grid.syidax.com/docs/options/defaultColDef.md) — Defaults shared by all columns. Override individual values in columnDefs for specific columns.
- [field](https://grid.syidax.com/docs/columns/field.md) — Required field path for reading a value from source rows. Use the data key, not a display heading.
- [colId](https://grid.syidax.com/docs/columns/colId.md) — Stable column ID for APIs and state persistence. Keep it unchanged when headings change.
- [headerName](https://grid.syidax.com/docs/columns/headerName.md) — User-facing column heading. Can differ from the source data key.
- [applyTransaction](https://grid.syidax.com/docs/methods/applyTransaction.md) — Adds, updates, and removes source rows by stable ID. Inspect results separately from app server saving.
- [rowDataChanged](https://grid.syidax.com/docs/events/rowDataChanged.md) — Emitted when source row data changes. Different from a change in display sorting.
- [cellValueChanged](https://grid.syidax.com/docs/events/cellValueChanged.md) — Emitted when an actual cell value changes. Use the row, field, and before/after values for saving or activity history.

<a id="next"></a>

## Related reading

- [How rows, columns, and IDs relate](https://grid.syidax.com/docs/guides/concepts.md)
- [Connect results and events](https://grid.syidax.com/docs/guides/data-event-access.md)
- [Explore in Features](https://grid.syidax.com/grid/data-updates) — The guide describes which interactions are available to try.