DataTable

Installation

CLIManual

Add this component with the NateUI CLI.

npmpnpmyarn

npx @nateui/cli@latest add DataTable

Examples

API

DataTable wraps TanStack Table - columns, Row<T>, and the render prop's table instance all come directly from that library; see its own docs for the full column-def and table-instance API. Sorting and pagination stay manual: DataTable expects data to already be sorted and sliced to the current page, then calls back through onSort / onPaginationChange / onPageSizeChange so a parent can re-sort or re-fetch. Column resizing and sticky column pinning are built into the default renderer when columnResize or columnPinning is enabled. Pass children only when you need to replace the table structure entirely, as the Drag And Drop example does. With overflow enabled, the default renderer uses NateUI Scroll for horizontal table scrolling and applies overflowClass to its root; set overflow={false} to render without that viewport. Pagination stays outside the scroll region.

Types

type OnSortParam = { sortOrder: 'asc' | 'desc' | ''; sortKey: string | number };
type ColumnPinningState = { start: string[]; end: string[] };
type ColumnResizeConfig = { mode?: ColumnResizeMode };
type ColumnResizeMode = 'onChange' | 'onEnd';
type DataTableResetHandle = { resetSorting: () => void; resetSelected: () => void };