Skip to content
ZenGrid

Select Editor

Community

Introduction

Section titled “Introduction”

ZenGrid edits single-choice cells in two layers:

  • Built-in select editor (Community). Set editor: 'select' on an editable column for a native <select> dropdown. Configure it declaratively through editorOptions — the options list, allowEmpty, a placeholder, and a custom validator. Enter commits; Escape cancels. No license needed. The cell renders the raw stored value when not editing.
  • Select column (Enterprise). selectEditor() returns a ready-made column that wires the same editor and renders the committed value to match the choice — its human label (display: 'text') or a colored badge (display: 'badge') — so a column that stores 'active' reads Active (or a green pill) instead of the raw code. One call, no hand-wired renderer.

The built-in editor reads and writes the option’s value as-is. When your options map codes to friendly labels ({ value: 'active', label: 'Active' }), the dropdown shows the label but the cell shows the stored code — reach for the Enterprise selectEditor() when the cell should show the label or a badge too.

Built-in select editor (Community)

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

Select it on any editable column:

const grid = new Zengrid(mount, {
  columns: [
    { field: 'status', header: 'Status', editable: true, editor: 'select',
      editorOptions: { options: ['active', 'inactive', 'pending'] } },
  ],
});

editorOptions

Section titled “editorOptions”
Option Type Purpose
options string[] | { value, label }[] The choices offered in the dropdown. A { value, label } shows label but stores value.
allowEmpty boolean Add a leading empty option so the cell can be cleared to null.
placeholder string Text for the empty option (when allowEmpty is on).
validator (value) => boolean | string Custom check on commit; return a string to supply the error message (e.g. require a non-empty pick).

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

Status uses editor:'select' with a string options list. Double-click a cell, pick from the dropdown, press Enter to commit. Add or reorder the options and re-run.

Select column (Enterprise)

Section titled “Select column (Enterprise)”
Enterprise

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

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


const grid = new Zengrid(mount, {
  columns: [
    selectEditor({ field: 'status', header: 'Status', display: 'badge',
      options: [
        { value: 'active', label: 'Active', color: '#22c55e' },
        { value: 'churned', label: 'Churned', color: '#ef4444' },
      ] }),
  ],
});

The column keeps its stored value (the raw code) but the cell shows the option’s label — as plain text (display: 'text', the default) or a colored pill (display: 'badge'). Give each option a color, or omit it and a built-in palette assigns distinct colors in order.

Options

Section titled “Options”

Everything from the built-in editor (options/allowEmpty/placeholder/ validator) plus:

Option Type Purpose
options (string | number | { value, label, color })[] Choices; an object may carry a badge color.
display 'text' | 'badge' Render the committed value as its label (default) or a colored badge.
emptyLabel string Text shown for an empty / unmatched value (default '—').
formatDisplay boolean Render the matching display (default true; false keeps your own renderer).

selectEditor() with display:'text' (the default) renders each committed value as its human label — the column stores the code ('engineer') but the cell reads 'Engineer'. Double-click a cell and pick a new role; the label updates while the stored value stays the code.

Next

Section titled “Next”