> ## Documentation Index
> Fetch the complete documentation index at: https://prefab.prefect.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Table
> Structured data display with rows, columns, headers, and captions.
export const ComponentPreview = ({json, height, resizable, bare, hideJson, playground, children}) => {
const hostRef = React.useRef(null);
const handleRef = React.useRef(null);
const cardRef = React.useRef(null);
const containerRef = React.useRef(null);
const [previewWidth, setPreviewWidth] = React.useState(null);
const [isDragging, setIsDragging] = React.useState(false);
const [playgroundHref, setPlaygroundHref] = React.useState(null);
React.useEffect(function () {
if (!playground) return;
var isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
var path = isLocal ? "/playground" : "/docs/playground";
var url = new URL(path, window.location.href);
url.hash = "code=" + playground;
setPlaygroundHref(url.href);
}, [playground]);
var jsonStr = typeof json === "string" ? json : JSON.stringify(json, null, 2);
React.useEffect(function () {
if (cardRef.current) {
var card = cardRef.current.closest(".group");
if (card) card.classList.remove("group");
}
var host = hostRef.current;
if (!host || !json) return;
function mount() {
if (!window.__prefab || !host) return;
var dark = document.documentElement.classList.contains("dark");
handleRef.current = window.__prefab.mountPreview(host, jsonStr, {
dark: dark
});
if (bare && host.shadowRoot) {
var m = host.shadowRoot.querySelector("[data-prefab-mount]");
if (m) m.style.background = "transparent";
}
}
if (window.__prefab) {
mount();
} else {
if (!window.__prefabLoading) {
if (!window.__prefabReady) {
var s = document.createElement("script");
s.src = "/renderer.js";
document.head.appendChild(s);
}
window.__prefabLoading = new Promise(function (resolve) {
function check() {
if (window.__prefabReady) {
window.__prefabReady.then(resolve);
} else {
setTimeout(check, 10);
}
}
check();
});
}
window.__prefabLoading.then(mount);
}
var observer = new MutationObserver(function () {
var dark = document.documentElement.classList.contains("dark");
if (handleRef.current) handleRef.current.setDark(dark);
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"]
});
return function () {
observer.disconnect();
if (handleRef.current) {
handleRef.current.unmount();
handleRef.current = null;
}
};
}, [json]);
function startResize(e) {
e.preventDefault();
var startX = e.clientX;
var startW = hostRef.current ? hostRef.current.offsetWidth : 0;
var maxW = containerRef.current ? containerRef.current.offsetWidth - 10 : startW;
setIsDragging(true);
function onMove(ev) {
var w = Math.max(260, Math.min(startW + (ev.clientX - startX), maxW));
setPreviewWidth(w);
}
function onUp() {
document.removeEventListener("mousemove", onMove);
document.removeEventListener("mouseup", onUp);
setIsDragging(false);
}
document.addEventListener("mousemove", onMove);
document.addEventListener("mouseup", onUp);
}
if (bare) {
return ;
}
if (resizable) {
return
{previewWidth &&
{previewWidth}px
}
{playgroundHref && }
{children}
;
}
return
{playgroundHref && }
{children}
;
};
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 `TableRow`s. 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.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
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" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"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"}
]
}
]
}
]
}
}
```
## 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.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
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" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"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"}
]
}
]
}
]
}
}
```
## API Reference
Additional Tailwind CSS classes.
Text content. Can be passed as a positional argument. Alternatively, use child components for rich content.
Additional Tailwind CSS classes (e.g., `"text-right"` for right-aligned columns).
Caption text. Can be passed as a positional argument.
## Protocol Reference
```json Table theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"type": "Table",
"id?": "string",
"onMount?": "any",
"children?": "[Component]",
"let?": "object",
"cssClass?": "string"
}
```
```json TableHead / TableCell theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"type": "TableCell",
"id?": "string",
"onMount?": "any",
"children?": "[Component]",
"let?": "object",
"content?": "string",
"cssClass?": "string"
}
```
```json TableCaption theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"type": "TableCaption",
"id?": "string",
"onMount?": "any",
"content": "string (required)",
"cssClass?": "string"
}
```
For the complete protocol schema, see [Table](/protocol/table), [TableHead / TableCell](/protocol/table-cell), [TableCaption](/protocol/table-caption).