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.newValue to 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.