Data Table

安装

命令

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

手动

安装以下依赖：

npm install takumi-pdf @takumi-rs/helpers

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

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

• components/pdf/theme-provider.tsx

• lib/resolve-color.ts

• lib/pdf-primitives.tsx

• lib/pdf-svg.tsx

• 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 prop。