Data Table

Tabular data with columns and rows.

Installation


$ pnpm dlx shadcn@latest add @pdfcn/takumi/data-table

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

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

Use any TableVariant for the table treatment and size="compact" for denser reports.

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

Prop	Type	Default
`columns`	`DataTableColumn<T>[]`	-
`data`	`T[]`	-
`variant`	`'line' \| 'grid' \| 'minimal' \| 'striped' \| 'compact' \| 'bordered' \| 'primary-header'`	`'grid'`
`footer`	`Partial<Record<keyof T, string \| number>>`	-
`stripe`	`boolean`	`false`
`size`	`'default' \| 'compact'`	`'default'`
`noWrap`	`boolean`	`false`
`style`	`Style`	-

key is the row-field accessor—for example, key: "name" reads row.name. It is not React's reserved key prop.

On This Page