DataTable — Design System

Props

The full prop API for DataTable. Same surface in web and React Native — bundlers pick the right variant via the react-native export condition.

Prop	Type	Default	Description	Since
`columns`	`ColumnDef<TData, TValue>[]`	—	TanStack Table column definitions. Required.	0.5.0
`data`	`TData[]`	—	Array of data rows. Required.	0.5.0
`variant`	`'default' \| 'bordered' \| 'striped' \| 'minimal' \| 'card'`	`'default'`	Visual table style. Passed through to the underlying Table primitive.	0.6.0
`searchable`	`boolean`	`false`	Show a global search input above the table.	0.5.0
`searchPlaceholder`	`string`	`'Search...'`	Placeholder text for the search input.	0.5.0
`sortable`	`boolean`	`true`	Enable column header click-to-sort.	0.5.0
`multiSort`	`boolean`	`false`	Allow shift+click to sort by multiple columns.	0.6.0
`paginated`	`boolean`	`false`	Show pagination controls below the table.	0.5.0
`pageSize`	`number`	`10`	Rows per page when paginated is true.	0.5.0
`pageSizeOptions`	`number[]`	`[5, 10, 20, 50]`	Options for the rows-per-page selector.	0.5.0
`selectable`	`boolean`	`false`	Add a checkbox column for row selection.	0.5.0
`columnVisibility`	`boolean`	`false`	Show a column show/hide dropdown.	0.5.0
`expandable`	`boolean`	`false`	Enable expandable rows with a chevron toggle.	0.5.0
`columnFilterable`	`boolean`	`false`	Show per-column filter inputs under each header.	0.6.0
`resizable`	`boolean`	`false`	Enable column resizing by dragging header edges.	0.6.0
`columnPinnable`	`boolean`	`false`	Enable column pinning (left/right).	0.6.0
`pinnedColumns`	`{ left?: string[]; right?: string[] }`	—	Column IDs to pin. Only used when columnPinnable is true.	0.6.0
`rowPinnable`	`boolean`	`false`	Enable row pinning (top/bottom).	0.6.0
`pinnedRows`	`{ top?: string[]; bottom?: string[] }`	—	Row IDs to pin. Only used when rowPinnable is true.	0.6.0
`groupable`	`boolean`	`false`	Enable row grouping by column with aggregation.	0.6.0
`faceted`	`boolean`	`false`	Enable faceted filtering (unique value lists, min/max ranges). Requires columnFilterable.	0.6.0
`headerTone`	`TableHeaderTone`	`'default'`	Semantic header color inherited from the Table primitive.	0.10.0
`headerClassName`	`string`	—	Tokenized Tailwind classes applied to every header cell.	0.10.0
`wide`	`boolean`	`false`	Preserve readable column widths with horizontal overflow for dense datasets.	0.10.0
`renderSubComponent`	`(props: { row: Row<TData> }) => ReactNode`	—	Content rendered when a row is expanded.	0.5.0
`onRowSelectionChange`	`(selection: RowSelectionState) => void`	—	Called whenever row selection state changes.	0.5.0
`emptyMessage`	`string`	`'No results.'`	Message shown when no rows match filters.	0.5.0
`className`	`string`	—	Additional Tailwind classes on the root wrapper.	0.5.0

Import

import { DataTable, DataTableColumnHeader, createColumnHelper } from '@mihcm/ui/DataTable';