Data Table

Sortable, paginated tables built with TanStack Table.

Invoice	Status	Amount
INV001	Paid	$250.00
INV002	Pending	$150.00
INV003	Unpaid	$350.00

Page 1 of 2

Installation

Add the data table component with the shadcn CLI.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/data-table.json

Usage

tsx

import { DataTable } from "@/components/ui/data-table"

Examples

Default

Invoice	Status	Amount
INV001	Paid	$250.00
INV002	Pending	$150.00
INV003	Unpaid	$350.00

Page 1 of 2

import type { ColumnDef } from "@tanstack/react-table"

import { DataTable } from "@/components/ui/data-table"

type Invoice = { invoice: string; status: string; amount: string }

const columns: ColumnDef<Invoice>[] = [
  { accessorKey: "invoice", header: "Invoice" },
  { accessorKey: "status", header: "Status" },
  { accessorKey: "amount", header: "Amount" },
]

<DataTable columns={columns} data={invoices} pageSize={3} />