Components
/
Data Table
Data Table
Powerful tables with sorting, filtering, and pagination.
Name | Status | Email | Amount | Action | ||
|---|---|---|---|---|---|---|
Shang Chain | success | shang07@yahoo.com | $699.00 | |||
Kevin Lincoln | success | kevinli09@gmail.com | $242.00 | |||
Milton Rose | processing | rose96@gmail.com | $655.00 | |||
Silas Ryan | success | silas22@gmail.com | $874.00 | |||
Ben Tenison | failed | bent@hotmail.com | $541.00 |
0 of 5 row(s) selected.
Rows per page
Page 1 of 1
Examples
Basic
A simple data table without any advanced features.
| Name | Status | Amount | |
|---|---|---|---|
Shang Chain | shang07@yahoo.com | success | $699.00 |
Kevin Lincoln | kevinli09@gmail.com | success | $242.00 |
Milton Rose | rose96@gmail.com | processing | $655.00 |
Silas Ryan | silas22@gmail.com | success | $874.00 |
Ben Tenison | bent@hotmail.com | failed | $541.00 |
Row Selection
A data table with row selection using default checkboxes. Select individual rows or all rows at once.
| Name | Amount | ||
|---|---|---|---|
Shang Chain | shang07@yahoo.com | $699.00 | |
Kevin Lincoln | kevinli09@gmail.com | $242.00 | |
Milton Rose | rose96@gmail.com | $655.00 | |
Silas Ryan | silas22@gmail.com | $874.00 | |
Ben Tenison | bent@hotmail.com | $541.00 |
0 of 5 row(s) selected.
Circle Checkbox Actions
A data table with circle checkboxes in the action column. The checkboxes show different states based on row status: checked for success, disabled for failed, and unchecked for others.
| Name | Status | Amount | Action |
|---|---|---|---|
Shang Chain | success | $699.00 | |
Kevin Lincoln | success | $242.00 | |
Milton Rose | processing | $655.00 | |
Silas Ryan | success | $874.00 | |
Ben Tenison | failed | $541.00 |
Installation
1npm install @tanstack/react-table @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilitiesUsage
1600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">import {2 useReactTable,3 getCoreRowModel,4 getSortedRowModel,5 getFilteredRowModel,6 getPaginationRowModel,7 flexRender,8 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">type ColumnDef,9} 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">from 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">"@tanstack/react-table"10600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">import { DndContext, closestCenter } 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">from 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">"@dnd-kit/core"11600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">import { SortableContext, useSortable, verticalListSortingStrategy } 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">from 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">"@dnd-kit/sortable"12600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">import {13 Table,14 TableBody,15 TableCell,16 TableHead,17 TableHeader,18 TableRow,19} 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">from 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">"@/components/ui/table"20600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">import { Checkbox } 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">from 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">"@/components/ui/checkbox"21600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">import { Button } 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">from 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">"@/components/ui/button"22600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">import { Input } 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">from 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">"@/components/ui/input"23600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">import { Badge } 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">from 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">"@/components/ui/badge"24600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">from 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">"@/components/ui/tooltip"API Reference
Features
Sortable ColumnsClick column headers to sort ascending/descending.
Column VisibilityToggle column visibility via dropdown menu.
Draggable RowsDrag and drop rows to reorder using the grip handle.
PaginationNavigate pages and adjust rows per page.
CSV ExportExport table data to CSV format.
Pinnable ColumnsPin columns to left or right side of the table.
Global SearchSearch across all columns simultaneously.
Row SelectionSelect individual rows or all rows with checkboxes.