Searchable selection editor PRO
Search and select among many choices to enter cell values.
Define user-facing product names and stored product codes. Names and codes can differ.
View code
Sample data included in the code · 6 rows
Usage guide
#Use this when many choices, such as product codes, make a simple dropdown difficult to scan. Search to narrow candidates before selecting.
Integration steps
- Prepare labels and stored values
Define user-facing product names and stored product codes. Names and codes can differ.
- Connect the editor
Assign a Rich Select editor and options to the target column. See ColumnDef for the declaration format.
- Verify search, selection, and cancellation
Edit a cell, search part of a name, and select a value. Check the stored value after Enter commits or Escape cancels.
A searched candidate is selected and applied to cell data.
The current Status cells use ordinary select editors, not searchable Rich Select. Rich Select is a Pro feature.
Useful terms
- Option label / value
- The user-facing name and the actual stored value.
- cellEditor
- A setting specifying the column's cell editing UI.
Using this feature in your product requires the Pro runtime and a valid license.
API reference
#ColumnDef2
| ColumnDef | Type / Required | Description |
|---|---|---|
PRO OPTION | GridCellEditorDeclaration<TData, TValue, TContext>Optional | Named or direct lifecycle editor. Built-in editors continue to use `editor`. |
PRO OPTION | 'text' | 'number' | 'date' | 'select' | 'checkbox' | 'textarea' | 'autocomplete' | 'largeText'Optional | Built-in editor type. |
Explore each feature
Learn when to use each feature and how to configure it. Each guide identifies live examples and features you connect in your app.