Data Table
A powerful data table component with sorting, filtering, and pagination.
| Status | Amount | |
|---|---|---|
| success | ken99@yahoo.com | $316.00 |
| processing | Abe45@gmail.com | $242.00 |
| pending | Monserrat44@gmail.com | $837.00 |
| failed | Silas22@gmail.com | $874.00 |
Installation
npm install @tanstack/react-tableUsage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import * as React from "react"
import {
ColumnDef,
flexRender,
getCoreRowModel,
useReactTable,
} from "@tanstack/react-table"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
// Define your data and types
interface Payment {
id: string
amount: number
status: "pending" | "processing" | "success" | "failed"
email: string
}
// Sample data
const data: Payment[] = [
{
id: "m5gr84i9",
amount: 316,
status: "success",
email: "ken99@yahoo.com",
},
{
id: "3u1reuv4",
amount: 242,
status: "processing",
email: "Abe45@gmail.com",
},
{
id: "derv1ws0",
amount: 837,
status: "pending",
email: "Monserrat44@gmail.com",
},
{
id: "5kma53ae",
amount: 874,
status: "failed",
email: "Silas22@gmail.com",
},
]
// Define your columns
const columns: ColumnDef<Payment>[] = [
{
accessorKey: "status",
header: "Status",
},
{
accessorKey: "email",
header: "Email",
},
{
accessorKey: "amount",
header: "Amount",
cell: ({ row }) => {
const amount = parseFloat(row.getValue("amount"))
const formatted = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
}).format(amount)
return <div className="font-medium">{formatted}</div>
},
},
]
export function DataTable() {
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
})
return (
<div className="rounded-md border">
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</TableHead>
))}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={columns.length} className="h-24 text-center">
No results.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</div>
)
}Examples
With Pagination
| Status | Amount | |
|---|---|---|
| success | ken99@yahoo.com | $316.00 |
| processing | Abe45@gmail.com | $242.00 |
With Sorting
| success | ken99@yahoo.com | $316.00 |
| processing | Abe45@gmail.com | $242.00 |
Props
| Component | Props | Description |
|---|---|---|
| DataTable | columns | An array of column definitions from @tanstack/react-table |
| DataTable | data | The data to be displayed in the table rows |
| DataTable | searchKey | Optional key for global filtering/search functionality |
| DataTable | columnFilters | Optional flag to enable column filter support (default: true) |
| DataTable | columnVisibility | Optional flag to allow toggling column visibility (default: true) |
| DataTable | rowSelection | Optional flag to enable checkbox selection (default: false) |