Patterns

DataTable

A production table pattern: sortable columns, row selection, sticky header, pagination, and shared loading/empty/error states.

installnpx shadcn@latest add https://ds.bartoszrychlicki.com/r/br-data-table.json

Preview

Clients

4 rows
HE
Helio Energy
active€12,400
VE
Verba Editorial
active€4,800
MB
Mara Booking
paused€3,200
Page 1 of 2
import { DataTable, type DataTableColumn } from "@/components/br/data-table";

const columns: DataTableColumn<ClientRow>[] = [
  { id: "client", header: "Client", sortable: true, sortValue: (row) => row.name,
    cell: (row) => <ClientCell row={row} /> },
  { id: "mrr", header: "MRR", sortable: true, numeric: true,
    accessor: "mrr", cell: (row) => <>€{row.mrr.toLocaleString()}</> },
];

<DataTable
  title="Clients"
  columns={columns}
  rows={rows}
  getRowId={(row) => row.id}
  selectable
  pageSize={10}
/>

Props

PropTypeDefaultDescription
columnsDataTableColumn<T>[]—Column model: id, header, accessor/cell, sortable, numeric, width.
rowsT[]—Raw row data.
getRowId(row, index) => string—Stable id for selection and row keys.
loading / empty / errorboolean / ReactNode—Shared state rendering.
pageSizenumber—Enables built-in pagination.

Notes

Use Table for static presentation. Use DataTable once users sort, select, paginate, or wait for async data.