Components
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| INV004 | Paid | Credit Card | $450.00 |
| INV005 | Paid | PayPal | $550.00 |
| INV006 | Pending | Bank Transfer | $200.00 |
| INV007 | Unpaid | Credit Card | $300.00 |
| Total | $2,500.00 | ||
import {
Table,
TableBody,安装
pnpm dlx shadcn@latest add table
用法
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table"<Table>
<TableCaption>你最近发票的列表。</TableCaption>
<TableHeader>
<TableRow>
<TableHead className="w-[100px]">发票</TableHead>
<TableHead>状态</TableHead>
<TableHead>付款方式</TableHead>
<TableHead className="text-right">金额</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell className="font-medium">INV001</TableCell>
<TableCell>已支付</TableCell>
<TableCell>信用卡</TableCell>
<TableCell className="text-right">$250.00</TableCell>
</TableRow>
</TableBody>
</Table>数据表格
你可以使用 <Table /> 组件构建更复杂的数据表格。将其与 @tanstack/react-table 结合使用，创建支持排序、筛选和分页的表格。
更多信息请参考数据表格文档。
你也可以在任务演示中看到数据表格的示例。