Data Table

FREE

Table with search, column filters, sorting, pagination, row selection and column visibility.

Installation

Terminal

npx @bloxa/cli add data-table
# or: npx shadcn@latest add @bloxa/data-table

Search, Plan/Country filters, click headers to sort, selection, column toggle (Email starts hidden) and pagination.

14 / 14

Page 1 of 3

Turkish labels, locale-aware sorting and number/date formatting.

4 / 4

Every component also accepts the props of the element it renders.

Prop	Type	Default	Description
data	T[]	—	Rows.
columns	DataTableColumn<T>[]	—	{ key, header, accessor?, cell?, sortable?, filterable?, align?, hidden? }
rowKey	(row: T) => string	—	Stable id for a row.
searchable	boolean	true	Search across visible columns.
pageSize	number	10	Rows per page; 0 disables paging.
selectable	boolean	false	Row selection checkboxes.
onSelectionChange	(rows: T[]) => void	—	Called when the selection changes.
columnToggle	boolean	true	Show/hide columns menu.
defaultSort	{ key, direction }	—	Initial sort.
toolbar	ReactNode	—	Extra toolbar controls.
tableProps	TableProps	—	Passed to Table (striped, hover, stackOnMobile…).
locale	string	—	Locale for sorting and number/date formatting.
labels	{ search?, filter?, columns?, empty?, … }	—	UI strings (for translation).