Sort and Filter
The Sort and Filter block renders a UI panel that end users interact with to sort and filter the data in a linked block — a Table, Repeatable, Tree View, or Kanban — at runtime. It does not hold data itself; it emits query parameters that you wire to a target block's data source.
Overview
Drop a Sort and Filter block anywhere on the page — typically above or beside the target block. Configure which fields are filterable and which are sortable, then wire the block's output state to the target data source's filter and sort inputs. When a user sets a filter or changes the sort in the panel, the target block's data re-fetches with the new parameters automatically.
Note: The Table block has its own column-header filter and sort controls. Use the Sort and Filter block when: (1) you need a dedicated sidebar or toolbar panel separate from the table header, (2) the target is a Repeatable or other non-table collection, or (3) you want a richer filter UI with multiple field types and operators side by side.
Properties
Content Properties
| Property | Type | Default | Description |
targetBlock | string | — | The ID of the block whose data this Sort and Filter controls. Used as documentation and for future automatic wiring; the actual data binding is done by connecting the data source filter/sort inputs to this block's output state. |
filterFields | array | [] | The list of fields users can filter on. Each item is a filter field definition (see Filter Field Definition below). The order of items determines the order of filter controls in the panel. |
sortFields | array | [] | The list of fields users can sort by. Each item is a { field, label } pair. The Sort control renders as a dropdown of these fields plus an ascending/descending direction toggle. |
defaultFilters | array | [] | Pre-applied filter conditions. Each item is a { field, operator, value } object. These filters are active on initial render and appear pre-filled in the panel. Users can modify or clear them. |
layout | horizontal-bar | vertical-panel | modal | horizontal-bar | How the filter controls are laid out. horizontal-bar — all controls in a row, suits toolbars. vertical-panel — controls stacked vertically, suits sidebars. modal — filters open in a modal dialog triggered by an "Advanced Filters" button, keeps the main layout clean. |
Filter Field Definition
Each item in the filterFields array configures one filterable field:
| Key | Type | Description |
field | string | The field name in the data source response to filter on. |
label | string | Display label shown above the filter control in the panel. |
type | text | number | date | enum | boolean | Determines the input control rendered for this filter. text → text input with contains/equals/starts-with operators. number → number input with equals/greater-than/less-than/between. date → date picker with before/after/between/is. enum → multi-select from options. boolean → toggle. |
operators | array of strings | Override the default operator set for this field type. Only the listed operators appear in the operator dropdown. Example: ["equals", "contains"]. |
Event Properties
| Property | Type | Description |
onFilterChange | event handler | Fires whenever any filter value changes. The event payload contains activeFilters — an array of { field, operator, value } objects representing all currently applied filters. |
onSortChange | event handler | Fires whenever the sort field or direction changes. Payload contains sortField and sortDirection ("asc" or "desc"). |
Exposed State
The Sort and Filter block exposes its current state as bindable expressions. Wire these to the target data source's inputs:
| State | Type | Description |
{{ sortFilter.activeFilters }} | array | All currently applied filters as { field, operator, value } objects. Bind to the data source's filter parameter. |
{{ sortFilter.sortField }} | string | Currently selected sort field name. Bind to the data source's sort field input. |
{{ sortFilter.sortDirection }} | "asc" | "desc" | Current sort direction. Bind to the data source's sort direction input. |
{{ sortFilter.hasActiveFilters }} | boolean | True when at least one filter is applied. Use to conditionally show a "Clear all" button or a filter-active badge. |
{{ sortFilter.activeFilterCount }} | number | Count of currently applied filter conditions. Useful for displaying a badge: "Filters (3)". |
Integration: Wiring to a Data Source
Wiring Sort and Filter to a Table's data source
// Data source: fetchOrders // Inputs: filters (array), sortField (string), sortDirection (string) // In the data source's input configuration: filters: {{ sortFilter1.activeFilters }} sortField: {{ sortFilter1.sortField }} sortDirection: {{ sortFilter1.sortDirection }} // Sort and Filter block configuration: filterFields: [ { field: "status", label: "Status", type: "enum", operators: ["equals", "in"] }, { field: "createdAt", label: "Created Date", type: "date", operators: ["after", "before", "between"] }, { field: "totalAmount", label: "Amount", type: "number", operators: ["gte", "lte", "between"] }, { field: "customerName",label: "Customer", type: "text", operators: ["contains", "equals"] } ] sortFields: [ { field: "createdAt", label: "Created Date" }, { field: "totalAmount", label: "Order Total" }, { field: "customerName",label: "Customer Name" } ] defaultFilters: [ { field: "status", operator: "in", value: ["open", "pending"] } ]
Use Cases
Report Filtering Sidebar
Place a Sort and Filter block in a vertical panel on the left of a data table. Set layout: vertical-panel and configure filterFields for date ranges, status, and category. The report updates as users adjust filters without any event handler code.
List Page Toolbar
Place a Sort and Filter block in a horizontal bar above a Repeatable grid. Set layout: horizontal-bar with two or three key filters visible at all times. Add additional filters behind a layout: modal second Sort and Filter block triggered by an "Advanced" button.
Advanced Search Panel
For a CRM contacts page, configure a vertical panel with text (Name, Email, Company), enum (Tags, Owner), date (Last contacted), and boolean (Active) filter fields. Wire all outputs to a single contacts data source. Users can combine multiple conditions without any custom filter logic.
Tip: Bind a Badge or text block's visibility to {{ sortFilter.hasActiveFilters }} to show users when filters are active — important when the filter panel is collapsed or in a modal. Pair it with a "Clear all" button that calls the Sort and Filter block's clearFilters method.