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`	`unknown` & `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).

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;
};