Cell and row editing
Start editing by double-clicking a cell or using the keyboard.
Options
Changes below update the Grid and code immediately.
Double-click a Quantity cell and enter the desired number.
View code
Sample data included in the code · 6 rows
Usage guide
#Edit quantities and statuses directly in the table. Assign suitable editors, such as numeric inputs or selection lists, per column.
Try it yourself
- Start quantity editing
Double-click a Quantity cell and enter the desired number.
- Apply or cancel
Press Enter to apply. Start another edit and press Escape to cancel it.
- Compare editor types
Edit Status and choose In progress, Complete, or Under review. Values are selected differently from numeric quantities.
Edited and calculated cells update. Inspect previous and new values in cellValueChanged.
Order ID and Total are not directly editable in this example. Successful editing changes browser data; connect server saving separately.
Useful terms
- editable
- A setting determining whether users can edit a cell.
- editor
- The editing UI type, such as a numeric input or selection list.
API reference
#Other properties1
| Attribute / Property | Type / Default | Description |
|---|---|---|
| editType | 'cell' | 'fullRow'Default: 'cell' | PE-ROWEDIT-WIRING-01 — AG's `editType`. Under `'fullRow'` the ROW is the transaction: opening any editor on a data row opens the session, every editor commit STAGES its cell into it (no write, no per-cell event yet), and the row commits atomically — grid-level Enter on the session's row, editing a DIFFERENT row (blur-policy commit), or `stopRowEdit('commit')`. Grid-level Escape on the session's row cancels the whole row with zero writes. Editors paint one cell at a time (the row is the transaction, not a simultaneous paint — the recorded v1 scope). |
Events6
| Events | Detail type | Description |
|---|---|---|
GridCellEditingRequestedDetail | Fires when editing is requested for an editable cell. | |
GridCellEditingCancelledDetail | Fires when active edit mode is cancelled. | |
GridCellEditingCommittedDetail | Fires when an active edit transaction commits. | |
SyGridRowValueChangedEventDetail | exactly once per COMMITTED row-edit stop . | |
SyGridRowEditStartEventDetail | ADR-024 — a row session opened (interactive entry or the API). | |
SyGridRowEditStopEventDetail | ADR-024 — the session resolved (committed / cancelled / rejected), once per stop. |
Methods7
| Method / Arguments | Return type | Description |
|---|---|---|
| rowId: GridRowId | Promise<boolean> | open a full-row edit session for a DISPLAYED data row resolved by stable id. Editable columns = resolved column defs with `editable: true` (the grid's structural editability — the same gate every interactive edit path uses). Group markers, detail panels and unloaded placeholder rows carry no stable data id, so they cannot reach this API; the boundary table still guards them in-core. |
| reason?: 'commit' | 'cancel' | Promise<SyGridRowEditReport> | stop the live row edit. `'commit'` (default) routes through the core's `'api'` commit row; `'cancel'` through the `'escape'` cancel row . A committed stop applies its writes through the single-authority route, then emits `rowValueChanged` exactly once AFTER the per-cell events . A rejected stop keeps the session open with pending intact (the recovery law). |
| colId: string, value: unknown | Promise<boolean> | ADR-024 — stage ONE cell value into the live row session (the public half PE-ROWEDIT-01 recorded missing: start/stop existed, nothing could put writes in). Refusals are the core's own (`no-row-edit`, `column-not-editable`) and stage NOTHING. The write itself lands at the row commit through the single-authority route — staging emits no event. |
Promise<EditTransaction | null> | Read the active edit transaction. | |
Promise<boolean> | Commit the active edit transaction. | |
Promise<boolean> | Cancel the active edit transaction. | |
Promise<
GridMountedComponentLookup<
GridEditorInstance<GridData, unknown, unknown>,
GridEditorParams<GridData, unknown, unknown>,
HTMLElement
>
| null
> | Return the active lifecycle editor lookup, including its generation. |
ColumnDef17
| ColumnDef | Type / Required | Description |
|---|---|---|
PRO OPTION | GridCellEditorDeclaration<TData, TValue, TContext>Optional | Named or direct lifecycle editor. Built-in editors continue to use `editor`. |
booleanOptional | Whether cells in this column can be edited. | |
PRO OPTION | 'text' | 'number' | 'date' | 'select' | 'checkbox' | 'textarea' | 'autocomplete' | 'largeText'Optional | Built-in editor type. |
GridCallback<[ValueParserParams<TData, TValue, TContext>], TValue>Optional | Arc review 239-242 — parse a clipboard-pasted display string into THIS column's cell value (AG `valueParser` parity). When present it fully replaces the built-in auto-detection (`detectPastedValue`); a throw falls back to the raw string. `editor: 'text'` columns skip auto-detection even without a parser (identifiers stay strings). | |
GridCallback<
[ValueSetterParams<TData, TValue, TContext>],
boolean | void
>Optional | Optional host-owned write path. Return false to reject the edit. A true or void result accepts the mutation; the callback must apply `newValue` synchronously so transaction/event/audit/undo surfaces observe one value. | |
ReadonlyArray<{ value: unknown; label: string; disabled?: boolean }>Optional | Option list for `editor: 'select'`. | |
number | Date | stringOptional | Inclusive lower bound for number/date editors. | |
number | Date | stringOptional | Inclusive upper bound for number/date editors. | |
numberOptional | Multiple-of-step constraint for number editors. | |
numberOptional | Display formatting hint for number editors. | |
booleanOptional | When true, an empty number/date editor commits as `null`. | |
booleanOptional | Select a name to inspect its type contract. | |
'date' | 'iso'Optional | Commit shape for date editors. | |
numberOptional | Initial visible rows for textarea editors. | |
numberOptional | Auto-grow cap for textarea editors. | |
numberOptional | Visible columns (character width) for the large-text popup editor. | |
numberOptional | Max character length for the large-text popup editor. New input is capped here (ag-grid `agLargeTextCellEditor` parity, default 200); a seed value already longer is NOT truncated (no silent data loss) but warns once. Set explicitly to `0` for no limit. |
Explore each feature
Learn when to use each feature and how to configure it. Each guide identifies live examples and features you connect in your app.