Table State and Bindings
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 complete reference for those 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.currentPage }}, and so on. All state values are reactive — bindings that reference them update automatically when the user interacts with the table.
Note: Use the block's ID (set in the inspector's top field, not the display label) in binding expressions. IDs are lowercase and underscore-separated by default — e.g. orders_table. The State Explorer panel in the builder shows the correct path for every block on the page.
State Variables
Selection State
| State Key | Type | Description |
{{ table.selectedRows }} | array of objects | The full row data objects for all currently selected rows. Each element matches the shape of one record from the data source. Empty array when no rows are selected. |
{{ table.selectedRowIds }} | array of strings/numbers | The ID values of selected rows — the value from the column designated as the row identifier. Use this for lighter bindings when you only need IDs, not full objects. |
{{ table.selectedRow }} | object | The first (or only) selected row object. Shorthand for single-selection tables; equivalent to selectedRows[0]. undefined when nothing is selected. |
Pagination State
| State Key | Type | Description |
{{ table.currentPage }} | number | The currently displayed page number (1-indexed). Changes when the user navigates between pages. |
{{ table.pageSize }} | number | Number of rows per page as currently configured. Changes when the user adjusts the page size selector. |
{{ table.totalCount }} | number | Total number of records across all pages, as reported by the data source. Used to calculate total page count: {{ Math.ceil(table.totalCount / table.pageSize) }}. |
Filter and Sort State
| State Key | Type | Description |
{{ table.filters }} | object | The active filter state as a map of { columnId: filterValue }. Reflects filters set via the table's column-header filter controls. Bind the data source's filter input to this value for server-side filtering. |
{{ table.sortField }} | string | The field name currently being sorted by. undefined when no sort is applied. |
{{ table.sortDirection }} | "asc" | "desc" | Current sort direction. Always paired with sortField. |
{{ table.searchQuery }} | string | The current value of the table's search input (if the toolbar search is enabled). Bind to the data source's search parameter for server-side search. |
Inline Edit State
| State Key | Type | Description |
{{ table.editingCell }} | object | The cell currently being inline-edited. Shape: { rowId, field, originalValue, currentValue }. undefined when no cell is being edited. Use to show contextual help or validation hints. |
Events
| Event | Payload | Description |
onRowSelect | { selectedRows, selectedRowIds } | Fires when the selection changes — a row is selected or deselected. Use to update a detail panel or enable/disable bulk action buttons. |
onPageChange | { page, pageSize } | Fires when the user navigates to a different page or changes the page size. Wire to re-fetch the data source with updated pagination parameters. |
onSortChange | { sortField, sortDirection } | Fires when the user clicks a column header to sort. Use for server-side sorting: wire the data source inputs to {{ event.sortField }} and {{ event.sortDirection }}. |
onSearchChange | { searchQuery } | Fires when the search query changes (debounced). Wire to a data source's search parameter for server-side search. |
onFilterChange | { filters } | Fires when the column filters change. Wire to re-fetch the data source with updated filter conditions. |
Common Binding Patterns
Enable Bulk Action Button Only When Rows Are Selected
Disable a "Delete Selected" button when nothing is selected
// Button: disabled property disabled: {{ orders_table.selectedRowIds.length === 0 }} // Button: label showing selection count label: {{ "Delete (" + orders_table.selectedRowIds.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
// Data source inputs: page: {{ orders_table.currentPage }} pageSize: {{ orders_table.pageSize }} // Table: totalCount property (to show correct page count in pagination UI) totalCount: {{ fetchOrders.data.totalCount }}
Server-Side Sort and Search
Wire sort and search to a data source
// Data source inputs: sortField: {{ orders_table.sortField }} sortDirection: {{ orders_table.sortDirection }} searchQuery: {{ orders_table.searchQuery }} // 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 {{ orders_table.totalCount }} orders {{ orders_table.selectedRowIds.length > 0 ? " · " + orders_table.selectedRowIds.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.