styles block that controls header appearance, body cells, alternating row colors, and border presets. The table() builder validates every input through Zod and produces a canonical table document ready for placement.
You can author a table with the table() builder function or with the inline { type: 'table', columns, rows, ... } object syntax. The builder supports the full option set including styles and showGridLines; the inline syntax supports columns, rows, and headerRows.
Basic example
Columns
Columns define the table’s structure. Each column can be a plain string header label, or a rich object for alignment, width, and per-column styling.Simple string columns
When you pass a string, the SDK uses it as the header label and auto-generates a stable key from it (lowercased, spaces replaced with underscores).Rich column objects
Use a rich column object when you need to control alignment, width, or per-column cell styling.The column header label displayed in the first row.
Stable column key used internally to map row cell values. Auto-generated from
header when omitted. Set this explicitly when you need predictable keys for later chart operations or incremental updates.Horizontal text alignment for all cells in this column, including the header. Can be overridden per cell.
Vertical cell alignment for all cells in this column.
Fixed column width in pixels. When omitted, columns share available width equally.
Per-column style applied to all body cells in this column (not the header). See CellStyle below.
Rows
Rows are arrays of arrays. Each inner array holds the cell values for one row, positionally matching the columns definition. Cell values can be strings, numbers,null, or rich cell objects.
Simple cell values
Strings and numbers are the most common cell types. Numbers are converted to strings automatically.null for an empty cell:
Rich cell objects
When you need per-cell styling, span merging, or custom alignment, use a rich cell object.Cell text content as a plain string.
Advanced: a pre-built rich text document for content with inline formatting (bold, italic, inline code, etc.). Use
text for plain strings.Horizontal alignment override for this cell, overriding the column’s default.
Vertical alignment override for this cell.
Background color override for this cell as a CSS color string.
Number of columns this cell spans. Must be a positive integer.
Number of rows this cell spans. Must be a positive integer.
Table styles
Thestyles object controls the visual appearance of the entire table. Pass it as the styles key on your table input.
Style applied to all header row cells. See CellStyle fields.
Default style applied to all body cells (overridden by column styles and per-cell styles).
Alternating row background colors.
even applies to rows at index 0, 2, 4… and odd to rows at index 1, 3, 5… (zero-indexed, excluding the header).Border preset for the table:
'none'— no borders'horizontal'— lines between rows only'vertical'— lines between columns only'all'— full grid of borders'outer'— border around the table perimeter only
CSS color for borders drawn by the
borders preset.Border thickness in pixels. Defaults to 1.
Corner radius in pixels for the outer table border.
CellStyle fields
CellStyle applies to header cells, body cells, column defaults, and alternating row entries.
Cell background color as a CSS color string.
Horizontal text alignment.
Vertical text alignment within the cell.
Text color.
Font family for cell text.
Font size as a CSS string, e.g.
'14px'.Font weight, e.g.
600 or 'bold'.Per-cell border color override.
Cell padding as a CSS shorthand, e.g.
'8px 16px'.Other options
Number of rows to treat as header rows. Defaults to
1. Set to 0 to suppress header styling, or 2 for a two-row header with merged spans above.When
true, renders subtle grid lines between all cells. Independent of the borders style preset.