Loading...
Loading...
> A semantic table component with header, body, footer, and caption support for displaying structured data.
1import {2 Table,3 TableBody,4 TableCaption,5 TableCell,6 TableFooter,7 TableHead,8 TableHeader,9 TableRow,10} from "@/components/ui/table";
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| Total | $750.00 | ||
1<Table>2 <TableCaption>A list of your recent invoices.</TableCaption>3 <TableHeader>4 <TableRow>5 <TableHead>Invoice</TableHead>6 <TableHead>Status</TableHead>7 <TableHead>Method</TableHead>8 <TableHead className="text-right">Amount</TableHead>9 </TableRow>10 </TableHeader>11 <TableBody>12 <TableRow>13 <TableCell className="font-medium">INV001</TableCell>14 <TableCell>Paid</TableCell>15 <TableCell>Credit Card</TableCell>16 <TableCell className="text-right">$250.00</TableCell>17 </TableRow>18 {/* More rows... */}19 </TableBody>20 <TableFooter>21 <TableRow>22 <TableCell colSpan={3}>Total</TableCell>23 <TableCell className="text-right">$750.00</TableCell>24 </TableRow>25 </TableFooter>26</Table>
| Name | Role | |
|---|---|---|
| John Doe | john@example.com | Admin |
| Jane Smith | jane@example.com | User |
| Bob Johnson | bob@example.com | Editor |
1<Table>2 <TableHeader>3 <TableRow>4 <TableHead>Name</TableHead>5 <TableHead>Email</TableHead>6 <TableHead>Role</TableHead>7 </TableRow>8 </TableHeader>9 <TableBody>10 <TableRow>11 <TableCell>John Doe</TableCell>12 <TableCell>john@example.com</TableCell>13 <TableCell>Admin</TableCell>14 </TableRow>15 </TableBody>16</Table>
| Product | Price | Stock |
|---|---|---|
| Laptop | $999 | 15 |
| Keyboard | $79 | 42 |
| Mouse | $29 | 103 |
1<Table>2 <TableHeader>3 <TableRow>4 <TableHead>Product</TableHead>5 <TableHead>Price</TableHead>6 <TableHead>Stock</TableHead>7 </TableRow>8 </TableHeader>9 <TableBody>10 <TableRow data-state="selected">11 <TableCell>Keyboard</TableCell>12 <TableCell>$79</TableCell>13 <TableCell>42</TableCell>14 </TableRow>15 </TableBody>16</Table>
| ID | Customer | Product | Quantity | Status | Total |
|---|---|---|---|---|---|
| #ORD-001 | Alice Cooper | Premium Plan | 1 | Completed | $99.00 |
| #ORD-002 | Bob Dylan | Starter Plan | 2 | Processing | $98.00 |
1<Table>2 <TableHeader>3 <TableRow>4 <TableHead>ID</TableHead>5 <TableHead>Customer</TableHead>6 <TableHead>Product</TableHead>7 <TableHead>Quantity</TableHead>8 <TableHead>Status</TableHead>9 <TableHead className="text-right">Total</TableHead>10 </TableRow>11 </TableHeader>12 <TableBody>13 {/* Rows with horizontal scroll on mobile */}14 </TableBody>15</Table>
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes |
✓ Use Table when:
✗ Don't use when:
Best Practices: