Data display
Table
Styled table primitives with sortable header cells, built on native table elements so you control data, sorting and selection.
- Source
- src/components/ui/table.tsx
- Figma
- Table · TableCell · type (header, header-sortable, text, two-line, avatar, badge, number, checkbox, actions).
Usage
Included in the GliaKit boilerplate. Import it where you need it:
import { Table, THead, TH, TBody, TR, TD, type SortDirection } from "@/components/ui/table";When to use
- Lists of records people compare across columns: customers, invoices, team members.
- When rows need sorting, selection or per-row actions.
- For a short list with one or two fields per row, use List.
- For layout, use grid or flex, never a table.
Examples
Basic
Text, badge and number cells. Right-align numbers and set them in mono.
Three-state sort
TH only renders the control. Here each click cycles ascending, descending and unsorted.
In a card
Drop a Table into a Card for dashboard widgets. Remove the card padding so rows reach the edges.
API reference
Table
Wraps a <table> in a horizontally scrolling div. Extends native table attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Applied to the <table>, not the scroll wrapper. |
THead
Header group with a bottom border and muted background. Extends native thead attributes.
TH
Header cell in the uppercase mono eyebrow style. Extends native th attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| onSort | () => void | - | Makes the header sortable: the label becomes a button with a sort arrow. You update the sort state and reorder rows yourself. |
| sorted | "asc" | "desc" | false | - | Marks the active sort column and direction: a violet ↑ or ↓, and aria-sort on the th. Unsorted sortable columns show a faded ↕. |
TBody
Extends native tbody attributes.
TR
Row with a bottom divider (none on the last row) and a hover tint. Extends native tr attributes.
TD
Cell with px-4 py-3 padding, vertically centered. Extends native td attributes. Add text-right font-mono for numbers.
SortDirection
Type export for sort state.
| Prop | Type | Default | Description |
|---|---|---|---|
| SortDirection | "asc" | "desc" | false | - | The value TH expects in sorted. |
Accessibility
- Uses native table, thead, th, tbody, tr and td elements, so screen readers can announce row and column headers.
- A sortable TH renders a real <button>, reachable with Tab and activated with Enter or Space. The sorted column gets aria-sort="ascending" or "descending"; the arrow glyph is aria-hidden.
- Give each row checkbox an aria-label such as "Select Sarah Chen", the header checkbox "Select all", and icon-only row action buttons a label such as "Actions for Sarah Chen".
- Add a <caption> (it can be sr-only) describing the table's contents.