DataTable

Data-driven table built on TanStack Table with sorting, pagination, selection, and empty states.

DataTable is the high-level, data-driven table. Unlike the raw Table primitives (which you assemble row by row), you hand it data and TanStack Table columns and it renders the rows for you — with built-in sorting, optional pagination (pageSize), row selection (enableRowSelection), loading skeletons (isLoading), empty states, and a toolbar/export slot. Reach for it whenever the dataset is dynamic or large; use the Table primitives only for small, fully hand-controlled markup.

Example

Preview


Officina	Live
Template	Draft

Page 1 of 1

import { DataTable } from '@officina/ui';
import type { ColumnDef } from '@tanstack/react-table';

type User = { id: string; name: string; role: string };

const columns: ColumnDef<User>[] = [
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'role', header: 'Role' },
];

function UsersTable({ users }: { users: User[] }) {
  return (
    <DataTable
      data={users}
      columns={columns}
      pageSize={10}
      enableRowSelection
      onRowSelectionChange={(rows) => console.log(rows)}
    />
  );
}

API

Prop	Type	Default	Description
columns*	ColumnDef<TData, unknown>[]	—	TanStack Table column definitions.
data*	TData[]	—	Row data.
density	enum	—	Row height/padding density.
emptyDescription	string	—	Description for the empty state.
emptyTitle	string	—	Heading for the empty state.
enableRowSelection	boolean	—	When set, table renders a checkbox column and reports row selection.
exportable	{ columns?: ExportColumn<TData>[]; filename?: string; formats?: ExportFormat[]; scope?: "visible" \| "all" \| "selected"; }	—
filters	DataTableFilters<TData>	—
globalFilter	string	—	Controlled global search term.
isLoading	boolean	—	Show a loading skeleton instead of rows.
onRowClick	(row: TData) => void	—	Called when a row is clicked.
onRowSelectionChange	(rows: TData[]) => void	—	Called with the selected rows when selection changes.
pageSize	number	—	Rows per page; enables pagination when set.
toolbar	ReactNode	—	Custom toolbar rendered above the table.

Example

API

On this page