| cellNavigation | - | boolean, undefined |
APG grid keyboard navigation — role="grid", a roving-tabindex active cell, and arrow-key movement across header and data cells. |
| columnFilters | - | boolean, undefined |
Renders a filter row in the header with an input per filterable column. |
| columnMenu | - | boolean, CDataGridColumnMenuBuilder, undefined |
Adds a per-column header menu — true builds it from the enabled features (sort/pin/move/hide); a builder ({ column, defaultActions }) => actions returns the final item list. |
| columnMenuIcon | - | ReactNode |
Custom column menu button icon (ReactNode) replacing the default one. |
| columnOrder | - | boolean, ColumnOrderState, undefined |
Enables drag-and-drop column reordering; an array sets the initial order. |
| columnPinning | - | boolean, ColumnPinningState, undefined |
Freezes columns (by key) to the left/right edge with sticky positioning; true enables the feature with no initial pins. |
| columns | - | CDataGridColumn[] |
Column definitions. |
| columnSizing | - | boolean, DataGridColumnSizingOptions, undefined |
Enables column resize handles; mode controls whether widths update while dragging ('onChange', the default) or on release ('onEnd'). |
| columnVisibility | - | boolean, VisibilityState, undefined |
Enables hiding/showing columns via column.toggleVisibility(); an object sets the initial visibility. |
| dataProvider | - | ((request: DataGridDataRequest) => Promise<DataGridDataResponse>), undefined |
Server-side mode: the grid requests data on every sorting/filter/page change; implies pagination. |
| editing | - | boolean, undefined |
Inline cell editing on Enter/F2/double-click for columns opting in via editable/editor; implies cellNavigation. |
| empty | - | ReactNode |
Content (ReactNode) shown when no rows match. |
| filterIcon | - | ReactNode |
Icon for the per-column filter button. |
| globalFilter | - | boolean, undefined |
Renders a search input above the grid that filters across all columns. |
| hideColumnIcon | - | ReactNode |
Custom hide-column menu action icon (ReactNode) replacing the default one. |
| history | - | boolean, undefined |
Undo/redo history of edit commits — Ctrl/Cmd+Z and Ctrl+Shift+Z/Ctrl+Y plus toolbar buttons; requires editing. |
| itemKey | - | ((item: DataGridItem, index: number) => string), undefined |
Stable row id — required for selection to survive sorting and filtering. |
| items | - | DataGridItem[], undefined |
Row data. |
| labels | - | Partial<DataGridLabels>, undefined |
UI strings (i18n), merged over the defaults; supports {token} interpolation. |
| moveLeftIcon | - | ReactNode |
Custom move-left menu action icon (ReactNode) replacing the default one. |
| moveRightIcon | - | ReactNode |
Custom move-right menu action icon (ReactNode) replacing the default one. |
| onDataError | - | ((error: unknown) => void), undefined |
Fires when the data provider rejects, with the error (server-side mode). |
| onDataLoad | - | ((response: DataGridDataResponse) => void), undefined |
Fires when the data provider resolves, with the { items, totalRows } response (server-side mode). |
| onEditCancel | - | ((item: DataGridItem, columnId: string) => void), undefined |
Fires when an edit is cancelled, with the item and column key. |
| onEditCommit | - | ((event: DataGridEditCommitEvent) => void), undefined |
Fires when an edit commits, with { item, columnId, value, previousValue } — the grid never mutates items; apply the change and re-render. |
| onEditStart | - | ((item: DataGridItem, columnId: string) => void), undefined |
Fires when a cell enters edit mode, with the item and column key. |
| onFilterChange | - | ((columnFilters: ColumnFiltersState, globalFilter: string) => void), undefined |
Fires when column filters or the global filter change, with both filter states. |
| onOrderChange | - | ((columnOrder: ColumnOrderState) => void), undefined |
Fires when columns are reordered, with the TanStack columnOrder state. |
Fires when the page or page size changes, with the TanStack pagination state. |
| onPinningChange | - | ((columnPinning: ColumnPinningState) => void), undefined |
Fires when column pinning changes, with the TanStack columnPinning state. |
| onSelectionChange | - | ((rowSelection: RowSelectionState, selectedItems: DataGridItem[]) => void), undefined |
Fires when the row selection changes, with the TanStack rowSelection state and the selected items. |
| onSizingChange | - | ((columnSizing: ColumnSizingState) => void), undefined |
Fires when a column is resized, with the TanStack columnSizing state. |
| onSortingChange | - | ((sorting: SortingState) => void), undefined |
Fires when sorting changes, with the TanStack sorting state. |
| onVisibilityChange | - | ((columnVisibility: VisibilityState) => void), undefined |
Fires when column visibility changes, with the TanStack columnVisibility state. |
| overscan | - | number, undefined |
Extra rows rendered above and below the visible window. |
Pagination mode — mutually exclusive with virtualization. |
| pinLeftIcon | - | ReactNode |
Custom pin-left menu action icon (ReactNode) replacing the default one. |
| pinRightIcon | - | ReactNode |
Custom pin-right menu action icon (ReactNode) replacing the default one. |
| rowHeight | - | number, undefined |
Estimated row height in px used by the virtualizer. |
| rowSelection | - | boolean, DataGridRowSelectionOptions, undefined |
Checkbox selection with select-all and shift+click ranges. |
| slots | - | Partial<CDataGridSlots>, undefined |
Replaces built-in chrome — each slot is a component rendered with { table, labels }. |
| sortAscendingIcon | - | ReactNode |
Custom ascending sort indicator icon (ReactNode) replacing the default one. |
| sortDescendingIcon | - | ReactNode |
Custom descending sort indicator icon (ReactNode) replacing the default one. |
| sorterVisibility | - | 'always', 'hover', undefined |
Controls when the neutral (unsorted) sort icon is shown on sortable columns: 'always' keeps it visible, 'hover' reveals it on header hover/focus. Omit to hide it until the column is sorted. |
| sorting | - | boolean, DataGridSortingOptions, undefined |
Column sorting; shift+click adds columns to the sort. |
| sortNeutralIcon | - | ReactNode |
Custom unsorted sort indicator icon (ReactNode) replacing the default one. |
| stateKey | - | string, undefined |
Persists the grid state (sorting, filters, order, sizing, visibility, pinning, selection, page) to localStorage under this key — autosaved on every change and restored on mount. |
| tableRef | - | Ref<Table<DataGridItem>>, undefined |
Ref that receives the TanStack table instance. |
| toolbar | - | boolean, CDataGridToolbarOptions, undefined |
Adds a built-in toolbar above the grid — true enables every action whose feature is on (column chooser, CSV export, global search); an object picks each individually. |
| toolbarColumnsIcon | - | ReactNode |
Custom toolbar column-chooser button icon (ReactNode) replacing the default one. |
| toolbarExportIcon | - | ReactNode |
Custom toolbar export button icon (ReactNode) replacing the default one. |
| toolbarRedoIcon | - | ReactNode |
Custom toolbar redo button icon (ReactNode) replacing the default one. |
| toolbarUndoIcon | - | ReactNode |
Custom toolbar undo button icon (ReactNode) replacing the default one. |
| unpinIcon | - | ReactNode |
Custom unpin menu action icon (ReactNode) replacing the default one. |
| virtualization | - | boolean, undefined |
Windowed rendering for large datasets. |