Table 表格
基础表格元素。要排序、分页、选择等用 DataTable。
| 发票号 | 客户 | 状态 | 金额 |
|---|---|---|---|
| INV-001 | 星河科技 | 已付款 | ¥12,800 |
| INV-002 | 云栖网络 | 待付款 | ¥3,400 |
| INV-003 | 青木设计 | 已付款 | ¥980 |
加载中的表体用 TableSkeletonRows,它记住表体上次的高度,加载完不跳。功能完整的表格见 DataTable。
安装
pnpm dlx shadcn@latest add https://docs.linasan.cn/r/table.json第一次装本站的组件前先在项目里执行一次 shadcn init,详见 安装。
用法
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableSkeletonRows } from '@/components/ui/table';
<TableBody>
<TableSkeletonRows id="orders" loading={isLoading} columns={5} />
{rows.map((r) => <TableRow key={r.id}>…</TableRow>)}
</TableBody>属性
属性
类型