跳到正文
Linasan UI

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>

属性

属性

类型

本页目录