# Data Grid

API-bound table with five cell types.

URL: https://webrad.atentor.com/docs/data-grid
Updated: 2026-11-07

WebDataGrid · Standard · Visual · 1 events

## Quick start

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

```ts
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');
```

Cells display the API response without modifying it. To edit data, handle OnCellClick and execute the save operation.

- 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

```ts
// 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 size — Fit content grows the item to its widest rendered child and preserves child intrinsic widths; minimum and maximum width remain limits. | `enum` — `fixed` `stretch` `fit-content` | `"fixed"` | Inspector / configuration |
| `itemHeight` — Responsive height · Responsive size — Fit content grows the item to its lowest rendered child and preserves child intrinsic heights; minimum and maximum height remain limits. | `enum` — `fixed` `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 size — Allows 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 size — Cross-axis alignment for this item in a row or column. Auto inherits the parent alignment; responsive cross-axis stretch retains its sizing behavior. | `enum` — `auto` `start` `center` `end` `stretch` | `"auto"` | Inspector / configuration |
| `itemHorizontalAnchor` — Horizontal anchor · Anchors & offsets | `enum` — `start` `center` `end` `stretch` | `"start"` | Inspector / configuration |
| `itemVerticalAnchor` — Vertical anchor · Anchors & offsets | `enum` — `start` `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 · Spacing — Outer spacing on all four sides, in pixels. Row and column layouts include this spacing between components. | `number` | `0` | margin |
| `marginTop` — Margin top · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginTop |
| `marginRight` — Margin right · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginRight |
| `marginBottom` — Margin bottom · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginBottom |
| `marginLeft` — Margin left · Spacing — Outer 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 · Behavior — Removes 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 Grid — Configure 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 · Data — Bind 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

```ts
bindApiClient(apiClient: WebApiClient | null): void;
```

Example

```ts
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

```ts
focus(options?: FocusOptions): void;
```

### `show`

method

```ts
show(): void;
```

### `hide`

method

```ts
hide(): void;
```

### `bindEvent`

method

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

### `emit`

method

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

### `dispose`

method

```ts
dispose(): void;
```

## Events

Link methods in **Interaction**. [How to use events](https://webrad.atentor.com/docs/interactions).

### OnCellClick

[WebDataGridCellEventDetail](https://webrad.atentor.com/docs/types#webdatagridcelleventdetail) in `event.detail` · `column`, `rowIndex`, `columnIndex`, `value`, `getValue`

Signature and example

```ts
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);
  }
}
```