Data Display Components

Table, TableRow, TableCell

Table renders an HTML <table>. Its children must be TableRow nodes, and each TableRow's children must be TableCell nodes — the spec fails validation otherwise.

TableRow props:

Prop	Type	Default	Description
header	boolean	false	Renders as a header row (bold text, light background fill).

TableCell props:

Prop	Type	Description
width	number | string	Explicit column width: a non-negative number (px), or a length such as "120px", "50%", "8rem", "10em", "1fr", or "auto". Any other value is rejected by validation and ignored when rendered. Overrides colSize.
colSize	"xs" | "sm" | "md" | "lg" | "xl"	Preset column width (60 / 100 / 160 / 240 / 320px).
colSpan	number	HTML colspan. Must be a positive integer.
rowSpan	number	HTML rowspan. Must be a positive integer.
padding	number	Cell padding in px. Defaults to 8.
align	"start" | "center" | "end"	Horizontal text alignment.
vAlign	"start" | "center" | "end"	Vertical text alignment.

{
  "component": "Table",
  "children": [
    {
      "component": "TableRow",
      "props": { "header": true },
      "children": [
        { "component": "TableCell", "children": "Item" },
        { "component": "TableCell", "props": { "align": "end" }, "children": "Qty" }
      ]
    },
    {
      "component": "TableRow",
      "children": [
        { "component": "TableCell", "children": "Widget" },
        { "component": "TableCell", "props": { "align": "end" }, "children": "3" }
      ]
    }
  ]
}

Chart

Renders a bar or line chart as an inline SVG.

Prop	Type	Description
type	"bar" | "line"	Required.
data	string	Required. The name of a declared variable holding an array of data-point objects — never inline data.
xKey	string	Required. Key in each data-point object used for the x-axis label.
dataKeys	string	Required. Comma-separated list of numeric keys to plot, e.g. "revenue,target".
colors	string	Comma-separated hex colors, matched by index to dataKeys.
labels	string	Comma-separated legend labels, matched by index to dataKeys.
height	number	Chart height in px. Defaults to 200.
showLegend	boolean	Whether to render a legend. Defaults to true.

{
  "component": "Chart",
  "props": {
    "type": "bar",
    "data": "monthlyRevenue",
    "xKey": "month",
    "dataKeys": "revenue,target",
    "labels": "Revenue,Target",
    "showLegend": true
  }
}

Declare monthlyRevenue with type array, using rows such as { "month": "Jan", "revenue": 100, "target": 120 } in its default or tool input. Use nonnegative numeric series: negative or non-numeric values render as zero, and non-object rows are ignored. Bars and points scale against the largest value in the data, so fractional series such as rates fill the plot; a chart where every value is zero renders flat. If the named variable has no usable rows, the chart renders a "No chart data" placeholder.

Badge

Renders a small status/category tag — useful inside a Table cell or next to a Title.

Prop	Type	Default	Description
label	string	—	Required. Badge text. Supports {variable} interpolation.
color	"secondary" | "success" | "danger" | "warning" | "info" | "discovery"	"secondary"	Color theme.
variant	"solid" | "soft" | "outline"	"soft"	Fill style.
size	"sm" | "md" | "lg"	"sm"	Text/padding size.
pill	boolean	false	Fully rounded corners instead of the default 6px radius.

{ "component": "Badge", "props": { "label": "Shipped", "color": "success", "pill": true } }

ListView, ListViewItem

ListView and ListViewItem render as vertical flex containers — structurally the same as Col (same gap/padding/justify/align/width props) — used to group a repeated list of records rather than generic page layout. Compose a list by nesting one ListViewItem per row inside a ListView.

{
  "component": "ListView",
  "props": { "gap": 4 },
  "children": [
    { "component": "ListViewItem", "children": [{ "component": "Text", "props": { "value": "Item one" } }] },
    { "component": "ListViewItem", "children": [{ "component": "Text", "props": { "value": "Item two" } }] }
  ]
}