Components
@shadcn/react
@shadcn/helpers
Utilities
| 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>
<TableHeader>
<TableHead isRowHeader className="w-[100px]">发票</TableHead>
<TableHead>状态</TableHead>
<TableHead>方式</TableHead>
<TableHead className="text-right">金额</TableHead>
</TableHeader>
<TableBody>
<TableRow>
<TableCell className="font-medium">INV001</TableCell>
<TableCell>已支付</TableCell>
<TableCell>信用卡</TableCell>
<TableCell className="text-right">$250.00</TableCell>
</TableRow>
</TableBody>
</Table>
<TableCaption>你最近的发票列表。</TableCaption>组成#
使用以下组成来构建一个 Table：
Table
├── TableCaption
├── TableHeader
│ └── TableRow
│ ├── TableHead
│ ├── TableHead
│ ├── TableHead
│ └── TableHead
├── TableBody
│ ├── TableRow
│ │ ├── TableCell
│ │ ├── TableCell
│ │ ├── TableCell
│ │ └── TableCell
│ └── TableRow
│ ├── TableCell
│ ├── TableCell
│ ├── TableCell
│ └── TableCell
└── TableFooter页脚#
使用 <TableFooter /> 组件为表格添加页脚。
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| Total | $2,500.00 | ||
import {
Table,
TableBody,操作#
使用 <DropdownMenu /> 组件显示每行操作的表格。
| Product | Price | Actions |
|---|---|---|
| Wireless Mouse | $29.99 | |
| Mechanical Keyboard | $129.99 | |
| USB-C Hub | $49.99 |
import { MoreHorizontalIcon } from "lucide-react"
import { Button } from "@/components/ui/button"数据表格#
你可以使用 <Table /> 组件来构建更复杂的数据表格。将其与 @tanstack/react-table 结合使用，可以创建支持排序、筛选和分页的表格。
如需了解更多信息，请参阅 数据表格 文档。
你还可以在 任务 演示中查看数据表格示例。
RTL#
要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。
| الفاتورة | الحالة | الطريقة | المبلغ |
|---|---|---|---|
| INV001 | مدفوع | بطاقة ائتمانية | $250.00 |
| INV002 | قيد الانتظار | PayPal | $150.00 |
| INV003 | غير مدفوع | تحويل بنكي | $350.00 |
| INV004 | مدفوع | بطاقة ائتمانية | $450.00 |
| INV005 | مدفوع | PayPal | $550.00 |
| INV006 | قيد الانتظار | تحويل بنكي | $200.00 |
| INV007 | غير مدفوع | بطاقة ائتمانية | $300.00 |
| المجموع | $2,500.00 | ||
"use client"
import * as React from "react"API 参考#
请参阅 React Aria Table 文档。