Skip to content
ZenGrid

Checkbox Editor

Community

Introduction

Section titled “Introduction”

ZenGrid edits boolean cells in two layers:

  • Built-in checkbox editor (Community). Set editor: 'checkbox' on an editable column for a toggle editor. Configure it declaratively through editorOptions — label, allowIndeterminate (tri-state), disabled, and a custom validator. Space toggles; Enter commits; Escape cancels. No license needed.
  • Checkbox column (Enterprise). checkboxEditor() returns a ready-made column that wires the same editor and renders the committed value to match it — a centered read-only checkbox, a text label, or an icon — while letting the column store any encoding (0/1, 'Yes'/'No', …) and keep that shape on commit. One call, no hand-wired renderer.

The built-in editor reads and writes plain booleans. It coerces common truthy encodings on the way in (1/0, 'yes'/'no', 'on'/'off', 'true'/'false') but always commits a boolean — use the Enterprise checkboxEditor() when the column must keep a non-boolean encoding.

Built-in checkbox editor (Community)

Section titled “Built-in checkbox editor (Community)”

Select it on any editable column:

const grid = new Zengrid(mount, {
  columns: [
    { field: 'active', header: 'Active', editable: true, editor: 'checkbox',
      editorOptions: { label: 'Enabled' },
      renderer: new zg.CheckboxRenderer({ disabled: true }) },
  ],
});

editorOptions

Section titled “editorOptions”
Option Type Purpose
label string Text shown next to the editor’s checkbox.
allowIndeterminate boolean Enable a third indeterminate (null) state; Space cycles checked → unchecked → indeterminate.
disabled boolean Render the editor’s checkbox disabled.
validator (value: boolean | null) => boolean | string Custom check on commit; return a string to supply the error message.
checkedText / uncheckedText / indeterminateText string Accessible state text for screen readers.

A failing validator commit is governed by the grid-level editing.invalidEditMode: 'block' (default) keeps the editor open and flags the cell.

Active uses editor:'checkbox' with a label. Double-click a cell to open the editor, press Space to toggle, Enter to commit. The cell shows a read-only zg.CheckboxRenderer. Change the label and re-run.

Checkbox column (Enterprise)

Section titled “Checkbox column (Enterprise)”
Enterprise

checkboxEditor() returns a ColumnDef — drop it straight into columns. It wires the checkbox editor and, by default, renders the committed value to match it, so you don’t hand-wire a renderer:

import { checkboxEditor } from '@zengrid/enterprise';


const grid = new Zengrid(mount, {
  columns: [
    checkboxEditor({ field: 'active', header: 'Active',
      checkedValue: 'Yes', uncheckedValue: 'No' }),
  ],
});

The column keeps its encoding: the editor toggles a boolean, and a generated valueParser writes checkedValue / uncheckedValue back on commit — so a column of 'Yes'/'No' (or 1/0) stays that way in your data.

Options

Section titled “Options”

Everything from the built-in editor (label/disabled/validator) plus:

Option Type Purpose
checkedValue / uncheckedValue unknown The values stored for a checked / unchecked box (default true / false).
tristate boolean Enable the indeterminate state (stored as indeterminateValue, default null).
indeterminateValue unknown The value stored for the indeterminate state.
display 'checkbox' | 'label' | 'icon' How the cell renders (default 'checkbox').
trueLabel / falseLabel / indeterminateLabel string Cell text in 'label' mode.
checkedIcon / uncheckedIcon / indeterminateIcon string Cell glyph in 'icon' mode.
formatDisplay boolean Render the matching display (default true; false keeps your own renderer).

checkboxEditor() renders a centered read-only checkbox matching the editor — no separate renderer. 'Active' stores 'Yes'/'No' strings; 'Beta' stores 1/0. Double-click a cell and toggle: the column keeps its encoding (open the console or inspect data to confirm 'Yes'/'No' and 1/0 are preserved).

Next

Section titled “Next”