Table
A styled data table around native `<table>`: zebra, bordered, hover, sticky header, and a sortable-header affordance.
Live demo
Table dresses a native <table> in xtyle styling without taking over its markup. The binding is a thin wrapper that relays consumer-authored rows: you write the real <thead>/<tbody>/<tr>/<th>/<td> and tag them with the xtyle-table__* part classes, and the wrapper supplies the scroll container, variant, size, hover, and sticky behavior.
Rows you render after mount get decorated automatically by a subtree observer, so a keyed {#each} or a live feed needs no classing at all. A framework that would rather class rows at author time (skipping the observer entirely) can, and to keep that path from hard-coding magic strings, @xtyle/core exports the part-class names as the typed tableParts map (tableParts.head, .row, .cell, .headerCell, .body, …); the same constants the decorator itself writes, so a part rename can't drift silently. Variants default/striped/bordered set the row and cell chrome; compact/normal sizes set the cell padding. The sortable-header affordance renders a sort glyph and exposes an aria-sort hook on the header cell; the engine is presentation-only, so the consumer wires the actual sort and toggles aria-sort (ascending/descending/none), and the glyph rotates to match. scope belongs on every header cell so screen readers associate it with its row or column.
When to use
How this component composes with the rest of the set.
aria-sort between ascending/descending/none; the glyph follows. Props
5 props, straight from the manifest.
| Prop | Type | Default | Bindings | Description |
|---|---|---|---|---|
Appearance
Variants
default
Plain rows separated by a bottom rule; no class needed.
striped
Alternating body-row backgrounds for scannability.
bordered
A full grid; every cell gets a border.
Sizes
normal
Default density.
compact
Tighter cell padding.
States
hover
Pointer over a body row (with hover); the row paints the hover tint.
sortable
A sortable header cell: pointer cursor and a hover tint behind the label.
sorted
A header cell with aria-sort set; the glyph colors and points up (asc) or down (desc).
focus-visible
Keyboard focus on a sortable header: an inset token ring, plus a transparent outline that becomes real in forced-colors mode.
scroll-focus
Keyboard focus on the scrollable wrap, which turns tabbable only when the table overflows: an outline sitting outside the border box, so the scrolled table can't cover it.
Anatomy
The named parts that make up the component, with their selectors.
wrap
The horizontal-scroll container that clips the table to its width and rounds the corners.
table
The <table> itself: collapsed borders, surface background, base typography.
caption
An optional <caption> rendered above the table as a muted label.
head
The <thead> group; its last header row carries the heavier under-rule.
body
The <tbody> group that zebra striping and hover target.
row
A <tr>: the unit zebra striping and row hover apply to.
header-cell
A <th>: semibold ink on a tint, with scope and an optional sortable affordance.
cell
A <td>: the standard data cell with a row-separating bottom rule.
sort
The decorative sort glyph inside a sortable header; rotates and colors per aria-sort.
footer-cell
A <td>/<th> in <tfoot>: a summary cell on a tint above a heavy top rule.
Tokens & coverage
What the component consumes, checked live against what the algorithm produces.
Live coverage check against the xtyle-default register
(derive(xtyleDefault, { anchors }) →
coverComponent(manifest, register)). Every token this component
consumes must be a key the algorithm produces.
--accent-text
--bg-1
--bg-2
--border-normal
--border-thick
--border-thin
--duration-fast
--ease-standard
--fg-0
--fg-1
--fg-2
--fg-3
--font-sans
--leading-normal
--line
--line-2
--radius-lg
--ring
--space-1
--space-2
--space-3
--space-4
--state-hover
--text-body
--text-sm
--weight-medium
--weight-semibold
Slots
The consumer-authored <table> (with xtyle-table__* part classes on its rows and cells).
Accessibility
<table> with <thead>/<tbody>/<tfoot>, <th scope>, and an optional <caption>. Row/column semantics come for free. scope (col or row) so assistive tech associates data cells correctly. <caption> needs an aria-label; the binding warns at runtime when both are missing. aria-sort (ascending/descending/none), not via the glyph, which is aria-hidden. tabindex stop only while it overflows), and focus on it shows an outline, so a keyboard user can see they've landed there before arrowing through it (WCAG 2.4.7). Code
Variants, sticky header, and a sortable column
Striped rows with hover and a sticky, sortable header; the consumer supplies rows and owns the sort.
<xtyle-table variant="striped" hover sticky aria-label="Recent orders">
<table>
<caption class="xtyle-table__caption">Recent orders</caption>
<thead class="xtyle-table__head">
<tr class="xtyle-table__row">
<th class="xtyle-table__header-cell xtyle-table__header-cell--sortable" scope="col" aria-sort="ascending">
<span class="xtyle-table__header-content">Order
<span class="xtyle-table__sort" aria-hidden="true">
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 8l5 6H7l5-6Z" /></svg>
</span>
</span>
</th>
<th class="xtyle-table__header-cell" scope="col">Customer</th>
<th class="xtyle-table__header-cell" scope="col">Total</th>
</tr>
</thead>
<tbody class="xtyle-table__body">
<tr class="xtyle-table__row">
<td class="xtyle-table__cell">#1024</td>
<td class="xtyle-table__cell">Ada Lovelace</td>
<td class="xtyle-table__cell">$42.00</td>
</tr>
<tr class="xtyle-table__row">
<td class="xtyle-table__cell">#1025</td>
<td class="xtyle-table__cell">Alan Turing</td>
<td class="xtyle-table__cell">$17.50</td>
</tr>
</tbody>
</table>
</xtyle-table><script lang="ts">
import { Table } from "@xtyle/svelte";
let sort: "ascending" | "descending" = $state("ascending");
</script>
<Table variant="striped" hover sticky ariaLabel="Recent orders">
<table>
<caption class="xtyle-table__caption">Recent orders</caption>
<thead class="xtyle-table__head">
<tr class="xtyle-table__row">
<th
class="xtyle-table__header-cell xtyle-table__header-cell--sortable"
scope="col"
aria-sort={sort}
tabindex="0"
onclick={() => (sort = sort === "ascending" ? "descending" : "ascending")}
>
<span class="xtyle-table__header-content">Order
<span class="xtyle-table__sort" aria-hidden="true">
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 8l5 6H7l5-6Z" /></svg>
</span>
</span>
</th>
<th class="xtyle-table__header-cell" scope="col">Customer</th>
<th class="xtyle-table__header-cell" scope="col">Total</th>
</tr>
</thead>
<tbody class="xtyle-table__body">
<tr class="xtyle-table__row">
<td class="xtyle-table__cell">#1024</td>
<td class="xtyle-table__cell">Ada Lovelace</td>
<td class="xtyle-table__cell">$42.00</td>
</tr>
</tbody>
</table>
</Table>---
import { Table } from "@xtyle/astro";
---
<Table variant="bordered" size="compact" aria-label="Pricing">
<table>
<thead class="xtyle-table__head">
<tr class="xtyle-table__row">
<th class="xtyle-table__header-cell" scope="col">Plan</th>
<th class="xtyle-table__header-cell" scope="col">Price</th>
</tr>
</thead>
<tbody class="xtyle-table__body">
<tr class="xtyle-table__row">
<th class="xtyle-table__header-cell" scope="row">Starter</th>
<td class="xtyle-table__cell">$0</td>
</tr>
<tr class="xtyle-table__row">
<th class="xtyle-table__header-cell" scope="row">Pro</th>
<td class="xtyle-table__cell">$12</td>
</tr>
</tbody>
</table>
</Table>Author-time classing with the typed `tableParts`
When you render rows yourself, class them from the exported tableParts map instead of string literals; a part rename is then a compile error, not a silent style regression.
<script lang="ts">
import { Table } from "@xtyle/svelte";
import { tableParts } from "@xtyle/core";
let rows = $state([
{ id: "#1024", customer: "Ada Lovelace", total: "$42.00" },
{ id: "#1025", customer: "Alan Turing", total: "$17.50" },
]);
</script>
<Table variant="striped" hover ariaLabel="Recent orders">
<table>
<thead class={tableParts.head}>
<tr class={tableParts.row}>
<th class={tableParts.headerCell} scope="col">Order</th>
<th class={tableParts.headerCell} scope="col">Customer</th>
<th class={tableParts.headerCell} scope="col">Total</th>
</tr>
</thead>
<tbody class={tableParts.body}>
{#each rows as row (row.id)}
<tr class={tableParts.row}>
<td class={tableParts.cell}>{row.id}</td>
<td class={tableParts.cell}>{row.customer}</td>
<td class={tableParts.cell}>{row.total}</td>
</tr>
{/each}
</tbody>
</table>
</Table>