# Simple Table

Lightweight paged table for small lists. For sorting, filtering and citations use Data Table.

## Add it to an app

1. Open the app builder and find **Simple Table** in the component palette.
2. Insert it into the intended region or container.
3. Set its properties in the inspector. Use a literal for a fixed value or a binding for a value supplied by the app.
4. Connect its events where the app should respond to a user gesture.
5. Preview with representative data and save after resolving validation problems.

The type name in the builder’s code view is `table`.

## Settings

| Setting | Accepted value | Required | Default | What it controls |
| --- | --- | --- | --- | --- |
| Columns (`columns`) | list of object | No | Not specified | Supports expression bindings. Header set; omitted = the first row's keys. |
| key (`columns[].key`) | string | No | Not specified | — |
| label (`columns[].label`) | string | No | Not specified | — |
| Data (`data`) | list of object | No | [] | Supports expression bindings. Row objects; non-object entries are skipped. The listed default is inserted when adding a new component. |
| Page size (`pageSize`) | integer; minimum 1 | No | 10 | Supports expression bindings. The listed default is inserted when adding a new component. |

## Values available to bindings

| Value | Type | Initial value | Meaning |
| --- | --- | --- | --- |
| `selectedRow` | object or null | null | The activated row. |
| `selectedRowIndex` | integer or null | null | The activated row's index in `data`. |

Refer to these values through `components.<component-id>.<value>` in a binding. Use the identifier assigned to this instance of Simple Table, not the component type name.

## Events

- `onRowSelect` — A row was activated (click, Enter or Space).

Connect only the actions the app needs. An event can fetch results, run an enabled data source, set state, update another component, show a notification, or navigate where supported.

## Keyboard and accessible labels

Accessible label source: Data table.

- Enter/Space on a row selects it

## Example: Bound rows with explicit columns

| Setting | Example value |
| --- | --- |
| `columns` | [{"key":"group","label":"Region"},{"key":"sum","label":"Total sales"}] |
| `data` | "{{ dataSources.metrics.data }}" |

## Example: Longer pages, a row click opens the detail pane

| Setting | Example value |
| --- | --- |
| `data` | "{{ dataSources.orders.data }}" |
| `pageSize` | 25 |

When `onRowSelect` occurs, the example performs:

- `setStateValue` with {"key":"detailOpen","value":true}

## If it is empty or unavailable

Check the source binding, the selected item, and the app’s access. A hosted document, table, review, or storage component needs the corresponding app capability; an offline preview cannot supply live private data. A source running with no results is different from an invalid binding. Inspect the app’s workflow and data source before changing the presentation.