Notes and actions

Table actions

Add row or column actions to a table when a reader should filter, drill, or open more detail straight from a row instead of leaving the table to find it.

What you can do

  • A table’s panel-level onClick binds the whole clicked row as the action’s datum, using the same ElementClickAction (filter, drill, or openOverlay) any chart panel uses; there is no separate per-row action property.
  • Every actionable row is one tab stop; Enter or Space activates it the same as a click, so a table’s onClick is keyboard-reachable without extra markup.
  • A panel-level contextMenu.actions right-click menu works on a table panel exactly as it does on a chart: at least one action mixing filter, drill, link, copy, export, and openOverlay.
  • A TableColumn.contextMenu adds actions to one column only; those actions render below the panel-level menu’s actions in the same popover, not in a separate menu.
  • Every action, whether bound at the panel level (onClick, contextMenu) or the column level (contextMenu), still requires label, the text a reader sees before or during the click.

Panel-level onClick and contextMenu apply to a table panel the same as any other panel type; TableColumn.contextMenu is table-only, since no other panel type has columns.

Spec

View spec
{
  "id": "reps-by-region-table",
  "type": "table",
  "title": "Reps by region",
  "data": {
    "rows": [
      {
        "region": "West",
        "rep": "A. Chen",
        "revenue": 410000
      },
      {
        "region": "East",
        "rep": "B. Ortiz",
        "revenue": 390000
      }
    ]
  },
  "spec": {
    "columns": [
      {
        "field": "region",
        "label": "Region"
      },
      {
        "field": "rep",
        "label": "Rep",
        "contextMenu": {
          "actions": [
            {
              "type": "copy",
              "label": "Copy rep name",
              "copy": "rep"
            }
          ]
        }
      },
      {
        "field": "revenue",
        "format": {
          "type": "currency",
          "currency": "USD",
          "compact": true
        },
        "align": "right"
      }
    ]
  },
  "onClick": {
    "type": "filter",
    "label": "Filter to {region}",
    "param": "region",
    "valueFrom": "region",
    "valueType": "string"
  },
  "contextMenu": {
    "actions": [
      {
        "type": "drill",
        "label": "Drill into {region}",
        "targetPage": "region-detail",
        "param": "region",
        "valueFrom": "region",
        "valueType": "string"
      },
      {
        "type": "export",
        "label": "Export result (CSV)",
        "format": "csv",
        "scope": "result"
      }
    ]
  }
}

onClick binds the whole clicked row and templates {region} into its label, the same as a chart’s onClick; the panel-level contextMenu adds a drill and an export action, and rep’s own contextMenu adds one more copy action that renders below them.

Try it live

Open the rich-tables template in the Builder

No bundled template wires a table onClick, so that half is read-the-block; right-click a row of p1-reps in the rich-tables template to see a table’s panel-level contextMenu live.

Build it in dvt

Every table capability 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.

No spam. We use this to reach out directly, nothing else.