Components · Data Display
Feature-rich data table with sorting and row selection powered by TanStack Table.
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| columns | ColumnDef<TData>[] | — | ✓ | TanStack Table column definitions. Use the createColumnHelper() utility for type-safe definitions. |
| data | 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. |
import { Data Table } from '@nexub/react';