Data Table

Fully featured data table with sorting, filtering, pagination, and row selection via TanStack Table v8.

DataTable wraps TanStack Table v8 with sorting, filtering, and pagination built in. See docs for full column definition example.

Invoice	Status	Method	Amount
INV-001	Paid	Credit Card	$250.00
INV-002	Pending	PayPal	$150.00
INV-003	Unpaid	Bank Transfer	$350.00
INV-004	Paid	Credit Card	$450.00

Installation

Run the CLI

$npx particleui-cli add data-table

Usage

TSX

"use client"
import { DataTable } from "@/components/ui/data-table"
import type { ColumnDef } from "@tanstack/react-table"

type User = { id: string; name: string; email: string }
const columns: ColumnDef<User>[] = [
  { accessorKey: "name", header: "Name" },
  { accessorKey: "email", header: "Email" },
]
const data: User[] = [
  { id: "1", name: "Alice", email: "alice@example.com" },
  { id: "2", name: "Bob", email: "bob@example.com" },
]

export default function Example() {
  return <DataTable columns={columns} data={data} />
}

Props

Prop	Type	Default	Required
columns	ColumnDef<TData, TValue>[]	—	yes
data	TData[]	—	yes
searchColumn	string	—	no
searchPlaceholder	string	`"Search..."`	no
pageSize	number	`10`	no

Details

Source filecomponents/ui/data-table.tsx

Typeui

Categoriesdata, core

npm dependencies@tanstack/react-table, lucide-react

Registry deps

Claude skill—