Data Table

A typed data table with sorting, search and row selection, where rows glide into their new order.

PreviewCode

@spectrumui/data-table

Copy Prompt

All14paid8pending2failed2refunded2

Export

Payments from the last two weeks, with status, method, date and amount.

		Customer	Status	Date	Amount	Actions
		Marta Halapinmarta@northsail.co	paid	Sep 8	$1,840
		Devansh Raodevansh@quillbase.io	pending	Sep 8	$420
		Ines Almeidaines@fold.studio	paid	Sep 7	$96
		Tobias Wernertobias@heliolab.de	failed	Sep 7	$2,400
		Amara Okonjoamara@brightpath.ng	paid	Sep 6	$780
		Rafael Costarafael@medela.com.br	refunded	Sep 5	$96
		Total			$17,408

14 rows

Login to view codeCreate a free account to access component source codeLogin

Installation

CLIManual

Login to view commandCreate a free account to access the install commandLogin

Usage

import { DataTable, type DataTableColumn } from "@/components/spectrumui/data-table"

interface Invoice {
  id: string
  customer: string
  status: "paid" | "pending" | "failed"
  amount: number
}

const columns: DataTableColumn<Invoice>[] = [
  { id: "customer", header: "Customer", sortable: true, value: (row) => row.customer },
  { id: "status", header: "Status", sortable: true, value: (row) => row.status },
  { id: "amount", header: "Amount", sortable: true, numeric: true, value: (row) => row.amount },
]

<DataTable
  data={invoices}
  columns={columns}
  rowId={(row) => row.id}
  caption="Invoices from the last 30 days."
  searchable
  selectable
  pageSize={10}
  defaultSort={{ columnId: "amount", direction: "desc" }}
  bulkActions={({ ids, clear }) => (
    <button onClick={() => exportInvoices(ids).then(clear)}>Export</button>
  )}
/>

How it behaves

DataTable is generic over your row type, so cell, value and rowId all receive a typed row and never an any. It renders one real <table>: sortable headers carry aria-sort and a real button, selection uses real checkboxes with a mixed state on the header, disclosure buttons carry aria-expanded, and a single polite live region announces the row and selection counts.

The toolbar composes like a product screen: title on the leading side; filter pills, the optional search field and your own actions (the toolbar slot) on the trailing side. quickFilter renders one pill per distinct value of a column with a live count, so filtering a status is one tap instead of a typed query — search stays opt-in for the long lists where free text earns its place. The search mark is Iconly Light, an outline glyph: fill is reserved for a state that is already on. Focusing the field darkens that stroke and eases the input wider so the query has room, and the clear control blooms in — scale, opacity and blur — rather than popping onto the trailing edge. Filter pills share one sliding fill, so choosing a status is a transfer of the same chip, not a repaint. The checkbox fill grows into its box and the tick draws; selected counts and page ranges roll to the new figure. An empty body staggers its icon, title and action, because that screen appears once. Sorting is a three-step cycle — ascending, descending, off — so a table can always be put back in source order, and blanks stay at the bottom in both directions. Changing the sort moves each row to its new position on a critically damped spring rather than repainting the body, and the caret rotates between the two directions instead of swapping for a second glyph. Hovering a row stays a 100ms tint, because a row is hovered hundreds of times a session. Only the bulk-action bar, which appears once per selection, gets a spring. Under prefers-reduced-motion every one of those becomes instant, and each state keeps a static cue: a filled checkbox, an aria-sort value.

It is also built for the keyboard. The grid takes a single Tab stop and then moves a cursor rather than focus, so arrow keys walk the rows while the controls inside a row keep their own keys: Space selects, Shift with the arrows or a click takes the whole range, ⌘A takes the page, ⌘C copies the selection as TSV straight into a spreadsheet, and Escape clears. Select every row on a page and the table offers the rest of the matches instead of pretending six was what you meant.

Deleting is the one place the table lets motion take real time. Call remove() from the bulk bar or a row action and the rows sweep out to the start edge one after another, roughly a frame apart, accelerating away rather than easing to a stop — an undertow, not a blink. Each row is pulled the instant its own sweep ends, so the rows beneath begin closing the gap while the next one is still on its way out, and the wave drains down the table. onDelete fires once at the end with the ids, which is when you remove them from your own data. Under reduced motion the rows simply go.

API Reference

DataTable

DataTableColumn

A column renders through cell and sorts and searches through value. Give a column both when its cell renders markup: the table cannot compare a React element, so a sortable badge column needs the raw value behind it. With neither, the column falls back to reading row[id].

Examples

Everything at once

A pipeline table with the whole surface turned on: a pinned first column and pinned header for a grid wider than its box, draggable column widths, a rolling totals footer that recounts as you filter, and the keyboard model. Click into the table and walk it with the arrow keys, and ⌘C puts what you picked on the clipboard as TSV.

PreviewCode

All16won4negotiation4proposal4lost4

Open pipeline with stage, owner, win probability and value.

	Account	Stage	Owner	Region	Closes	Win %	Value
	Havenpoint	lost	Freya Lindgren	EMEA	Q4 2026	85%	$138,000
	Copperline	proposal	Leila Haddad	APAC	Q3 2026	68%	$129,600
	Nordform	negotiation	Zara Osei	AMER	Q2 2026	51%	$121,200
	Tidepool	won	Aiko Watanabe	EMEA	Q1 2026	34%	$112,800
	Paperkite	lost	Mateo Alvarez	APAC	Q4 2026	17%	$104,400
	Arcfield	proposal	Freya Lindgren	AMER	Q3 2026	90%	$96,000
	Loomstack	negotiation	Leila Haddad	EMEA	Q2 2026	73%	$87,600
	Carbonline	won	Zara Osei	APAC	Q1 2026	56%	$79,200
	Zoning	lost	Aiko Watanabe	AMER	Q4 2026	39%	$70,800
	Kirin Works	proposal	Mateo Alvarez	EMEA	Q3 2026	22%	$62,400
	Medela Brasil	negotiation	Freya Lindgren	APAC	Q2 2026	95%	$54,000
	Brightpath	won	Leila Haddad	AMER	Q1 2026	78%	$45,600
	Heliolab	lost	Zara Osei	EMEA	Q4 2026	61%	$37,200
	Fold Studio	proposal	Aiko Watanabe	APAC	Q3 2026	44%	$28,800
	Quillbase	negotiation	Mateo Alvarez	AMER	Q2 2026	27%	$20,400
	Northsail Group	won	Freya Lindgren	EMEA	Q1 2026	10%	$12,000
	Total						$1,200,000

16 rows

• ↑ ↓Move the cursor
• ⇧ ↑ ↓Extend the selection
• SpaceSelect the row
• ⌘ ASelect the page
• ⌘ CCopy as TSV
• EscClear

Login to view codeCreate a free account to access component source codeLogin

Variants and density

Five surfaces and three densities. panel trades the border for a layered shadow so it reads as elevated on any background, minimal drops the frame for a table that sits inside an existing card, and compact is the density an operations tool wants when the screen has to hold thirty rows.

Pinned header on a long, dense table

The shape an operations tool needs: compact density, stickyHeader and a maxHeight so the table scrolls inside its own box rather than pushing the page down. The header picks up a shadow the moment the body scrolls under it, and drops it again at the top. onRowClick makes the row clickable and turns its first cell into a real button, so opening a row does not become a mouse-only action.

Loading and empty states

loading keeps the header and column widths in place and swaps the body for skeleton rows, so the table does not resize when the data lands. An empty table tells the two cases apart: no data at all, or no match for the current search, which comes with a button that clears it.