Overview
Web Grid provides 7 built-in editor types plus a custom editor option for specialized input needs.
Editor Types
Text Editor
Standard text input for string values.
| Option | Type | Default | Description |
|---|---|---|---|
maxLength | number | - | Maximum character count |
placeholder | string | - | Placeholder text when empty |
pattern | string | - | Regex pattern for validation |
inputMode | 'text' | 'numeric' | 'email' | 'tel' | 'url' | 'text' | Virtual keyboard hint on mobile |
editStartSelection | 'selectAll' | 'cursorAtStart' | 'cursorAtEnd' | 'selectAll' | Cursor position when entering edit mode |
Text Editor
Number Editor
Numeric input with min/max constraints and step control.
| Option | Type | Default | Description |
|---|---|---|---|
min | number | - | Minimum allowed value |
max | number | - | Maximum allowed value |
step | number | 1 | Increment/decrement step |
decimalPlaces | number | - | Fixed decimal places |
allowNegative | boolean | true | Allow negative numbers |
Number Editor
Checkbox Editor
Boolean toggle for true/false values. Can be customized to use different true/false values.
| Option | Type | Default | Description |
|---|---|---|---|
trueValue | unknown | true | Value to store when checked |
falseValue | unknown | false | Value to store when unchecked |
Checkbox Editor
Select Editor
Dropdown selection from a list of options.
| Option | Type | Description |
|---|---|---|
options | EditorOption[] | Static list of options |
loadOptions | (row, field) => Promise<EditorOption[]> | Dynamic options loader |
optionsLoadTrigger | 'immediate' | 'oneditstart' | 'ondropdownopen' | When to load dynamic options |
allowEmpty | boolean | Allow null/empty selection |
emptyLabel | string | Label for empty option (default: "-- Select --") |
valueMember | string | Property for value (default: "value") |
displayMember | string | Property for display text (default: "label") |
Select Editor
Combobox Editor
Searchable dropdown - type to filter options. Combines text input with dropdown selection.
| Option | Type | Description |
|---|---|---|
options | EditorOption[] | Options to filter from |
searchMember | string | Property for searchable text (falls back to displayMember) |
iconMember | string | Property for icon/emoji |
subtitleMember | string | Property for subtitle/description |
groupMember | string | Property for grouping options |
disabledMember | string | Property for disabled state |
Combobox Editor
Date Editor
Date picker with configurable format and constraints.
| Option | Type | Description |
|---|---|---|
minDate | Date | string | Minimum selectable date |
maxDate | Date | string | Maximum selectable date |
dateFormat | string | Display format: 'YYYY-MM-DD', 'DD.MM.YYYY', etc. |
outputFormat | 'date' | 'iso' | 'timestamp' | Storage format: Date object, ISO string, or timestamp |
Date Editor
Autocomplete Editor
Async search dropdown - type to trigger server search. Ideal for large datasets.
| Option | Type | Default | Description |
|---|---|---|---|
onSearchCallback | (query, row, signal?) => Promise<EditorOption[]> | - | Async search function (required) |
initialOptions | EditorOption[] | [] | Options to show before searching |
minSearchLength | number | 1 | Min characters before search triggers |
debounceMs | number | 300 | Debounce delay in milliseconds |
multiple | boolean | false | Allow multiple selections |
maxSelections | number | - | Max items when multiple=true |
Autocomplete Editor
Custom Editor
Take full control with a custom editor callback.
Context Type
Custom Editor
Shared Option Properties
These properties work with select, combobox, and autocomplete editors:
| Option | Type | Description |
|---|---|---|
valueMember | string | Property for value (default: "value") |
displayMember | string | Property for display text (default: "label") |
searchMember | string | Property for searchable text |
iconMember | string | Property for icon/emoji |
subtitleMember | string | Property for subtitle |
groupMember | string | Property for grouping |
disabledMember | string | Property for disabled state |
onselect | (option, row) => void | Called when option is selected |
renderOptionCallback | (option, context) => string | Custom HTML rendering for options |
noOptionsText | string | Text when no options found (default: from grid.labels) |
searchingText | string | Text while searching (autocomplete only, default: from grid.labels) |
Custom Option Rendering
Callback Alternatives
Instead of member properties, you can use callbacks for more control:
| Callback | Type | Overrides |
|---|---|---|
getValueCallback | (option) => string | number | valueMember |
getDisplayCallback | (option) => string | displayMember |
getSearchCallback | (option) => string | searchMember |
getIconCallback | (option) => string | iconMember |
getSubtitleCallback | (option) => string | subtitleMember |
getDisabledCallback | (option) => boolean | disabledMember |
getGroupCallback | (option) => string | groupMember |
Callback Example
Important Notes
- EditorOption type:
{ value: string | number | boolean, label: string, [key: string]: unknown } - Callbacks override members: If both callback and member are set, callback takes priority
- AbortSignal: Autocomplete provides a signal for request cancellation
- Custom editors: Must call either
commit()orcancel() - Dynamic options: Use
loadOptionsfor row-specific option lists