Data Table
shadcn/uiPowerful data table built with TanStack Table for sorting, filtering, and pagination.
Installation
Props
<DataTable />
Name
Type
columns
ColumnDef<TData, TValue>[] (required)
data
TData[] (required)
...props
UseReactTableOptions
Search for a command to run...
Powerful data table built with TanStack Table for sorting, filtering, and pagination.
| Status | Amount | |
|---|---|---|
| ken99@example.com | success | 316 |
| Abe45@example.com | success | 242 |
| Monserrat44@example.com | processing | 837 |
import { DataTable } from "@/registry/optics/data-table";import { ColumnDef } from "@tanstack/react-table";const columns = [ { accessorKey: "email", header: "Email", }, { accessorKey: "status", header: "Status", },];const data = [ { email: "ken99@example.com", status: "success", },];<DataTable columns={columns} data={data} />import { DataTable } from "@/registry/optics/data-table";import { ColumnDef } from "@tanstack/react-table";const columns = [ { accessorKey: "email", header: "Email", }, { accessorKey: "status", header: "Status", },];const data = [ { email: "ken99@example.com", status: "success", },];<DataTable columns={columns} data={data} />