Display
Data Table
A sortable, filterable, paginated table built with TanStack Table and the Table primitives.
Install
pnpm add @codefast/ui
Composed from
@tanstack/react-table · Table
Examples
Demo
A payments table with sorting, column filtering, column visibility, row selection, and pagination.
| Status | Amount | |||
|---|---|---|---|---|
success | ken99@example.com | $316.00 | ||
success | Abe45@example.com | $242.00 | ||
processing | Monserrat44@example.com | $837.00 | ||
success | Silas22@example.com | $874.00 | ||
failed | carmella@example.com | $721.00 |
0 of 5 row(s) selected.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
| الحالة | المبلغ | |||
|---|---|---|---|---|
ناجح | ken99@example.com | ٣١٦٫٠٠ US$ | ||
ناجح | Abe45@example.com | ٢٤٢٫٠٠ US$ | ||
قيد المعالجة | Monserrat44@example.com | ٨٣٧٫٠٠ US$ | ||
ناجح | Silas22@example.com | ٨٧٤٫٠٠ US$ | ||
فشل | carmella@example.com | ٧٢١٫٠٠ US$ |
0 من 5 صف(وف) محدد.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() })
<Table>
<TableHeader>
{table.getHeaderGroups().map((group) => (
<TableRow>{group.headers.map((h) => <TableHead>{flexRender(h.column.columnDef.header, h.getContext())}</TableHead>)}</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows.map((row) => (
<TableRow>{row.getVisibleCells().map((c) => <TableCell>{flexRender(c.column.columnDef.cell, c.getContext())}</TableCell>)}</TableRow>
))}
</TableBody>
</Table>
Guidelines
Conventions that keep usage consistent across an app.
Do
- Drive state (sorting, filters, visibility, selection) through TanStack Table and render with the Table primitives.
- Give every interactive header and row control an accessible label.
Don’t
- Don’t paginate on the client for large datasets — fetch and sort server-side instead.