Colour and in-cell visuals

In-cell visualizations

Reach for an in-cell visualization when a plain number needs a trend, a share of a target, or a status glyph right next to it.

482,900

text: plain default

sparkline: 8-point trend

bar: inline value bar

bullet: bar, target and bands

win/loss: 8-period streak

dot: size mapped to value

heatmap: reserved, renders as text today

icon: inline SVG glyph

image: circular avatar shape

Renewed, see contract

markdown: bold text and a link

What you can do

TableCell.kind is a oneOf across 10 kinds: text, sparkline, bar, bullet, winloss, dot, heatmap, icon, image, and markdown.
8 of the 10 draw today: sparkline, bar, bullet, winloss, dot, icon, image, and markdown. heatmap is reserved and falls back to plain text; text is the plain default and needs no cell property at all.
sparkline and winloss both read a source, which is either valuesField (one field holding an array) or valuesFromColumns (a list of column field names).
icon takes a name (or nameField) from a 32-name allow-list of arrows, flags, and status glyphs, plus an optional color or colorField.
image takes a src (or srcField), a shape of rect or circle, a height between 8 and 200, and alt text.
bar, bullet, and dot share a numeric domain, either auto or an explicit [min, max] pair.

cell is set per column on a table panel; it has no equivalent on a chart:* panel, and only one kind applies per column.

Spec

View spec

{
  "id": "rep-scorecard-table",
  "type": "table",
  "title": "Rep scorecard",
  "data": {
    "rows": [
      {
        "rep": "A. Chen",
        "trend": [
          4,
          6,
          5,
          8,
          9
        ],
        "share": 41,
        "quota": 92,
        "wl": [
          1,
          1,
          0,
          1
        ],
        "score": 7,
        "status": "check",
        "logo": "https://example.com/logos/acme.png",
        "note": "**On track**"
      }
    ]
  },
  "spec": {
    "columns": [
      {
        "field": "rep",
        "label": "Rep"
      },
      {
        "field": "trend",
        "cell": {
          "kind": "sparkline",
          "type": "line",
          "source": {
            "valuesField": "trend"
          }
        }
      },
      {
        "field": "share",
        "cell": {
          "kind": "bar",
          "domain": "auto"
        }
      },
      {
        "field": "quota",
        "cell": {
          "kind": "bullet",
          "valueField": "quota",
          "target": 100,
          "domain": [
            0,
            120
          ]
        }
      },
      {
        "field": "wl",
        "cell": {
          "kind": "winloss",
          "source": {
            "valuesField": "wl"
          }
        }
      },
      {
        "field": "score",
        "cell": {
          "kind": "dot",
          "domain": [
            0,
            10
          ]
        }
      },
      {
        "field": "status",
        "cell": {
          "kind": "icon",
          "name": "check"
        }
      },
      {
        "field": "logo",
        "cell": {
          "kind": "image",
          "srcField": "logo",
          "shape": "circle",
          "height": 24,
          "alt": "Acme logo"
        }
      },
      {
        "field": "note",
        "cell": {
          "kind": "markdown",
          "mode": "inline"
        }
      }
    ]
  }
}

sparkline and winloss need a source; icon’s name comes from the 32-item allow-list, not a free string.

Try it live

Open the rich-tables template in the Builder

Open the rich-tables template, page p2-incell, panel p2-vocab for 7 cell kinds (bullet, winloss, dot, bar, icon, image, sparkline) in one table; panel p2-applied shows sparkline against real data. Neither panel uses markdown or heatmap.

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.