---
title: Table
description: Structured data display with rows, columns, headers, and captions.
icon: table
---

import { ComponentPreview } from '/snippets/component-preview.mdx'

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

<ComponentPreview json={{"view":{"type":"Table","children":[{"type":"TableCaption","content":"Recent invoices"},{"type":"TableHeader","children":[{"type":"TableRow","children":[{"type":"TableHead","content":"Invoice"},{"type":"TableHead","content":"Status"},{"type":"TableHead","content":"Method"},{"cssClass":"text-right","type":"TableHead","content":"Amount"}]}]},{"type":"TableBody","children":[{"type":"TableRow","children":[{"cssClass":"font-medium","type":"TableCell","content":"INV-001"},{"type":"TableCell","content":"Paid"},{"type":"TableCell","content":"Credit Card"},{"cssClass":"text-right","type":"TableCell","content":"$250.00"}]},{"type":"TableRow","children":[{"cssClass":"font-medium","type":"TableCell","content":"INV-002"},{"type":"TableCell","content":"Pending"},{"type":"TableCell","content":"PayPal"},{"cssClass":"text-right","type":"TableCell","content":"$150.00"}]},{"type":"TableRow","children":[{"cssClass":"font-medium","type":"TableCell","content":"INV-003"},{"type":"TableCell","content":"Paid"},{"type":"TableCell","content":"Bank Transfer"},{"cssClass":"text-right","type":"TableCell","content":"$350.00"}]}]}]}}} playground=" ">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import (
    Table,
    TableHeader,
    TableBody,
    TableRow,
    TableHead,
    TableCell,
    TableCaption,
)

with Table():
    TableCaption("Recent invoices")
    with TableHeader():
        with TableRow():
            TableHead("Invoice")
            TableHead("Status")
            TableHead("Method")
            TableHead("Amount", css_class="text-right")
    with TableBody():
        with TableRow():
            TableCell("INV-001", css_class="font-medium")
            TableCell("Paid")
            TableCell("Credit Card")
            TableCell("$250.00", css_class="text-right")
        with TableRow():
            TableCell("INV-002", css_class="font-medium")
            TableCell("Pending")
            TableCell("PayPal")
            TableCell("$150.00", css_class="text-right")
        with TableRow():
            TableCell("INV-003", css_class="font-medium")
            TableCell("Paid")
            TableCell("Bank Transfer")
            TableCell("$350.00", css_class="text-right")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "Table",
    "children": [
      {"type": "TableCaption", "content": "Recent invoices"},
      {
        "type": "TableHeader",
        "children": [
          {
            "type": "TableRow",
            "children": [
              {"type": "TableHead", "content": "Invoice"},
              {"type": "TableHead", "content": "Status"},
              {"type": "TableHead", "content": "Method"},
              {"cssClass": "text-right", "type": "TableHead", "content": "Amount"}
            ]
          }
        ]
      },
      {
        "type": "TableBody",
        "children": [
          {
            "type": "TableRow",
            "children": [
              {"cssClass": "font-medium", "type": "TableCell", "content": "INV-001"},
              {"type": "TableCell", "content": "Paid"},
              {"type": "TableCell", "content": "Credit Card"},
              {"cssClass": "text-right", "type": "TableCell", "content": "$250.00"}
            ]
          },
          {
            "type": "TableRow",
            "children": [
              {"cssClass": "font-medium", "type": "TableCell", "content": "INV-002"},
              {"type": "TableCell", "content": "Pending"},
              {"type": "TableCell", "content": "PayPal"},
              {"cssClass": "text-right", "type": "TableCell", "content": "$150.00"}
            ]
          },
          {
            "type": "TableRow",
            "children": [
              {"cssClass": "font-medium", "type": "TableCell", "content": "INV-003"},
              {"type": "TableCell", "content": "Paid"},
              {"type": "TableCell", "content": "Bank Transfer"},
              {"cssClass": "text-right", "type": "TableCell", "content": "$350.00"}
            ]
          }
        ]
      }
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## 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.

<ComponentPreview json={{"view":{"type":"Table","children":[{"type":"TableHeader","children":[{"type":"TableRow","children":[{"type":"TableHead","content":"Name"},{"type":"TableHead","content":"Status"},{"type":"TableHead","content":"Role"}]}]},{"type":"TableBody","children":[{"type":"TableRow","children":[{"type":"TableCell","content":"Alice Johnson"},{"type":"TableCell","children":[{"type":"Badge","label":"Active","variant":"success"}]},{"type":"TableCell","content":"Admin"}]},{"type":"TableRow","children":[{"type":"TableCell","content":"Bob Smith"},{"type":"TableCell","children":[{"type":"Badge","label":"Inactive","variant":"secondary"}]},{"type":"TableCell","content":"Viewer"}]}]}]}}} playground=" ">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import (
    Badge,
    Table,
    TableBody,
    TableHead,
    TableHeader,
    TableRow,
    TableCell,
)

with Table():
    with TableHeader():
        with TableRow():
            TableHead("Name")
            TableHead("Status")
            TableHead("Role")
    with TableBody():
        with TableRow():
            TableCell("Alice Johnson")
            with TableCell():
                Badge("Active", variant="success")
            TableCell("Admin")
        with TableRow():
            TableCell("Bob Smith")
            with TableCell():
                Badge("Inactive", variant="secondary")
            TableCell("Viewer")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "Table",
    "children": [
      {
        "type": "TableHeader",
        "children": [
          {
            "type": "TableRow",
            "children": [
              {"type": "TableHead", "content": "Name"},
              {"type": "TableHead", "content": "Status"},
              {"type": "TableHead", "content": "Role"}
            ]
          }
        ]
      },
      {
        "type": "TableBody",
        "children": [
          {
            "type": "TableRow",
            "children": [
              {"type": "TableCell", "content": "Alice Johnson"},
              {
                "type": "TableCell",
                "children": [{"type": "Badge", "label": "Active", "variant": "success"}]
              },
              {"type": "TableCell", "content": "Admin"}
            ]
          },
          {
            "type": "TableRow",
            "children": [
              {"type": "TableCell", "content": "Bob Smith"},
              {
                "type": "TableCell",
                "children": [{"type": "Badge", "label": "Inactive", "variant": "secondary"}]
              },
              {"type": "TableCell", "content": "Viewer"}
            ]
          }
        ]
      }
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## API Reference

<Card icon="code" title="Table Parameters">
<ParamField body="css_class" type="str | None" default="None">
  Additional Tailwind CSS classes.
</ParamField>
</Card>

<Card icon="code" title="TableHead / TableCell Parameters">
<ParamField body="content" type="str | None">
  Text content. Can be passed as a positional argument. Alternatively, use child components for rich content.
</ParamField>

<ParamField body="css_class" type="str | None" default="None">
  Additional Tailwind CSS classes (e.g., `"text-right"` for right-aligned columns).
</ParamField>
</Card>

<Card icon="code" title="TableCaption Parameters">
<ParamField body="content" type="str" required>
  Caption text. Can be passed as a positional argument.
</ParamField>
</Card>

## Protocol Reference

```json Table
{
  "type": "Table",
  "children?": "[Component]",
  "let?": "object",
  "cssClass?": "string"
}
```

```json TableHead / TableCell
{
  "type": "TableCell",
  "children?": "[Component]",
  "let?": "object",
  "content?": "string",
  "cssClass?": "string"
}
```

```json TableCaption
{
  "type": "TableCaption",
  "content": "string (required)",
  "cssClass?": "string"
}
```

For the complete protocol schema, see [Table](/protocol/table), [TableHead / TableCell](/protocol/table-cell), [TableCaption](/protocol/table-caption).
