Overview

To let users sort and filter data on a page, use the Filters block. It is a toolbar of filter controls — a condition builder, a date range picker, one-click quick filters, per-field filters, a sort menu, a keyword search box and an AI prompt — that together publish one shared filter state. The block never queries data itself: you point it at one or more data sources so it knows which fields can be filtered and sorted, users compose criteria in the toolbar, and you bind the result into your data source's inputs. For a deeper guide to the same block, see Filters, Sorting & Pagination.

Drop a Filters block above the block it should control — typically a Table, a Repeatable or a Chart. A new Filters block starts with three controls: a condition-builder filter, a date filter preset to the last 30 days, and a search box. Select your data sources under Data Sources, add or remove controls under Standard Actions, then bind the block's state into your data source's filter, sort and search inputs. When a user changes anything in the toolbar, the query re-runs with the new values.

Note: The Table block has its own toolbar filter and sort controls. Use the Filters block when you need one toolbar that drives a non-table block, several blocks, or a combination of conditions, date range, sort and search feeding the same query.

Properties

Content Properties

Action Types

Only one AI Filter, Filter, Sort, Date Filter and Keyword Search action is used per block — if you add two of the same type, the last one wins. You can add as many Quick Filter and Field Filter actions as you need.

Appearance Properties

Events

Methods

Call these with the Trigger Component Method action.

Exposed State

The block publishes what the user has applied under its id. Bind these to your data source's inputs. The state is empty until something is applied.

Integration: Wiring to a Data Source

1. Add the block: Drop a Filters block above your table and select the table's data source under Data Sources.

2. Choose the controls: Keep the default Filter, Date Filter and Keyword Search actions, or add Sort, Quick Filter, Field Filter or AI Filter actions under Standard Actions.

3. Bind the inputs: Open the data source's Input tab. On a fetch-records data source, bind Filter records to {{ filters1.state.filter }}, set Search records → Fields to the fields to search and bind its Value to {{ filters1.state.search }}, and use {{ filters1.state.sort }} for the sort. Bind your date inputs to {{ filters1.state.dateTimeFilter.epoch.startTime }} and {{ filters1.state.dateTimeFilter.epoch.endTime }}. Selecting a data source under Data Sources only lists its fields; nothing filters until these inputs are bound.

4. Test it: Preview the page. The query re-runs whenever the user changes anything in the toolbar.

Use Cases

One-Click Status Views

Add three Quick Filter actions — "Open", "In progress", "Closed" — each with a filter on the status field. Mark "Open" as Apply by default so the page loads pre-filtered. Users switch views with one click.

Report Date Range

Use the Date action with presets on a dashboard and bind every chart's data source to the date range. Use the previous-period values to show change against the period before.

Keep Filters Across Navigation

Turn on Remember applied changes. A user who filters a list, opens a record and comes back still sees their filter, sort, search and date range for the rest of the tab session.

Tip: Add a "Clear filters" button that calls the Filters block's Reset method. With Remember applied changes on, a returning user's saved filters replace any configured initial values for that visit.

Related Pages