DataTable

The table a list renders: one column per field, sortable headers, row selection and row clicks, read from the list context.

Installation

pnpm dlx shadcn@latest add @chelone/data-table

Loading preview…

<DataTable> renders the records of the surrounding <List> as a table. Each <DataTable.Col> is one column; its source picks the field and its children render the cell. Clicking a sortable header sorts the list through the list context, so the sort lands in the URL with the rest of the query.

A live table

Loading preview…

src/posts.tsx

import {
  BooleanField,
  DataTable,
  List,
  ReferenceField,
  TextField,
} from "@chelone/react";
 
export function PostList() {
  return (
    <List perPage={5}>
      <DataTable rowClick={false}>
        <DataTable.Col source="title" />
        <DataTable.Col label="Author">
          <ReferenceField source="author_id" reference="authors">
            <TextField source="name" />
          </ReferenceField>
        </DataTable.Col>
        <DataTable.NumberCol source="views" />
        <DataTable.Col source="published">
          <BooleanField source="published" />
        </DataTable.Col>
      </DataTable>
    </List>
  );
}

Props

Prop	Type	Default	Description
body	ComponentType<DataTableBodyProps<TRecord>>	—	Override the table body component.
bulkActionButtons	ReactNode	—	Bulk-action children rendered in the selection toolbar. `false` (default) disables selection entirely, so pass your own bulk children (or a `bulkActionsToolbar`) to turn selection on.
bulkActionsToolbar	ReactNode	—	A fully custom selection toolbar, overriding `bulkActionButtons`.
children	ReactNode	—
className	string	—
defaultHiddenColumns	string[]	—	Ids of the columns hidden until a choice is stored.
expand	ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentType<DataTableExpandProps<TRecord>>	—	Element or function component rendered as the expand panel under each row. When provided, a chevron toggle column is added at the start of every row.
expandSingle	boolean	—	Expanding a row collapses any previously-expanded one. Default `false`.
head	ComponentType<{ children: ReactNode }>	—	Override the table head component.
hover	boolean	—	Disable row hover highlighting. Default `true` (hover on).
isRowExpandable	(record: TRecord) => boolean	—	Predicate deciding whether a given record can be expanded.
rowClassName	(record: TRecord, rowIndex: number) => string \| undefined	—
rowClick	string \| false \| (record: TRecord, id: Identifier) => string \| false	—	Row-click action: `"edit"` (default) \| `"show"` \| `"expand"` \| `"toggleSelection"` \| `false` \| a path string \| `(record, id) => …`.
size	DataTableSize	—	Row density. `"small"` tightens cell padding; `"medium"` (default) is standard.
storeKey	string	—	Store key prefix for the hidden, ordered and published columns. Default `"<resource>.datatable"`.

Tips

<DataTable.NumberCol> right-aligns its cells and formats the number.
A column with no source and no label has no header text; use it for row actions such as <EditButton>.
rowClick defaults to "edit". Pass "show", a path, a function, or false to change it.
Pair the table with <ListPagination> to reach the other pages.