Skip to content
ZenGrid

Editing Overview

Community

Introduction

Section titled “Introduction”

Cell editing is built into @zengrid/core — there’s no plugin to install. Mark a column editable and give it an editor, and users can change values in place:

const columns = [
  { field: 'name',    header: 'Name',    editable: true, editor: 'text' },
  { field: 'revenue', header: 'Revenue', editable: true, editor: 'number' },
  { field: 'status',  header: 'Status',  editable: true, editor: 'select',
    editorOptions: { options: ['Active', 'Trial', 'Churned'] } },
];

editable: true makes the column writable; editor picks which editor opens. A column with editable: false (or no editor) is read-only.

Starting and stopping an edit

Section titled “Starting and stopping an edit”

An edit opens when the user double-clicks a cell, or selects it and presses Enter. While editing:

Key Effect
Enter / Tab Commit the value and close the editor.
Click another cell Commit (clicking away saves, like a spreadsheet).
Escape Cancel — discard the input and restore the original value.

Provided editors

Section titled “Provided editors”

Set editor to one of the built-in types; pass per-editor settings through editorOptions.

editor Opens editorOptions
'text' A single-line text box maxLength, placeholder, …
'number' A numeric input min, max, step
'select' A dropdown options: string[] or { value, label }[]
'date' A date picker date format / range options
'checkbox' A boolean toggle label, allowIndeterminate

Each provided editor has its own page under Provided Cell Editors with the full option list. You can also pass a custom CellEditor instance to editor — see Edit Components.

Driving edits from code

Section titled “Driving edits from code”

grid.editing is the programmatic handle — the same lifecycle the interactive handlers use, so you can wire editing to a button, shortcut, or workflow:

Method Effect
grid.editing.startEdit({ row, col }) Open the editor on a cell (view coordinates).
grid.editing.commitEdit() Commit the open editor’s value (as Enter would).
grid.editing.cancelEdit() Discard the edit (as Escape would).
grid.editing.isEditing() Whether an editor is currently open.
grid.editing.getActive() The cell being edited, or null.

Subscribe to the lifecycle with grid.on(...):

grid.on('edit:start',  ({ cell, value }) => {});
grid.on('edit:commit', ({ cell, oldValue, newValue }) => {});
grid.on('edit:cancel', ({ cell, value }) => {});
grid.on('edit:end',    ({ cell, value, cancelled }) => {});

When a commit fails an editor’s validation, the grid’s editing.invalidEditMode ('block' | 'revert' | 'commit') decides what happens — covered in Validation.

Try it live

Section titled “Try it live”

Each tab is a different editing setup. Double-click a cell (or use the buttons), edit the code, and watch the grid update.

Double-click Name, Role, Revenue or MRR — or select a cell and press Enter. Enter or click away saves; Escape cancels. Region has no editor, so it stays read-only.

Next

Section titled “Next”