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.

Name	Role	Status

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

Installation

$pnpm add @refraction-ui/react-data-table

Usage

tsx

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

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`	`ColumnDef<T>[]`	--	Column definitions with id, header, accessor, sortable, filterable.
`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.