Table

A composable table for displaying rows of structured data such as invoices, users, or resources. Reach for it whenever tabular data needs a header, aligned columns, and hoverable rows. Every part is an unstyled wrapper around a native table element, so semantics and accessibility come for free. Anatomy: Table (scroll container + <table>) > TableHeader / TableBody > TableRow > TableHead (column label) and TableCell (data), with an optional TableCaption.

A static table

These primitives are for a handful of rows with no controls — a summary, a spec sheet, a receipt. The moment the list needs search, filtering, sorting or paging it becomes a DataTable; hand-rolling those from here is how the same toolbar and empty row end up copied across screens. Wrap it in a plain bg-card rounded-lg overflow-hidden container: no border, and no shadow either, because a table sits on the page rather than above it.

Order	Customer	Total
3412	Ada Lovelace	$248.90
3411	Grace Hopper	$89.00
3410	Alan Turing	$132.50
3409	Katherine Johnson	$512.20

<div class="bg-card w-full overflow-hidden rounded-lg">
	<Table>
		<TableHeader>
			<TableRow>
				<TableHead>Order</TableHead>
				<TableHead>Customer</TableHead>
				<TableHead class="text-right">Total</TableHead>
			</TableRow>
		</TableHeader>
		<TableBody>
			{#each rows as order (order.id)}
				<TableRow>
					<TableCell>{order.id}</TableCell>
					<TableCell>{order.customer}</TableCell>
					<TableCell class="text-right">{money(order.total)}</TableCell>
				</TableRow>
			{/each}
		</TableBody>
	</Table>
</div>

Numbers and a caption

Money and counts go right-aligned so their digits line up in a column; a caption says what the table is when no heading above it does. TableRow's own border-b stays — that is a content separator between rows, not a surface edge.

Orders settled in the last 24 hours.
Order	Items	Total
3412	3	$248.90
3411	1	$89.00
3410	2	$132.50
3409	5	$512.20

<div class="bg-card w-full overflow-hidden rounded-lg">
	<Table>
		<TableCaption>Orders settled in the last 24 hours.</TableCaption>
		<TableHeader>
			<TableRow>
				<TableHead>Order</TableHead>
				<TableHead class="text-right">Items</TableHead>
				<TableHead class="text-right">Total</TableHead>
			</TableRow>
		</TableHeader>
		<TableBody>
			{#each rows as order (order.id)}
				<TableRow>
					<TableCell>{order.id}</TableCell>
					<TableCell class="text-right tabular-nums">{order.items}</TableCell>
					<TableCell class="text-right tabular-nums"
						>{money(order.total)}</TableCell
					>
				</TableRow>
			{/each}
		</TableBody>
	</Table>
</div>

API

`Table`

Prop	Type	Default	Description
`children` required	`import('svelte').Snippet`		Table content — compose `TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell`, and `TableCaption`.
`class`	`string`		Additional Tailwind classes merged onto the root `<table>` element.

`TableHeader`

Groups the header row(s) of a Table. Renders a native <thead>; expects a TableRow of TableHead children.

Prop	Type	Default	Description
`children` required	`import('svelte').Snippet`		Header rows, typically a TableRow of TableHead cells.
`class`	`string`		Additional Tailwind classes merged onto the `<thead>`.

`TableBody`

Groups the data rows of a Table. Renders a native <tbody>; expects TableRow children of TableCell cells.

Prop	Type	Default	Description
`children` required	`import('svelte').Snippet`		Data rows, typically TableRow elements of TableCell cells.
`class`	`string`		Additional Tailwind classes merged onto the `<tbody>`.

`TableRow`

A single Table row. Pass href to make the entire row navigate on click (via SvelteKit's goto) or Enter, while keeping nested interactive controls — a row-actions menu, a checkbox — clickable without extra stopPropagation handling.

Prop	Type	Description
`children` required	`import('svelte').Snippet`	Row content, typically TableCell/TableHead elements.
`href`	`string`	Navigates to this URL when the row (but not a nested interactive element) is clicked or activated with Enter.
`class`	`string`	Additional Tailwind classes merged onto the `<tr>`.
`onclick`	`(event: MouseEvent) => void`	Click handler invoked before the `href` navigation logic runs.

`TableHead`

A column header cell inside a TableHeader row. Renders a native <th>.

Prop	Type	Default	Description
`children`	`import('svelte').Snippet`		Column label content.
`class`	`string`		Additional Tailwind classes merged onto the `<th>` (e.g. `text-right` for numeric columns).

`TableCell`

A data cell inside a TableBody row. Renders a native <td>.

Prop	Type	Default	Description
`children`	`import('svelte').Snippet`		Cell content.
`class`	`string`		Additional Tailwind classes merged onto the `<td>` (e.g. `text-right` for numeric values).

`TableCaption`

A caption describing or summarizing a Table's contents. Renders below the table via the native <caption> element.

Prop	Type	Default	Description
`children` required	`import('svelte').Snippet`		Caption text.
`class`	`string`		Additional Tailwind classes merged onto the `<caption>`.