Every Table block exposes a rich set of internal state variables you can read from anywhere on the page using binding expressions. This page is a reference for the main state keys, the events that fire when state changes, and practical binding patterns for the most common use cases.
Overview
Access table state by prefixing the block's ID: {{ tableName.selectedRows }}, {{ tableName.content.page.current }}, and so on. All state values are reactive — bindings that reference them update automatically when the user interacts with the table. The same keys are summarised in the Exposed State table on Table Overview.
Note: Use the block's ID (shown at the top of the inspector, for example dataTable1), not its display label, in binding expressions. The examples below use an ID renamed to orders_table. The State Explorer panel in the builder shows the correct path for every block on the page.
State Variables
Selection State
Which selection keys exist depends on the table's Row Selection setting.
State Key | Type | Description |
|---|---|---|
| object | Data of the last selected row. Single selection only. |
| string | Primary key of the last selected row. Single selection only. |
| array of objects | Data of all selected rows. Multiple selection only. |
| array | Primary keys of all selected rows. Use this for lighter bindings when you only need keys, not full rows. Multiple selection only. |
Pagination State
Page state lives under content.page.
State Key | Type | Description |
|---|---|---|
| number | Current Page — the page currently displayed. Zero-based: the first page is 0, so show `current + 1` as the page number. Initial Page and goToPage are 1-based. |
| number | Page Size — number of rows per page. |
| number | Offset — index of the first row on the current page. |
| number | Total Records — total number of records across all pages. |
Filter and Sort State
Search, sort and filters all live in filters.
State Key | Type | Description |
|---|---|---|
| object | The active filter conditions from the table's filter controls. |
| string | The current value of the toolbar search input. |
| array of | The active sort. Read the first sort as |
| object | The active time range: startTime, endTime, previousStartTime, previousEndTime. |
With an Object source, the table applies these for you. With a Mapped source, bind them into your query.
Inline Edit State
State Key | Type | Description |
|---|---|---|
| array | Pending inline edits, as a list ready for an update call. |
| array | Pending drag-and-drop row reorders. |
| array | Rows currently rendered, with pending edits already applied. |
Events
Configure these under Inspector → Content → Interactions.
Event | Description |
|---|---|
On Select Row | Fires when a row is selected. Use to update a detail panel or open a drawer. |
On Change Row Selection | Fires when a row's checkbox is toggled. Multiple selection only. |
On Click Cell | Fires when a cell is clicked. |
On Right Click Cell | Fires when a cell is right-clicked. |
On Change Cell Value | Fires when an editable cell's value changes. |
On Change Row Order | Fires when a row is dragged to a new position. |
On Receive Notification | Fires when a notification targets the table. |
On Page Change | Fires when the user moves to another page. Page-based pagination only. |
There are no sort, search or filter events. Those changes show up in {{ table.filters }}, which an Object source applies automatically and a Mapped source must bind into its query.
Common Binding Patterns
Enable Bulk Action Button Only When Rows Are Selected
Disable a "Delete Selected" button when nothing is selected
// Button: disabled property (Multiple selection) disabled: {{ orders_table.selectedRowKeys.length === 0 }} // Button: label showing selection count label: {{ "Delete (" + orders_table.selectedRowKeys.length + " rows)" }}
Pre-populate a Detail Form from the Selected Row
Bind a form's default values to the selected table row
// Form field: Default Value orderId: {{ orders_table.selectedRow.id }} customerName: {{ orders_table.selectedRow.customerName }} amount: {{ orders_table.selectedRow.totalAmount }} status: {{ orders_table.selectedRow.status }}
Server-Side Pagination
Wire table pagination to a data source
// Mapped source — data source inputs: offset: {{ orders_table.content.page.offset }} limit: {{ orders_table.content.page.size }} // Table: bind Total Records to the source's total count so the pagination shows the right page count
Set Total Records in the table's Pagination add-on (Inspector → Content → Add-ons → Pagination). The toolbar's record count is a separate value, so bind it there too if you show it — see the warning in Toolbar & Views.
Server-Side Sort and Search
Wire sort and search to a data source
// Mapped source — data source inputs: search: {{ orders_table.filters.search }} sortField: {{ orders_table.filters.sort[0].field }} sortOrder: {{ orders_table.filters.sort[0].order }} // The data source re-runs automatically when these bound inputs change.
Show a Count Summary Above the Table
Display record count and selection count
// Text block label (Multiple selection) {{ orders_table.content.page.total }} orders {{ orders_table.selectedRowKeys.length > 0 ? " · " + orders_table.selectedRowKeys.length + " selected" : "" }}
Tip: Open the builder's State Explorer (the panel that appears when you click into any binding field) to see every available state path for the table, including the exact block ID. Copy paths directly rather than typing them to avoid typos.
Related Pages
Page | Relationship |
|---|---|
The Table block's properties, events, methods and exposed state summary | |
Selection modes behind the selection state keys | |
The toolbar controls that fill | |
Filter fields for Mapped sources and how |