# React Data Grid Options

> Full reference of CDataGrid props — columns, data, features and behavior of the React Data Grid.

Pass props to the component: ``.
There is no imperative update call — change a prop and the grid re-renders.

### CDataGrid

```jsx
import { CDataGrid } from '@coreui/react-data-grid'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `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. |
| `onPaginationChange` | `((pagination: PaginationState) => void) \| undefined` | - | 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` | `boolean \| DataGridPaginationOptions \| undefined` | - | 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. |