Table

Tables with configurable headers, dividers, and overflow.

Background

ColumnsBorder

Component	Placement	Use it for
Badge	Inline	A short label
Hint	Inline	An explanation on hover
Callout	Block	An important detail
Accordion	Block	Expandable content

Usage#

Separate cells with pipes and place a divider below the header row.

| Component | Use it for          |
| --------- | ------------------- |
| Badge     | A short label       |
| Callout   | An important detail |
| Accordion | Expandable content  |

Background#

Wrap a table in TableOptions and set rowShading to header, striped, or none.

:::TableOptions{rowShading="striped"}

| Component | Use it for          |
| --------- | ------------------- |
| Badge     | A short label       |
| Callout   | An important detail |
| Accordion | Expandable content  |

:::

Dividers & Border#

Set columnDividers=true to separate columns. Use frame="none" to remove the outer border while keeping row dividers.

:::TableOptions{columnDividers=true frame="none"}

| Component | Use it for          |
| --------- | ------------------- |
| Badge     | A short label       |
| Callout   | An important detail |

:::

Column Widths#

Set columnWidths in column order using CSS lengths, percentages, or auto. Use nowrapColumns with one-based column numbers to keep those cells on one line. Wide tables scroll horizontally.

:::TableOptions{columnWidths=["35%","auto"] nowrapColumns=[1]}

| Component | Use it for          |
| --------- | ------------------- |
| Badge     | A short label       |
| Callout   | An important detail |

:::

Reference#

columnWidthsDefault []: string[]; Preferred widths in column order: CSS lengths, percentages, or auto.

columnDividersDefault false: boolean; Show separators between adjacent columns.

frameDefault "outline": "none" | "outline"; Outer table frame.

nowrapColumnsDefault []: number[]; One-based columns whose contents must remain on one line.

rowShadingDefault "header": "header" | "none" | "striped"; Background treatment for rows.