Simple Table

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

Add it to an app

Open the app builder and find Simple Table in the component palette.
Insert it into the intended region or container.
Set its properties in the inspector. Use a literal for a fixed value or a binding for a value supplied by the app.
Connect its events where the app should respond to a user gesture.
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.