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

A table is composed from nested sub-components that mirror HTML table structure: a Table wraps a TableHeader and a TableBody, each holding TableRows. Inside a row, use TableHead for header labels and TableCell for body data, and add an optional TableCaption to title the whole table. Build the structure with nested with blocks so the indentation matches the table’s shape.

​
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",
  "id?": "string",
  "onMount?": "any",
  "children?": "[Component]",
  "let?": "object",
  "cssClass?": "string"
}
TableHead / TableCell
{
  "type": "TableCell",
  "id?": "string",
  "onMount?": "any",
  "children?": "[Component]",
  "let?": "object",
  "content?": "string",
  "cssClass?": "string"
}
TableCaption
{
  "type": "TableCaption",
  "id?": "string",
  "onMount?": "any",
  "content": "string (required)",
  "cssClass?": "string"
}
For the complete protocol schema, see Table, TableHead / TableCell, TableCaption.