Inline Editing in Apex Grid
The Apex grid supports inline editing in cell or row mode. Editing is opt-in at the grid level and at the column level — only columns marked editable: true participate.
Enabling editing
grid.editing = {
enabled: true,
mode: 'cell', // 'cell' | 'row'
trigger: 'doubleClick', // 'click' | 'doubleClick'
};
Mark editable columns:
{
key: 'name',
editable: true,
}
Configuration
type EditingConfiguration = {
enabled: boolean;
mode?: 'cell' | 'row';
trigger?: 'click' | 'doubleClick';
};
In cell mode, exactly one cell is in edit at a time. In row mode, all editable cells in the active row enter edit together; commitEdit() flushes all pending values for the row in one event cycle.
Programmatic API
await grid.editCell(rowIndex, columnKey);
await grid.commitEdit();
await grid.cancelEdit();
const cell = grid.editingCell; // currently-edited cell, if any
const row = grid.editingRow; // currently-edited row in row mode
Events
- cellValueChanging — cancellable; fires before a cell's value is committed. Read
event.detail.oldValue/event.detail.newValueto validate. - cellValueChanged — fires after a successful commit.
- rowEditStarted — row mode only; fires when the active row enters edit.
- rowEditEnded — row mode only; fires when the active row commits or cancels.
Built-in editors
Editor templates come from the column type. Built-in editors for string, number, boolean, select, rating, and date types are provided. Custom column types register their own editor templates against the column-type registry.
Validation
To validate inline edits, listen to cellValueChanging and call event.preventDefault() to reject the new value. The grid will keep the cell in edit and the editor input focused so the user can correct the entry.