Data Table — Components

Payments
Status
paid	ken@example.com	$316.00
paid	abe@example.com	$242.00
pending	monserrat@example.com	$837.00
paid	silas@example.com	$874.00
failed	carmella@example.com	$721.00
paid	dana@example.com	$129.00
pending	eli@example.com	$455.00
paid	farah@example.com	$63.00
paid	gus@example.com	$990.00
failed	hana@example.com	$310.00

Usage

Data Table usage

import { Badge } from "@/components/badge";import { createDataTableColumnHelper, DataTable, DataTableColumnHeader } from "@/components/data-table";
type Payment = { id: string; status: "paid" | "failed"; email: string; amount: number };
const column = createDataTableColumnHelper<Payment>();const columns = column.columns([  column.accessor("status", {    header: "Status",    enableSorting: false,    cell: ({ getValue }) => <Badge variant={getValue() === "paid" ? "success" : "danger"}>{getValue()}</Badge>,  }),  column.accessor("email", {    meta: { label: "Email" },    header: ({ column }) => <DataTableColumnHeader column={column} title="Email" />,    filterFn: "includesString",  }),  column.accessor("amount", {    meta: { label: "Amount", align: "end" },    header: ({ column }) => <DataTableColumnHeader column={column} title="Amount" />,  }),]);
export function DataTableUsage({ payments }: { payments: Payment[] }) {  return (    <DataTable      columns={columns}      data={payments}      caption="Payments"      filterColumn="email"      filterPlaceholder="Filter emails"      enableSelection      getRowId={(row) => row.id}    />  );}

When to use

Use when

Records the user sorts, filters, selects or pages through, in memory. Columns from createDataTableColumnHelper; DataTableColumnHeader makes a column sortable; meta: { align: "end" } for numbers; a caption is required. Requires @tanstack/react-table

Don’t use when

A static list (use Table); server-side sorting or paging of large data (use TanStack's manual modes in your own table)