Data Table
ReadySorting, filtering, pagination, selection.
Requires @tanstack/react-table
| Incline Dumbbell Press | Chest | 3 |
| Barbell Row | Back | 4 |
| Back Squat | Quads | 5 |
| Overhead Press | Shoulders | 4 |
Page 1 of 2
Installation
$ npx @oratiq-js/ui add data-tableCopies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.
Usage
import
import { DataTable } from "@/components/ui/data-table";Sorting, filtering, columns, pagination
Click a header to sort. Type to filter. Toggle columns from the menu.
| Incline Dumbbell Press | Chest | 3 | 810 |
| Barbell Bench Press | Chest | 4 | 1,600 |
| Cable Fly | Chest | 3 | 540 |
| Pull Up | Back | 4 | 720 |
| Barbell Row | Back | 4 | 1,280 |
Page 1 of 3
Sort indicators are vertical arrows, so they are not mirrored under RTL. The pagination controls are — the same per-glyph rule as everywhere else in the system.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
columns* | ColumnDef<TData, TValue>[] | — | TanStack Table column definitions. |
data* | TData[] | — | Row data. |
filterColumn | string | — | Column id the search box filters. |
pageSize | number | 10 | Rows per page. |
View source on GitHub → components/ui/data-table.tsx