WEBRAD / TECHNICAL REFERENCE

Data Grid

API-bound table with five cell types.

WebDataGridStandardVisual1 events

Quick start

Add DataGrid1 in the Designer. Use the example in a page method.

DataGrid1.configuration = {
  ...DataGrid1.configuration,
  showHeader: true,
  stickyHeader: true,
  stripedRows: true,
  wrapText: true,
  emptyMessage: 'No records',
};
// Configure the source and columns in the editor.
await ApiClient1.execute('Load');

Open the grid editor and select API Client, operation, and response list.
listPath and fieldPath use JSON Pointer, such as /data and /name.
Cells accept text, image, button, checkbox, or toggle; configure width, alignment, and row height.
OnCellClick provides rowIndex, columnIndex, column, value, and getValue() to read another row field.
Headers and footers can be sticky. Configure emptyMessage for empty lists.

More examples

Complete configuration and API binding

// Configure Load in API Client with a list at /data.
const operation = ApiClient1.operations.find(item => item.name === 'Load');
if (!operation) throw new Error('Configure the Load operation in the Designer.');
DataGrid1.configuration = {
  schemaVersion: 1,
  apiClientId: ApiClient1.id,
  operationId: operation.id,
  listPath: '/data',
  columnCount: 5,
  showHeader: true,
  stickyHeader: true,
  showFooter: true,
  stickyFooter: false,
  rowHeightMode: 'dynamic',
  fixedRowHeight: 40,
  minRowHeight: 32,
  maxRowHeight: null,
  cellPaddingHorizontal: 12,
  cellPaddingVertical: 8,
  wrapText: true,
  stripedRows: true,
  showHorizontalLines: true,
  showVerticalLines: false,
  emptyMessage: 'No customers found',
  columns: (['text', 'image', 'button', 'checkbox', 'toggle'] as const).map((cellKind, index) => ({
    id: 'column-' + index,
    header: ['Name', 'Photo', 'Action', 'Selected', 'Active'][index] ?? '',
    fieldPath: ['/name', '/avatarUrl', '/id', '/selected', '/active'][index] ?? '',
    cellKind,
    fixedCaption: cellKind === 'button' ? 'Open' : '',
    buttonIcon: null,
    footer: '',
    widthMode: 'dynamic',
    width: 140,
    minWidth: 80,
    maxWidth: null,
    flex: 1,
    headerAlign: 'start',
    cellAlign: cellKind === 'text' ? 'start' : 'center',
  })),
};
DataGrid1.bindApiClient(ApiClient1);
await ApiClient1.execute('Load');

Inspector properties

Component options and defaults. Fields without runtime access are configured in the Inspector.

Property / source	Type and options	Default	Runtime access
`name`Name · Identity	`string`	`—`	name
`x`Left · Size & position	`number`	`0`	x
`y`Top · Size & position	`number`	`0`	y
`width`Width · Size & position	`number`	`640`	width
`height`Height · Size & position	`number`	`320`	height
`itemWidth`Responsive width · Responsive sizeFit content grows the item to its widest rendered child and preserves child intrinsic widths; minimum and maximum width remain limits.	`enumfixed` `stretch` `fit-content`	`"fixed"`	Inspector / configuration
`itemHeight`Responsive height · Responsive sizeFit content grows the item to its lowest rendered child and preserves child intrinsic heights; minimum and maximum height remain limits.	`enumfixed` `stretch` `fit-content`	`"fixed"`	Inspector / configuration
`itemMinWidth`Minimum width · Responsive size	`number`	`0`	Inspector / configuration
`itemMaxWidth`Maximum width · Responsive size	`number`	`null`	Inspector / configuration
`itemMinHeight`Minimum height · Responsive size	`number`	`0`	Inspector / configuration
`itemMaxHeight`Maximum height · Responsive size	`number`	`null`	Inspector / configuration
`itemGrow`Grow · Responsive size	`number`	`0`	Inspector / configuration
`itemShrink`Shrink · Responsive sizeAllows fixed and stretch flow items to yield space. Fit-content keeps its intrinsic size so its children are not compressed.	`boolean`	`true`	Inspector / configuration
`itemAlignSelf`Item alignment · Responsive sizeCross-axis alignment for this item in a row or column. Auto inherits the parent alignment; responsive cross-axis stretch retains its sizing behavior.	`enumauto` `start` `center` `end` `stretch`	`"auto"`	Inspector / configuration
`itemHorizontalAnchor`Horizontal anchor · Anchors & offsets	`enumstart` `center` `end` `stretch`	`"start"`	Inspector / configuration
`itemVerticalAnchor`Vertical anchor · Anchors & offsets	`enumstart` `center` `end` `stretch`	`"start"`	Inspector / configuration
`itemLeft`Left inset · Anchors & offsets	`number`	`0`	Inspector / configuration
`itemRight`Right inset · Anchors & offsets	`number`	`0`	Inspector / configuration
`itemTop`Top inset · Anchors & offsets	`number`	`0`	Inspector / configuration
`itemBottom`Bottom inset · Anchors & offsets	`number`	`0`	Inspector / configuration
`margin`Margin · SpacingOuter spacing on all four sides, in pixels. Row and column layouts include this spacing between components.	`number`	`0`	margin
`marginTop`Margin top · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.	`number`	`0`Derived from saved properties	marginTop
`marginRight`Margin right · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.	`number`	`0`Derived from saved properties	marginRight
`marginBottom`Margin bottom · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.	`number`	`0`Derived from saved properties	marginBottom
`marginLeft`Margin left · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.	`number`	`0`Derived from saved properties	marginLeft
`visible`Visible · Behavior	`boolean`	`true`	visible
`collapseWhenHidden`Collapse when hidden · BehaviorRemoves the component from the layout while it is not visible.	`boolean`	`true`	collapseWhenHidden
`enabled`Enabled · Behavior	`boolean`	`true`	enabled
`dataGridConfig`Data source and columns · Data GridConfigure the source, columns, responsive widths, row sizing, and cell layout in the Data Grid editor.	`data-grid-config`Editor: data-grid-configurator	{"schemaVersion":2,"apiClientId":null,"operationId":null,"listPath":"","columnCount":3,"showHeader":true,"stickyHeader":true,"showFooter":false,"stickyFooter":true,"rowHeightMode":"dynamic","fixedRowHeight":40,"minRowHeight":36,"maxRowHeight":null,"cellPaddingHorizontal":10,"cellPaddingVertical":8,"wrapText":false,"stripedRows":false,"showHorizontalLines":true,"showVerticalLines":false,"emptyMessage":"No data","columns":[{"id":"column-1","header":"Column 1","fieldPath":"","cellKind":"text","fixedCaption":"","buttonIcon":null,"footer":"","widthMode":"dynamic","width":180,"minWidth":96,"maxWidth":null,"flex":1,"headerAlign":"start","cellAlign":"start"},{"id":"column-2","header":"Column 2","fieldPath":"","cellKind":"text","fixedCaption":"","buttonIcon":null,"footer":"","widthMode":"dynamic","width":180,"minWidth":96,"maxWidth":null,"flex":1,"headerAlign":"start","cellAlign":"start"},{"id":"column-3","header":"Column 3","fieldPath":"","cellKind":"text","fixedCaption":"","buttonIcon":null,"footer":"","widthMode":"dynamic","width":180,"minWidth":96,"maxWidth":null,"flex":1,"headerAlign":"start","cellAlign":"start"}]}	dataGridConfig
`currentRowBindings`Current row · DataBind writable visual values to fields of this repeated row.	`current-row-bindings`Editor: current-row-bindings	`[]`	currentRowBindings

API in code

Member	Signature	Access
`configuration`	`configuration: WebDataGridConfiguration;`	Read and write
`dataGridConfig`	`dataGridConfig: WebDataGridConfiguration;`	Read and write

`bindApiClient`

method

bindApiClient(apiClient: WebApiClient | null): void;

Example

DataGrid1.bindApiClient(ApiClient1);

Inherited members (27)

Member	Signature	Access
`currentRowBindings`	`currentRowBindings: readonly WebCurrentRowBinding[];`	Read and write
`element`	`readonly element: TElement;`	Read-only
`id`	`readonly id: string;`	Read-only
`name`	`readonly name: string;`	Read-only
`visible`	`visible: boolean;`	Read and write
`collapseWhenHidden`	`collapseWhenHidden: boolean;`	Read and write
`enabled`	`enabled: boolean;`	Read and write
`x`	`x: number;`	Read and write
`y`	`y: number;`	Read and write
`width`	`width: number;`	Read and write
`height`	`height: number;`	Read and write
`margin`Outer spacing on all four sides, in pixels.	`margin: number;`	Read and write
`marginTop`	`marginTop: number;`	Read and write
`marginRight`	`marginRight: number;`	Read and write
`marginBottom`	`marginBottom: number;`	Read and write
`marginLeft`	`marginLeft: number;`	Read and write
`alignSelf`	`alignSelf: RuntimeLayoutAlignSelf;`	Read and write
`tabIndex`	`tabIndex: number;`	Read and write
`backgroundColor`	`backgroundColor: string;`	Read and write
`color`	`color: string;`	Read and write
`borderColor`	`borderColor: string;`	Read and write

`focus`

method

focus(options?: FocusOptions): void;

`show`

method

show(): void;

`hide`

method

hide(): void;

`bindEvent`

method

bindEvent(eventName: string, handler: WebComponentEventHandler<this> | null): () => void;

`emit`

method

emit(eventName: string, detail?: unknown): boolean;

`dispose`

method

dispose(): void;

Events

Link methods in Interaction. How to use events.

OnCellClick

WebDataGridCellEventDetail in event.detail · column, rowIndex, columnIndex, value, getValue

Signature and example

import type { WebDataGrid, WebDataGridCellEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async DataGrid1CellClick(
    sender: WebDataGrid,
    event: CustomEvent<WebDataGridCellEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { column, rowIndex, columnIndex, value, getValue } = event.detail;
    console.log(column, rowIndex, columnIndex, value, getValue);
  }
}