Web Grid Showcase

Web Grid uses a clear naming rule: callbacks use the *Callback suffix and their return value affects grid behavior; events use the on* prefix and are fire-and-forget notifications. This page covers the callbacks. For events, see Events API.

All callbacks are synchronous unless the signature shows Promise<…>. The grid does not retry on exceptions — handle errors inside your callback.

Cell content rendering

Three mutually exclusive ways to render a cell while it's not being edited. Priority: templateCallback > formatCallback > default String(value). All run on every render of the cell. Set on the column.

Callback	Signature	Returns	Escaped?	Sees drafts?
`formatCallback`	`(value, row) => string`	Plain text	Yes — the grid escapes the result	Yes — `value` already reflects the draft
`templateCallback`	`(row) => string`	Raw HTML (innerHTML)	No — escape user input yourself	No — receives the original row; fold drafts into `items` in `onrowchange` if you need live updates
`renderCallback`	`(row, element) => void`	Nothing — you mutate `element`	n/a — you own the DOM	Depends on what you read

Rule of thumb: plain text from one field → no callback; computed/formatted text → formatCallback; HTML (badges, swatches, icons) → templateCallback; event handlers or complex DOM → renderCallback.

Editing & validation

Hooks around the edit lifecycle. cellEditCallback replaces the built-in editor entirely; the others run alongside whichever editor is active. Set on the column unless noted.

Callback	Signature	Purpose & when it fires
`cellEditCallback`	`(ctx: CustomEditorContext<T>) => void`	Custom editor. Fires when editing starts (only with `editor: 'custom'`). You render UI, then call `ctx.commit(value)` or `ctx.cancel()` — exactly one — or the cell stays in edit state.
`beforeCommitCallback`	`(ctx: BeforeCommitContext<T>) => ValidationResult \| boolean \| string \| null \| Promise<…>`	Validates and optionally transforms the value before it's saved. Fires when the editor tries to commit (Enter, Tab, blur). Return `{ valid: false, message }` to block; return `{ valid: true, transformedValue }` to allow with a modified value. Plain `true`, `null`, `undefined` = valid; plain `false` or a string = invalid.
`validateCallback` deprecated	`(value, row) => string \| null \| Promise<string \| null>`	Legacy validator. Return an error message string or `null` for valid. Prefer `beforeCommitCallback` — it can also transform the value.
`validationTooltipCallback`	`(ctx: ValidationTooltipContext<T>) => string \| null`	Rich HTML tooltip shown when hovering an invalid cell. Fires on hover after validation has flagged the cell. Return raw HTML — escape user input. Settable on column or grid; column-level wins.

Tooltips

Dynamic tooltip text. Set isTooltipHtml: true on the column to render the result as HTML instead of text.

Callback	Set on	Signature	Purpose & when it fires
`tooltipCallback` (cell)	Column	`(value, row) => string \| null`	Tooltip on cell hover. Takes priority over `tooltipMember`. Return `null` for no tooltip.
`tooltipCallback` (toolbar / menu item)	Toolbar item	`(row, rowIndex) => string`	Custom HTML tooltip for a row toolbar button. Returned per-row, so you can include row-specific text.
`lockTooltipCallback`	Grid `rowLocking`	`(lockInfo, row) => string \| null`	Tooltip shown on the lock badge in the row-number column for locked rows.

Styling hooks

Inject CSS classes or full stylesheets without forking the component. All run on every render of the affected element.

Callback	Set on	Signature	Purpose & when it fires
`cellClassCallback`	Column	`(value, row) => string \| null`	Dynamic CSS class(es) for cells in this column. Return space-separated class names or `null`. Combined with the static `cellClass` property.
`rowClassCallback`	Grid	`(row, rowIndex) => string \| null`	Dynamic CSS class(es) for the entire row. Run during row render.
`customStylesCallback`	Grid	`() => string`	Returns a CSS string injected into the grid's shadow DOM. Called once at setup and on full re-renders. Use to scope arbitrary CSS to the grid without leaking to the page.

Clipboard

Transform values when copying to or pasting from the OS clipboard. Set on the column.

Callback	Signature	Purpose & when it fires
`beforeCopyCallback`	`(value, row) => string`	Transforms the cell value before it lands on the clipboard. Fires on Ctrl+C / Cmd+C from this column. Use to format dates as ISO strings, drop currency symbols, etc.
`beforePasteCallback`	`(value: string, row) => unknown`	Processes a pasted clipboard string before it's applied as the new cell value. Fires on Ctrl+V / Cmd+V into this column. Return the typed value (number, Date, etc.) the cell should store.

Row locking

All set on grid.rowLocking. Pair with the property-based members (lockedMember, lockInfoMember) when the lock state lives on the row itself. See Row Locking.

Callback	Signature	Purpose & when it fires
`isLockedCallback`	`(row, rowIndex) => boolean`	Decides whether a row is locked. Called per row during render. Use when lock state isn't a simple field on the row (external session, time-window, etc.).
`getLockInfoCallback`	`(row, rowIndex) => RowLockInfo \| null`	Returns full lock metadata (who locked, when, why). Called whenever the grid needs to render or reason about lock state.
`canEditLockedCallback`	`(row, lockInfo) => boolean`	Only consulted when `lockedEditBehavior: 'callback'`. Fires when the user tries to edit a locked cell — return `true` to allow the edit, `false` to block.
`lockTooltipCallback`	`(lockInfo, row) => string \| null`	Tooltip shown on the lock indicator. Fires on hover.

Dropdown option resolvers

All live under column.editorOptions and apply to select / combobox / autocomplete editors. The get*Callback set overrides the corresponding *Member string keys when both are present.

Callback	Signature	Purpose & when it fires
`loadOptions`	`(row, field) => Promise<EditorOption[]>`	Async loader for select/combobox options. Fires according to `optionsLoadTrigger`: `'immediate'`, `'oneditstart'` (default), or `'ondropdownopen'`.
`searchCallback`	`(query, row, signal?) => Promise<EditorOption[]>`	Async search for the `autocomplete` editor. Fires on every keystroke (debounced via `debounceMs`). Honor the optional `AbortSignal` to cancel in-flight requests.
`renderOptionCallback`	`(option, ctx: OptionRenderContext) => string`	Custom HTML for each option in the dropdown. Called once per option per render. `ctx` includes `{ index, isHighlighted, isSelected, isDisabled }`.
`getValueCallback`	`(option) => string \| number`	The option's stored value. Overrides `valueMember`.
`getDisplayCallback`	`(option) => string`	The option's display text. Overrides `displayMember`.
`getSearchCallback`	`(option) => string`	Text used for client-side filtering. Overrides `searchMember`; falls back to display text.
`getIconCallback`	`(option) => string`	Icon (emoji, glyph, or HTML). Overrides `iconMember`.
`getSubtitleCallback`	`(option) => string`	Secondary line under the option label. Overrides `subtitleMember`.
`getDisabledCallback`	`(option) => boolean`	Whether the option is selectable. Overrides `disabledMember`.
`getGroupCallback`	`(option) => string`	Group heading under which the option is listed. Overrides `groupMember`.

onselect also lives on editorOptions but is an event, not a callback — its return value is ignored. See Events API.

Data, summary, pagination, fill

Grid-level callbacks for content the grid renders or operations it orchestrates.

Callback	Signature	Purpose & when it fires
`summaryContentCallback`	`(ctx: SummaryContext<T>) => string`	HTML for the summary bar. Called whenever items, page, or sort change. `ctx` exposes `items` (current page), `allItems`, `totalItems`, `currentPage`, `pageSize`, and server-supplied `metadata`.
`paginationLabelsCallback`	`(ctx: PaginationLabelsContext) => Partial<PaginationLabels>`	Customize/translate pagination text. Fires on every pagination render. Return only the labels you want to override; the rest fall back to `grid.labels`.
`fillDragCallback`	`(detail: FillDragDetail) => boolean \| void`	Inspect a fill-handle drag before it's applied. Return `false` to cancel. Fires when the user releases the fill handle.
`createEmptyRowCallback` experimental	`() => T \| Promise<T>`	Factory for the new empty row. Called when the grid needs to materialize a placeholder row (e.g. inline-add). Async is supported.
`shortcutsHelpContentCallback`	`() => string`	Custom HTML shown in the keyboard-shortcuts help popover, alongside the auto-generated shortcut list.