Data

Data Table

Headless TanStack Table v8 wrapped around Clay's Table primitives, with sortable headers, optional row selection, and pagination out of the box.

Source TanStack Table

Preview

GitHub

'use client';

import { DataTable } from '@brika/clay/components/data-table';
import { basicColumns, paymentRows } from '../data-table.demo-data';

/** Compact invoice table, no sorting or pagination, status badges + right-aligned currency cells. */
export default function DataTableBasicDemo() {
  return <DataTable columns={basicColumns} data={paymentRows} enableSorting={false} pageSize={0} />;
}

01 Installation

Install

Pull Data Table from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { DataTable } from "@brika/clay";

tsxGranular1 line

import { DataTable } from "@brika/clay/components/data-table";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxData Table.tsx9 lines

'use client';

import { DataTable } from '@brika/clay/components/data-table';
import { basicColumns, paymentRows } from '../data-table.demo-data';

/** Compact invoice table, no sorting or pagination, status badges + right-aligned currency cells. */
export default function DataTableBasicDemo() {
  return <DataTable columns={basicColumns} data={paymentRows} enableSorting={false} pageSize={0} />;
}

03 Examples

Data Table, every way

Paginated

Sorting + pagination together, 25 rows broken into pages of 5.

GitHub

'use client';

import { DataTable } from '@brika/clay/components/data-table';
import { type Payment, sortableColumns } from '../data-table.demo-data';

const STATUSES: Payment['status'][] = ['paid', 'pending', 'failed'];
const METHODS: Payment['method'][] = ['credit_card', 'paypal', 'bank_transfer'];
const HANDLES = ['lena', 'mateo', 'priya', 'jonas', 'aiko', 'sam', 'dani', 'oksana', 'bea', 'ravi', 'noor', 'yuki', 'amir', 'zoe', 'kai'];
const DOMAINS = ['acme.io', 'northwind.dev', 'globex.com', 'hooli.io', 'initech.jp', 'umbrella.co', 'stark.io', 'tessier.fr'];

const paginatedData: Payment[] = Array.from({ length: 25 }, (_, i) => ({
  id: `INV-${String(101 + i).padStart(4, '0')}`,
  status: STATUSES[i % STATUSES.length],
  method: METHODS[(i * 2) % METHODS.length],
  amount: Math.round((20 + i * 47.3) * 100) / 100,
  email: `${HANDLES[i % HANDLES.length]}@${DOMAINS[i % DOMAINS.length]}`,
}));

/** Sorting + pagination together, 25 rows broken into pages of 5. */
export default function DataTablePaginatedDemo() {
  return <DataTable columns={sortableColumns} data={paginatedData} pageSize={5} />;
}

Sortable

Sortable headers via `DataTableColumnHeader`, click Email or Amount to toggle asc/desc/clear.

GitHub

'use client';

import { DataTable } from '@brika/clay/components/data-table';
import { type Payment, paymentRows, sortableColumns } from '../data-table.demo-data';

const extraRows: Payment[] = [
  { id: 'INV-007', status: 'paid', method: 'credit_card', amount: 76.2, email: 'dani@stark.io' },
  { id: 'INV-008', status: 'failed', method: 'bank_transfer', amount: 540, email: 'oksana@tessier.fr' },
  { id: 'INV-009', status: 'paid', method: 'paypal', amount: 219.99, email: 'bea@aperture.dev' },
  { id: 'INV-010', status: 'pending', method: 'bank_transfer', amount: 88, email: 'ravi@blackmesa.org' },
  { id: 'INV-011', status: 'paid', method: 'credit_card', amount: 1499, email: 'noor@cyberdyne.ai' },
  { id: 'INV-012', status: 'failed', method: 'paypal', amount: 12, email: 'yuki@pied-piper.io' },
];

/** Sortable headers via `DataTableColumnHeader`, click Email or Amount to toggle asc/desc/clear. */
export default function DataTableSortableDemo() {
  return <DataTable columns={sortableColumns} data={[...paymentRows, ...extraRows]} pageSize={0} />;
}

04 Accessibility

Accessibility

Sortable column headers expose the current sort direction via aria-sort ("ascending", "descending", or "none").
The sort toggle is rendered as a real <button> so it is reachable by keyboard and announces its label to AT.
Selected rows carry data-state="selected"; provide an aria-label on the row checkbox that names the row.
Use <TableCaption> from the underlying Table to give the data table an accessible name when needed.

05 Tokens 2 theme-overridable

Theme tokens

Every CSS variable Data Table reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Data Table without touching component code.

Data Table tokens

2 tokens

ColorFill, border, and text colors.2

--data-table-sort-indicator-colorcolorvar(--muted-foreground)
components.dataTable.sortIndicatorColor
Color of the chevron rendered next to a sortable column header (asc / desc / unsorted).
--data-table-selected-row-bgcolorvar(--accent)
components.dataTable.selectedRowBg
Background fill applied to a row when it is selected via the row-selection checkbox.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.dataTable, the names are camelCase versions of the variable suffix.

jsonmy-theme.json12 lines

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "dataTable": {
      "sortIndicatorColor": "var(--muted-foreground)"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-data-table-…) — see the chips on each token row.

06 API reference

API reference

Props specific to Data Table. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.

<DataTable />

8 props

columns*
ColumnDef<TData, TValue>[]
TanStack column definitions. Use accessorKey, accessorFn, or id.
data*
TData[]
Source rows. Reference identity is used for memoisation, keep it stable.
className
string
Forwarded to the underlying <Table>.
emptyMessagedefault 'No results.'
React.ReactNode
Optional empty-state message rendered when data resolves to zero rows.
enableRowSelectiondefault false
boolean
Wire up row selection state. Add a checkbox column yourself in columns.
enableSortingdefault true
boolean
Toggle sorting model + sort UI on column headers. Defaults to true.
onRowClick
(row: Row<TData>) => void
Fired when a body row is clicked (excludes header rows).
pageSizedefault 10
number
Page size for built-in pagination. Defaults to 10. Pass 0 to disable pagination.

<DataTableColumnHeader />

1 prop

column*
Column<TData, TValue>
The TanStack Column instance, given to you by the header render prop.