# ColumnEditorContext

> _Since v0.1.1_

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

```typescript
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` | <code>TRow</code> | Underlying full row object for the active edit. |
| `value` | <code>TValue</code> | Current cell value (mutable only via commit). |
| `field` | <code>keyof TRow &amp; string</code> | Field name being edited. |
| `column` | <code><a href="/grid/api/core/interfaces/columnconfig/">ColumnConfig</a>&lt;TRow&gt;</code> | Column configuration reference. |
| `rowId` | <code>string</code> | Stable row identifier (from `getRowId`). Empty string if no `getRowId` is configured. |
| `commit` | <code>(newValue: TValue) =&gt; void</code> | Accept the edit; triggers change tracking + rerender. |
| `cancel` | <code>() =&gt; void</code> | Abort edit without persisting changes. |
| `updateRow` | <code>(changes: Partial&lt;TRow&gt;) =&gt; void</code> | 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?` | <code>(callback: (newValue: TValue) =&gt; void) =&gt; void</code> | 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?` | <code><a href="/grid/api/core/interfaces/publicgrid/">PublicGrid</a>&lt;TRow&gt; &amp; HTMLElement</code> | 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).

```typescript
// 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.

```typescript
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.

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

**See also:** [`CellRenderContext.grid`](/grid/api/core/interfaces/cellrendercontext.md#grid)

---

## See Also

- [`ColumnEditorSpec`](/grid/api/core/types/columneditorspec.md) for editor specification options