Data Table
Powerful table and datagrids built using TanStack Table.
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
Installation
pnpm dlx shadcn@latest add data-tableUsage
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
const invoices = [
{ id: "INV001", status: "Paid", method: "Credit Card", amount: "$250.00" },
{ id: "INV002", status: "Pending", method: "PayPal", amount: "$150.00" },
{ id: "INV003", status: "Unpaid", method: "Bank Transfer", amount: "$350.00" },
];Powerful table and datagrids built using TanStack Table.