Component

Table

Composable, semantic table primitives — Table, TableHeader, TableBody, TableRow, TableHead, TableCell and TableCaption map one-to-one to the HTML elements, so cells can hold any component. Use DataTable when you want sorting and filtering driven by column definitions.

Basic

Cells hold components; numeric columns align to the end with tabular figures.

Recent orders
Order	Customer	Status	Total
#1001	Ada Lovelace	Shipped	$1,200.00
#1002	Alan Turing	Pending	$84.50
#1003	Grace Hopper	Shipped	$312.00

Compact, eyebrow headers

density and headTone on the root apply to every cell.

Recent orders
Order	Customer	Status	Total
#1001	Ada Lovelace	Shipped	$1,200.00
#1002	Alan Turing	Pending	$84.50
#1003	Grace Hopper	Shipped	$312.00

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@refraction-ui/react'

export function Orders({ orders }) {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Customer</TableHead>
          <TableHead align="end">Total</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {orders.map((o) => (
          <TableRow key={o.id}>
            <TableCell><a href={`/customers/${o.customerId}`}>{o.customer}</a></TableCell>
            <TableCell align="end" numeric>{o.total}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

Props

Prop	Type	Default	Description
`density`	`'compact' \| 'default'`	`'default'`	Table: cell padding for every cell.
`headTone`	`'default' \| 'eyebrow'`	`'default'`	Table: header cell look; eyebrow is small uppercase tracked text.
`fixed`	`boolean`	`false`	Table: fixed layout — column widths come from the header row.
`containerClassName`	`string`	--	Table: class for the horizontal scroll container.
`align`	`'start' \| 'center' \| 'end'`	`'start'`	TableHead / TableCell: horizontal alignment.
`numeric`	`boolean`	`false`	TableCell: tabular figures, no wrapping.
`scope`	`string`	`'col'`	TableHead: defaults to col.