SYIDAX / DATA GRID

Customize cell appearance

Display statuses, buttons, and custom components instead of basic text.

Customize cell appearanceSample order data

120 rows

Loading Grid…

Latest result

Use valueFormatter for simple formatting such as thousands separators. Choose a cell renderer for buttons or multiple elements.

View code

Current preview

Usage guide

Use custom rendering for richer cells, such as completion badges or detail buttons.

Decide whether text is enough
Use valueFormatter for simple formatting such as thousands separators. Choose a cell renderer for buttons or multiple elements.
Connect a renderer
Assign cellRenderer to the target column and build UI from the supplied row data. Display external data as safe text.
Verify updates and reuse
Check that the correct row appears after scrolling, sorting, and data changes. Clean up renderer-created resources, such as event subscriptions, when cells disappear.

Expected results

Display workflow-specific badges, buttons, and other UI inside app cells.

The table above displays ordinary strings and numbers. It is not an example with custom button renderers attached.

Other properties2

Attribute / Property	Type / Default	Description
	`GridComponentLocalDefinitions< GridData, unknown, unknown, unknown >`Default: undefined	Per-grid named lifecycle components. Direct column definitions win, followed by this map, grid-local registrations, then global registrations.
componentTimeoutMs	`number`Default: 5_000	Per-step timeout for optional renderer/editor/filter lifecycle work.

Events1

Events	Detail type	Description
	`GridComponentErrorDetails`	Typed lifecycle lookup/create/refresh/model/focus/destroy failure.

Methods10

Method / Arguments	Return type	Description
name: string, renderer: CellRenderer	`Promise<boolean>`	Register a custom cell renderer by name.
	`Promise<ReadonlyArray<string>>`	List registered cell-renderer names.
name: string	`Promise<boolean>`	Unregister a host-registered renderer by name.
scope: GridComponentRegistrationScope, kind: TKind, name: string, definition: GridComponentDefinitionFor< TKind, GridData, unknown, unknown, unknown >	`Promise<void>`	Register a named lifecycle component in this grid or application scope.
scope: GridComponentRegistrationScope, kind: TKind, name: string, definition: GridComponentDefinitionFor< TKind, GridData, unknown, unknown, unknown >	`Promise<void>`	Atomically replace a named lifecycle component definition.
scope: GridComponentRegistrationScope, kind: GridComponentKind, name: string	`Promise<boolean>`	Remove one named lifecycle component.
scope: GridComponentRegistrationScope, kind: GridComponentKind	`Promise<ReadonlyArray<string>>`	List lifecycle component names in deterministic registration order.
rowId: GridRowId, colId: string	`Promise<GridRendererDiscovery<GridData, unknown, unknown>>`	Return the currently mounted lifecycle renderer for one logical cell.
rowId: GridRowId, colId: string	`Promise<boolean>`	Destroy one mounted lifecycle renderer without affecting pure renderers.
rowId: GridRowId, colId: string, direction: 'in' \| 'out'	`Promise<boolean>`	Invoke the optional focus hook on one mounted lifecycle renderer.

ColumnDef5

ColumnDef	Type / Required	Description
	`\| string \| CellRenderer<TData, TValue> \| GridRendererDefinition<TData, TValue, TContext>`Optional	Custom renderer name or inline renderer. Omitted columns render as text.
	`Record<string, unknown>`Optional	Opaque options passed to the cell renderer.
	`\| string \| string[] \| GridCallback<[CellCallbackParams<TData, TValue, TContext>], string>`Optional	Always-applied cell class. Accepts a class string, class array, or callback returning classes.
	`Record< string, GridCallback<[CellCallbackParams<TData, TValue, TContext>], boolean> \| string >`Optional	Conditional classes keyed by class name. Values are predicates or expressions.
	`\| Record<string, string \| number> \| GridCallback< [CellCallbackParams<TData, TValue, TContext>], Record<string, string \| number> \| null \| undefined > \| ReadonlyArray< \| Record<string, string \| number> \| GridCallback< [CellCallbackParams<TData, TValue, TContext>], Record<string, string \| number> \| null \| undefined > >`Optional	Inline cell style object, callback, or merged array of either form.