DataTable

Feature-rich data table with sorting, filtering, pagination, and selection.

Props

DataTableProps<T>

Prop	Type	Required	Description
data	T[]	Yes	Table data
columns	ColumnDef<T>[]	Yes	Column definitions
pageSize	number	No	Rows per page (default: 10)
searchable	boolean	No	Enable search
searchPlaceholder	string	No	Search input placeholder
searchColumn	string	No	Column to search
selectable	boolean	No	Enable row selection
onSelectionChange	(rows: T[]) => void	No	Selection change callback
exportable	boolean	No	Enable CSV export
exportFilename	string	No	Export filename
loading	boolean	No	Show loading state
emptyMessage	string	No	Empty state message
className	string	No	Container class

Column Definition

interface ColumnDef<T> {
  id: string
  header: string | ReactNode
  accessorKey?: keyof T
  accessorFn?: (row: T) => unknown
  cell?: (info: CellContext<T>) => ReactNode
  enableSorting?: boolean
  enableHiding?: boolean
}

Example

const columns: ColumnDef<User>[] = [
  { id: 'name', header: 'Name', accessorKey: 'name' },
  { id: 'email', header: 'Email', accessorKey: 'email' },
  {
    id: 'actions',
    header: 'Actions',
    cell: ({ row }) => <Button onClick={() => edit(row.original)}>Edit</Button>,
  },
]

<DataTable
  data={users}
  columns={columns}
  searchable
  selectable
  exportable
/>

See also

• DataTable (Conceptual)