Skip to main content
Tables display structured data using HTML table semantics. They’re composed from sub-components — TableHeader, TableBody, TableRow, TableHead, TableCell, and TableCaption — that map directly to their HTML counterparts.

​
Basic Usage

​
Rich Cell Content

Table cells are containers — they can hold any component, not just text. This makes it easy to add badges, buttons, or other elements inline.

​
API Reference

Table Parameters

​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

TableHead / TableCell Parameters

​
content
str | None
Text content. Can be passed as a positional argument. Alternatively, use child components for rich content.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes (e.g., "text-right" for right-aligned columns).

TableCaption Parameters

​
content
str
required
Caption text. Can be passed as a positional argument.

​
Protocol Reference

Table
{
  "type": "Table",
  "children?": "[Component]",
  "cssClass?": "string"
}
TableHead / TableCell
{
  "type": "TableCell",
  "children?": "[Component]",
  "content?": "string",
  "cssClass?": "string"
}
TableCaption
{
  "type": "TableCaption",
  "content": "string (required)",
  "cssClass?": "string"
}
For the complete protocol schema, see Table, TableHead / TableCell, TableCaption.