Full Featured
Includes row selection, sortable columns, email filtering, column visibility toggle, pagination, and row actions.
| Status | Amount | |||
|---|---|---|---|---|
success | ken99@yahoo.com | $316.00 | ||
success | Abe45@gmail.com | $242.00 | ||
processing | Monserrat44@gmail.com | $837.00 | ||
success | Silas22@gmail.com | $874.00 | ||
failed | carmella@hotmail.com | $721.00 | ||
pending | alex@example.com | $150.00 | ||
success | sarah@company.co | $999.00 | ||
processing | mike@startup.io | $432.00 |
0 of 8 row(s) selected.
Simple Table
Minimal configuration with just columns and data.
| Status | Amount | |
|---|---|---|
success | ken99@yahoo.com | $316.00 |
success | Abe45@gmail.com | $242.00 |
processing | Monserrat44@gmail.com | $837.00 |
success | Silas22@gmail.com | $874.00 |
failed | carmella@hotmail.com | $721.00 |
pending | alex@example.com | $150.00 |
success | sarah@company.co | $999.00 |
processing | mike@startup.io | $432.00 |
With Filter Only
| Status | Amount | |
|---|---|---|
success | ken99@yahoo.com | $316.00 |
success | Abe45@gmail.com | $242.00 |
processing | Monserrat44@gmail.com | $837.00 |
success | Silas22@gmail.com | $874.00 |
failed | carmella@hotmail.com | $721.00 |
pending | alex@example.com | $150.00 |
success | sarah@company.co | $999.00 |
processing | mike@startup.io | $432.00 |
No Pagination
| Status | Amount | |
|---|---|---|
success | ken99@yahoo.com | $316.00 |
success | Abe45@gmail.com | $242.00 |
processing | Monserrat44@gmail.com | $837.00 |
success | Silas22@gmail.com | $874.00 |
Props
| Prop | Type | Description |
|---|---|---|
| columns | ColumnDef<TData, TValue>[] | @tanstack/react-table column definitions |
| data | TData[] | Array of data rows |
| filterColumn | string | Column ID to filter on (shows filter input when set) |
| filterPlaceholder | string | Placeholder for filter input |
| showColumnToggle | boolean | Show column visibility toggle dropdown |
| showPagination | boolean | Show pagination controls |
| showSelectedCount | boolean | Show selected row count |
| className | string | Additional classes |
Usage
import { DataTable, type ColumnDef } from "@/components/ui/DataTable";
type User = { id: string; name: string; email: string };
const columns: ColumnDef<User>[] = [
{ accessorKey: "name", header: "Name" },
{ accessorKey: "email", header: "Email" },
];
<DataTable
columns={columns}
data={users}
filterColumn="email"
filterPlaceholder="Filter emails..."
/>