Table

A styled <table>, not a data grid.

You write the markup — thead, tbody, th, td — and this supplies the borders, spacing, hover and sticky header, so a table looks like the rest of the kit without inventing a column API that every app would immediately outgrow.

<Table caption="Volumes" stickyHeader>
  <thead><tr><th>Name</th><th class="text-right">Size</th></tr></thead>
  <tbody><tr><td>volume1</td><td class="text-right tabular-nums">4 TB</td></tr></tbody>
</Table>

The wrapper scrolls horizontally and is focusable when it does — a keyboard user must be able to reach content that only exists off-screen. A hovered row is rounded like a hovered Tree row. A <tr> cannot be rounded, so the colour goes on the cells and the outer cells round.

Layout

<script lang="ts">
	import { Table } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
caption	string	—	Describes the table. Rendered visibly unless captionHidden.
captionHidden	boolean	false	Keeps the caption for screen readers but hides it visually.
stickyHeader	boolean	false	Keeps the header row visible while the body scrolls.
group	boolean	false	Each <tbody> is one item: hovering any of its rows lights them all, as one rounded block. For a row with a detail row under it.
class	string	—	Merged with the component's own classes, last — so yours win.
children required	Snippet	—	The content.

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<Table caption="Volumes and what they hold" captionHidden>
	<thead>
		<tr><th>Volume</th><th>Files</th><th class="text-right">Size</th></tr>
	</thead>
	<tbody>
		<tr><td>volume1</td><td class="tabular-nums">2.56M</td><td class="text-right tabular-nums">527 GB</td></tr>
		<tr><td>volume2</td><td class="tabular-nums">184k</td><td class="text-right tabular-nums">42 GB</td></tr>
		<tr><td>backups</td><td class="tabular-nums">9.1k</td><td class="text-right tabular-nums">1.2 TB</td></tr>
	</tbody>
</Table>

Layout · Card · StatCard · Accordion · AccordionItem · Collapsible · Separator · Scroller

---

← All components · Getting started · Theming · source