Skip to content
ZenGrid

Search Select Editor

Enterprise

Introduction

Section titled “Introduction”

The built-in select editor is a native <select> — great for a short list of plain values. When a column’s choices deserve more — a color per option, an icon, a one-line description, or so many values that you need to search — reach for richSelectEditor().

richSelectEditor() returns a ready-made ColumnDef that opens a floating, searchable dropdown of richly-rendered rows (color swatch or glyph + label + description), navigable with the keyboard, and renders the committed value back into the cell to match the choice — its label (display: 'text') or a colored badge (display: 'badge'). One call, no hand-wired editor or renderer.

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


const grid = new Zengrid(mount, {
  columns: [
    richSelectEditor({ field: 'status', header: 'Status', display: 'badge',
      options: [
        { value: 'active',  label: 'Active',  color: '#22c55e', icon: '🟢', description: 'Paying customer' },
        { value: 'churned', label: 'Churned', color: '#ef4444', icon: '🔴', description: 'Cancelled' },
      ] }),
  ],
});

Double-click a cell (or press Enter) to open the dropdown. Type to filter, ↑/↓ to move the highlight, Enter or a click to pick, Escape to cancel. The column keeps its stored value (the raw code); only the display changes.

Options

Section titled “Options”
Option Type Purpose
options (string | number | { value, label?, color?, icon?, description? })[] The choices. An object may carry a swatch/badge color, a leading icon glyph, and a description line.
display 'text' | 'badge' Render the committed value as its glyph + label (default) or a colored badge.
searchable boolean Show the mini search box (default true). Set false for a plain pick list.
searchPlaceholder string Placeholder for the search box (default 'Search…').
filter (option, query) => boolean Custom search matcher (default: case-insensitive over label + description).
allowEmpty boolean Add a leading row that clears the cell to null.
emptyLabel string Text for the clear row / an unmatched value (default '—').
width number Popup width in px (defaults to the cell width, min 220).
maxListHeight number Max height of the scrolling list in px (default 240).
validator (value) => boolean | string Custom check on commit; return a string to supply the error message.
formatDisplay boolean Render the matching display (default true; false keeps your own renderer).

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

richSelectEditor() opens a searchable dropdown with a color swatch and a description per option. Double-click a Country cell, type to filter (try 'ja'), use ↑/↓ then Enter to pick. The cell shows the label; the stored value stays the code.

When to reach for it

Section titled “When to reach for it”
  • Built-in select — a short list of plain values, no license. The cell shows the raw stored value.
  • Enterprise selectEditor() — a native <select> plus a matching label/badge display in one call.
  • Enterprise richSelectEditor() — a searchable, richly-rendered popup (swatches, glyphs, descriptions, keyboard nav) for longer or visually-rich option lists, plus the matching display.

Next

Section titled “Next”
  • Validation — invalidEditMode and how a failing value is handled.
  • Saving values — parse and persist what an editor commits.