Data Display

Table

Semantic table with the styling shadcn ships. Use DataTable for sort + paginate.

Preview

Recent invoices.
Invoice	Status	Method	Amount
INV-001	Paid	Card	$250.00
INV-002	Pending	Bank	$150.00
INV-003	Unpaid	Card	$350.00

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';

tsx

<Table>
  <TableHeader><TableRow><TableHead>Name</TableHead></TableRow></TableHeader>
  <TableBody>…</TableBody>
</Table>

Data Display

Semantic table with the styling shadcn ships. Use DataTable for sort + paginate.

Recent invoices.
Invoice	Status	Method	Amount
INV-001	Paid	Card	$250.00
INV-002	Pending	Bank	$150.00
INV-003	Unpaid	Card	$350.00

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';

tsx

<Table>
  <TableHeader><TableRow><TableHead>Name</TableHead></TableRow></TableHeader>
  <TableBody>…</TableBody>
</Table>