Component

Data Table

A sortable, filterable data table with column definitions and empty state. Uses the headless @refraction-ui/data-table core.

Examples

Click column headers to sort. Use the filter row to search.



Alice Johnson	Engineer	Active
Bob Smith	Designer	Active
Carol White	PM	Inactive
Dave Brown	Engineer	Active

Custom cells and row actions

cell renders any ReactNode; numeric columns align to the end with tabular figures; onRowClick makes rows keyboard-activatable. For fully custom markup use the Table primitives.

Click a row, or focus it and press Enter.

Ada Lovelace	3	$1200.00
Alan Turing	1	$84.50
Grace Hopper	7	$312.00

Opened: none

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { DataTable } from '@refraction-ui/react'

export function MyComponent() {
  return (
    <DataTable
      columns={[
        { id: 'name', header: 'Name', accessor: (r) => r.name, sortable: true },
        { id: 'email', header: 'Email', accessor: (r) => r.email },
      ]}
      data={users}
    />
  )
}

Props

Prop	Type	Default	Description
`columns`	`DataTableColumn<T>[]`	--	Columns: id, header (ReactNode), accessor (sort/filter value), cell ((row, index) => ReactNode), align (start \| center \| end), numeric (tabular, end-aligned), sortable, filterable, className, headerClassName.
`data`	`T[]`	--	Array of data rows.
`sortBy`	`string`	--	Controlled sort column.
`sortDir`	`'asc' \| 'desc'`	`'asc'`	Sort direction.
`onSort`	`(columnId: string, direction: SortDirection) => void`	--	Callback on sort change.
`filters`	`Record<string, string>`	--	Controlled filter values.
`emptyMessage`	`string`	`'No data available'`	Message when table is empty.
`className`	`string`	--	Additional CSS classes for the <table>; other table attributes (aria-label, …) pass through.
`getRowKey`	`(row: T, index: number) => string \| number`	--	Stable row key. Defaults to the index — pass one when rows can reorder.
`getRowProps`	`(row: T, index: number) => HTMLAttributes<HTMLTableRowElement>`	--	Extra attributes/handlers per row.
`onRowClick`	`(row: T, index: number) => void`	--	Row action: rows become focusable and activate on click, Enter or Space.
`caption`	`ReactNode`	--	Table caption.
`wrapperClassName`	`string`	--	Class for the horizontal scroll wrapper.