Data Table

安装

命令

npx shadcn@latest add @pdfcn/forme/data-table

手动

安装以下依赖：

npm install @formepdf/react @formepdf/core

将以下代码复制粘贴到你的项目中。

• components/pdf/data-table/data-table.tsx

• components/pdf/theme-provider.tsx

• lib/resolve-color.ts

• lib/pdf-themes/professional.ts

• lib/pdf-themes/primitives.ts

• types/pdf-themes.ts

• types/pdf-components.ts

更新导入路径以匹配你的项目配置。

用法

import { DataTable } from "@/components/pdf/data-table";

<DataTable
  columns={[{ key: "name", header: "Name" }]}
  data={[{ name: "Widget" }]}
/>

变体

使用任意 TableVariant 来设置表格样式，并使用 size="compact" 生成更紧凑的报表。

<DataTable columns={columns} data={rows} variant="striped" size="compact" />

API 参考

DataTable

DataTableColumn

key 是行字段的取值器，例如 key: "name" 会读取 row.name。它不是 React 保留的 key 属性。