Filtering

Filter bar

Add a filter-bar panel when a page has several filter controls and you want them pinned together in one row instead of scattered across the layout.

FiltersRegion Last 30 daysSegment

What you can do

A filter-bar panel groups filter panels into one horizontal bar above the charts.
spec.panels is an ordered list of filter panel ids, up to 24; spec.title is optional.
Each grouped filter panel keeps its own spec: control, param, and targets.
showOnPages on a filter panel controls which pages it appears on; the filter-bar panel arranges panels already declared elsewhere on the page.

filter-bar is a layout panel; it contains filter panels and does not itself read or write data.

Spec

View spec

[
  {
    "id": "region",
    "type": "filter",
    "title": "Region",
    "data": {
      "query": "SELECT DISTINCT region FROM orders ORDER BY 1"
    },
    "spec": {
      "control": "select",
      "valueField": "region",
      "param": "region"
    }
  },
  {
    "id": "dates",
    "type": "filter",
    "title": "Dates",
    "data": {
      "query": "SELECT DISTINCT order_date FROM orders ORDER BY 1"
    },
    "spec": {
      "control": "date-range",
      "valueField": "order_date",
      "loParam": "order_date_lo",
      "hiParam": "order_date_hi",
      "presets": [
        "last-30d",
        "qtd",
        "ytd"
      ]
    }
  },
  {
    "id": "controls",
    "type": "filter-bar",
    "title": "Controls",
    "spec": {
      "title": "Filters",
      "panels": [
        "region",
        "dates"
      ]
    }
  }
]

The controls filter-bar panel groups the region and dates filter panels into one row; each filter panel keeps its own control and param.

Try it live

Open the interactive-filters template in the Builder

Open interactive-filters to see fv2-filter-bar pin four filter panels in one row: the region control, a quota toggle, a minimum-revenue number, and a rep search.

Build it in dvt

Every interaction on this site is a few lines of the same declarative JSON spec. Read the full spec format, or connect an AI agent to your warehouse and build one live in the quickstart.

Follow the build

dvt is in founding research. Leave your email and we'll reach out when there's something to see — no newsletters, no noise.