Text Editor

Community

Introduction

The Text Editor is ZenGrid’s default cell editor: a single-line <input> that opens on double-click (or Enter), commits on Enter / Tab / click-away and cancels on Escape. Any editable column falls back to it, and you can select it explicitly with editor: 'text':

const grid = new Zengrid(mount, {
  columns: [
    { field: 'name', header: 'Name', editable: true, editor: 'text',
      editorOptions: { placeholder: 'Enter a name…', maxLength: 24 } },
  ],
});

Everything about the editor is configured declaratively through the column’s editorOptions — you never construct the editor yourself.

editorOptions

Option	Type	Purpose
type	'text' | 'number' | 'email' | 'url' | 'tel' | 'password'	Underlying <input> type — swaps the native control/keyboard. Default 'text'.
placeholder	string	Placeholder shown when the input is empty.
maxLength	number	Hard character cap enforced by the browser.
min / max	number	Numeric bounds (with type: 'number'), checked on commit.
pattern	string	Regex the value must match on commit.
required	boolean	Reject an empty value on commit.
validator	(value) => boolean | string	Custom check; return a string to supply the error message.
selectAllOnFocus	boolean	Select the existing text when the editor opens (default true).
className	string	Class on the input element for custom styling.
stopOnBlur	boolean	Commit when the input loses focus (default true).

Validation

pattern, required, min/max and validator all feed the editor’s isValid() check. What happens to a failing commit is governed by the grid-level editing.invalidEditMode: 'block' (default) keeps the editor open and flags the cell, 'revert' restores the old value, 'commit' accepts it but marks the cell.

Try it live

Enable & configureInput typePattern, required & validator

CodeDemoSplit

ResetRun ⌘⏎

Name uses editor:'text' with a placeholder and a 24-char maxLength. Double-click Name, clear it to see the placeholder, and try typing past 24 characters — the browser caps it. Region sets selectAllOnFocus:false, so opening it drops the caret instead of selecting the text. Change maxLength to 8 and re-run.

Next

• Number Editor — a dedicated numeric editor with step and precision.
• Select Editor — pick from a fixed list.
• Edit Components — build your own editor when the built-ins aren’t enough.
• Validation — invalidEditMode and how a failing value is handled.