Table.tsx

基本信息

• 类型: React 组件 (shadcn/ui)
• 路径: ./src/components/ui/table.tsx

功能描述

表格组件，用于展示结构化数据。包含完整的表格子组件，支持响应式滚动和悬停效果。

导出内容

• Table - 表格容器（带横向滚动）
• TableHeader - 表头
• TableBody - 表体
• TableFooter - 表尾
• TableHead - 表头单元格
• TableRow - 表格行
• TableCell - 表格单元格
• TableCaption - 表格标题

Props 接口

Table

属性	类型	必填	默认值	说明
className	string	否	-	自定义CSS类名
...props	React.ComponentProps<'table'>	否	-	table原生属性

TableHeader / TableBody / TableFooter

属性	类型	必填	默认值	说明
className	string	否	-	自定义CSS类名
...props	对应原生元素属性	否	-	其他属性

TableRow

属性	类型	必填	默认值	说明
className	string	否	-	自定义CSS类名
data-state	'selected'	否	-	选中状态
...props	React.ComponentProps<'tr'>	否	-	tr原生属性

TableHead / TableCell

属性	类型	必填	默认值	说明
className	string	否	-	自定义CSS类名
...props	对应原生元素属性	否	-	其他属性

依赖

• @/lib/utils - 工具函数 (cn)

使用示例

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>
    <TableRow>
      <TableCell className="font-medium">INV002</TableCell>
      <TableCell>待付款</TableCell>
      <TableCell>支付宝</TableCell>
      <TableCell className="text-right">¥150.00</TableCell>
    </TableRow>
  </TableBody>
</Table>