ColumnEditorContext

Context object provided to editor factories allowing mutation (commit/cancel) of a cell value.

The commit and cancel functions control the editing lifecycle:

Call commit(newValue) to save changes and exit edit mode
Call cancel() to discard changes and exit edit mode

Example

const myEditor: ColumnEditorSpec = (ctx: ColumnEditorContext) => {
  const input = document.createElement('input');
  input.value = ctx.value;
  input.className = 'my-editor';

  // Save on Enter, cancel on Escape
  input.onkeydown = (e) => {
    if (e.key === 'Enter') {
      ctx.commit(input.value);
    } else if (e.key === 'Escape') {
      ctx.cancel();
    }
  };

  // Access row data for validation
  if (ctx.row.locked) {
    input.disabled = true;
  }

  return input;
};

Properties

Property	Type	Description
`row`	`TRow`	Underlying full row object for the active edit.
`value`	`TValue`	Current cell value (mutable only via commit).
`field`	`keyof TRow & string`	Field name being edited.
`column`	`ColumnConfig<TRow>`	Column configuration reference.
`rowId`	`string`	Stable row identifier (from `getRowId`). Empty string if no `getRowId` is configured.
`commit`	`(newValue: TValue) => void`	Accept the edit; triggers change tracking + rerender.
`cancel`	`() => void`	Abort edit without persisting changes.
`updateRow`	`(changes: Partial<TRow>) => void`	Update other fields in this row while the editor is open. Changes are committed with source `'cascade'`, triggering `cell-change` events and `onValueChange` pushes to sibling editors.
`onValueChange?`	`(callback: (newValue: TValue) => void) => void`	Register a callback invoked when the cell’s underlying value changes while the editor is open (e.g., via `updateRow()` from another cell’s commit).
`grid?`	`PublicGrid<TRow> & HTMLElement`	The grid element that owns this editor.

Property Details

updateRow

Update other fields in this row while the editor is open. Changes are committed with source 'cascade', triggering cell-change events and onValueChange pushes to sibling editors.

Useful for editors that affect multiple fields (e.g., an address lookup that sets city + zip + state).

// In a cell-commit listener:
grid.on('cell-commit', (detail) => {
  if (detail.field === 'quantity') {
    detail.updateRow({ total: detail.row.price * detail.value });
  }
});

onValueChange

Register a callback invoked when the cell’s underlying value changes while the editor is open (e.g., via updateRow() from another cell’s commit).

Built-in editors auto-update their input values. Custom/framework editors should use this to stay in sync with external mutations.

const editor = (ctx: ColumnEditorContext) => {
  const input = document.createElement('input');
  input.value = String(ctx.value);
  ctx.onValueChange?.((newValue) => {
    input.value = String(newValue);
  });
  return input;
};

grid

The grid element that owns this editor.

Use to access public grid API from custom editors — e.g. grid.registerExternalFocusContainer(panel) so the grid treats focus inside a portal-rendered overlay (Autocomplete, date picker, color picker) as “still inside the editor” and does not exit row edit on click. Mirrors CellRenderContext.grid for renderers.

Always populated when the editor is mounted via the grid’s editing pipeline. Optional in the type for backwards compatibility with factory functions written against the original signature.

const editor: ColumnEditorSpec = (ctx: ColumnEditorContext) => {
  const panel = document.createElement('div');
  document.body.appendChild(panel);
  ctx.grid?.registerExternalFocusContainer(panel);
  // ...
};

See also: CellRenderContext.grid