Data Table
shadcn/uiPowerful data table built with TanStack Table for sorting, filtering, and pagination.
Data Table
| Status | Amount | |
|---|---|---|
| ken99@example.com | success | 316 |
| Abe45@example.com | success | 242 |
| Monserrat44@example.com | processing | 837 |
import { DataTable } from "@/components/optics/data-table";import { ColumnDef } from "@tanstack/react-table";const columns = [ { accessorKey: "email", header: "Email", }, { accessorKey: "status", header: "Status", }, { accessorKey: "amount", header: "Amount", },];const paymentData = [ { id: "m5gr84i9", amount: 316, status: "success", email: "ken99@example.com", }, { id: "3u1reuv4", amount: 242, status: "success", email: "Abe45@example.com", }, { id: "derv1ws0", amount: 837, status: "processing", email: "Monserrat44@example.com", },];<DataTable columns={[ { accessorKey: 'email', header: 'Email' }, { accessorKey: 'status', header: 'Status' }, { accessorKey: 'amount', header: 'Amount' } ]} data={[ { amount: 316, email: 'ken99@example.com', id: 'm5gr84i9', status: 'success' }, { amount: 242, email: 'Abe45@example.com', id: '3u1reuv4', status: 'success' }, { amount: 837, email: 'Monserrat44@example.com', id: 'derv1ws0', status: 'processing' } ]}/>import { DataTable } from "@/components/optics/data-table";import { ColumnDef } from "@tanstack/react-table";const columns = [ { accessorKey: "email", header: "Email", }, { accessorKey: "status", header: "Status", }, { accessorKey: "amount", header: "Amount", },];const paymentData = [ { id: "m5gr84i9", amount: 316, status: "success", email: "ken99@example.com", }, { id: "3u1reuv4", amount: 242, status: "success", email: "Abe45@example.com", }, { id: "derv1ws0", amount: 837, status: "processing", email: "Monserrat44@example.com", },];<DataTable columns={[ { accessorKey: 'email', header: 'Email' }, { accessorKey: 'status', header: 'Status' }, { accessorKey: 'amount', header: 'Amount' } ]} data={[ { amount: 316, email: 'ken99@example.com', id: 'm5gr84i9', status: 'success' }, { amount: 242, email: 'Abe45@example.com', id: '3u1reuv4', status: 'success' }, { amount: 837, email: 'Monserrat44@example.com', id: 'derv1ws0', status: 'processing' } ]}/>Installation
pnpm dlx shadcn@latest add @optics/data-table
Props
<DataTable />
Name | Type | |
|---|---|---|
columns | string(default: []) | |
data | string(default: []) |