Data table

A generic table built on @tanstack/react-table: sorting, pagination, and a column-visibility dropdown out of the box. Re-exports ColumnDef so you can define columns without a separate import.

import { DataTable, type ColumnDef } from '@rtorcato/shadcn-ui/components/ui-extended/data-table'

Open in Storybook ↗

Usage

type Payment = { id: string; amount: number; status: string }

const columns: ColumnDef<Payment>[] = [
  { accessorKey: 'status', header: 'Status' },
  { accessorKey: 'amount', header: 'Amount' },
]

<DataTable columns={columns} data={payments} pageSize={10} />

Props

Prop	Type	Default	Description
columns	ColumnDef<TData>[]	—	TanStack column definitions.
data	TData[]	—	Rows to render.
pageSize	number	10	Rows per page.
className	string	—	Wrapper class.