Navigation

Drill-down (drill action)

Add a drill action when a click should take the reader to a different page in the same dashboard, passing along the value they clicked so the detail page can filter its own panels.

Overview EMEA

Revenue by region

Orders in EMEA

What you can do

A drill is an action of type drill in onClick or contextMenu.actions; the bare top-level drill panel property is inert back-compat, so use an action instead.
drill requires label and targetPage, a page id in the same dashboard, plus a binding: param, valueFrom, and valueType, or a bindings array.
The target page's panels read the bound value via data.params and a %(name)s placeholder in their query.
The target page must be visible in the page nav; drilling into a hidden page raises the advisory interaction-stranding lint because the viewer has no way back.
For a hidden target page, use openOverlay instead of drill.
The data-binding lint flags a bound param that no target panel declares.

Available on any panel type that accepts onClick, and on every panel type via contextMenu.

Spec

View spec

[
  {
    "id": "rev-by-region",
    "type": "chart:bar",
    "title": "Revenue by region",
    "data": {
      "query": "SELECT region, SUM(amount) AS revenue FROM orders GROUP BY 1"
    },
    "spec": {
      "categoryField": "region",
      "valueField": "revenue"
    },
    "onClick": {
      "type": "drill",
      "label": "Drill into {category}",
      "targetPage": "region-detail",
      "param": "region",
      "valueFrom": "category",
      "valueType": "string"
    }
  },
  {
    "id": "orders-in-region",
    "type": "table",
    "title": "Orders in region",
    "data": {
      "query": "SELECT order_id, customer, amount FROM orders WHERE region = %(region)s ORDER BY amount DESC",
      "params": {
        "region": null
      }
    },
    "spec": {
      "columns": [
        {
          "field": "order_id"
        },
        {
          "field": "customer"
        },
        {
          "field": "amount"
        }
      ]
    }
  }
]

The second panel, orders-in-region, lives on the region-detail page and declares the region param its query reads.

Try it live

Open the feature-tour dashboard in the live demo

Open feature-tour and click a segment of the stacked region chart, ft-g-region, on page growth: its onClick is a drill that navigates to the visible customer-book page with the clicked region bound as region. The drill works in the read-only demo.

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.