Web Grid Showcase

Overview

Web Grid provides 8 editor types (including custom) for specialized input needs.

Editor Types

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' \| 'mousePosition'`	inherits	Cursor position when entering edit mode (inherits from grid-level `editStartSelection`)

Text 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

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

Dropdown selection from a list of options.

Option	Type	Default	Description
`options`	`EditorOption[]`	-	Static list of options
`loadOptions`	`(row, field) => Promise<EditorOption[]>`	-	Dynamic options loader
`optionsLoadTrigger`	`'immediate' \| 'oneditstart' \| 'ondropdownopen'`	`'oneditstart'`	When to load dynamic options
`allowEmpty`	`boolean`	`false`	Allow null/empty selection
`emptyLabel`	`string`	`'-- Select --'`	Label for empty option
`valueMember`	`string`	`'value'`	Property for value
`displayMember`	`string`	`'label'`	Property for display text

Select Editor

Searchable dropdown - type to filter options. Combines text input with dropdown selection.

Option	Type	Default	Description
`options`	`EditorOption[]`	-	Options to filter from
`loadOptions`	`(row, field) => Promise<EditorOption[]>`	-	Dynamic options loader (alternative to static options)
`optionsLoadTrigger`	`'immediate' \| 'oneditstart' \| 'ondropdownopen'`	`'oneditstart'`	When to load dynamic options
`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
`allowEmpty`	`boolean`	`false`	Allow null/empty selection
`emptyLabel`	`string`	-	Label for empty option
`dropdownMinWidth`	`string`	-	Minimum width of dropdown panel

Combobox 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

Async search dropdown - type to trigger server search. Ideal for large datasets.

Option	Type	Default	Description
`searchCallback`	`(query, row, signal?) => Promise<EditorOption[]>`	-	Async search function (required)
`placeholder`	`string`	-	Placeholder text shown when input is empty
`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

Take full control with a custom editor callback.

Context Type

Custom Editor

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)
`dropdownMinWidth`	`string`	Minimum width of dropdown panel

Custom Option Rendering

Instead of member properties, you can use callbacks for more control:

Callback Example

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() or cancel()
Dynamic options: Use loadOptions for row-specific option lists