Components · Data Display
Data Table
StableSince v0.0.1
Feature-rich data table with sorting and row selection powered by TanStack Table.
import { DataTable } from '@nexub/react';Examples
Default
With sorting
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columnsrequired | DataTableColumn<TData>[] | — | TanStack Table column definitions (DataTableColumn is exported from @nexub/react). Set meta: { align: 'end' } for numeric columns; headers, sort buttons and cells follow it. |
| caption | ReactNode | — | Names the table for assistive tech (and its scroll region). Shown below the table; add captionHidden to keep it screen-reader only. |
| datarequired | TData[] | — | Array of row data objects to render. |
| enableSorting | boolean | false | Enables click-to-sort on column headers. |
| enableRowSelection | boolean | false | Adds a checkbox column for row selection. |
| pagination.pageSize | number | 10 | Number of rows per page when pagination is active. |
| pagination.pageIndex | number | 0 | Zero-based index of the currently visible page. |
| onRowSelectionChange | (selectedRows: TData[]) => void | — | Callback invoked when the row selection state changes. |
| loading | boolean | false | Shows a skeleton loading state over the table body. |
| emptyState | React.ReactNode | — | Custom content rendered when the data array is empty. |
On iOS & Android
Web only
Data Table has no @nexub/react-native twin. On phones, follow the platform pattern instead, or compose it from the native components listed on the React Native page.