Data Grid Options

Options

Full reference of CoreUI Data Grid constructor options — columns, data, features and behavior.

Pass options to the constructor: new DataGrid(element, options). Update them later with grid.update(options).

Option	Type	Default	Description
`cellNavigation`	`boolean`	`false`	APG grid keyboard navigation — `role="grid"`, a roving-tabindex active cell and arrow-key movement. See Keyboard navigation.
`columns`	`DataGridColumn[]`	`[]`	Column definitions — see Columns.
`columnFilters`	`boolean`	`false`	Renders a filter row in the header with an input per filterable column. See Filtering.
`columnMenu`	`boolean \| ((ctx) => DataGridMenuAction[])`	`false`	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. See Column menu.
`columnOrder`	`boolean \| string[]`	`false`	Drag-and-drop column reordering; an array sets the initial order. Reordering never crosses a pinning boundary. See Column ordering.
`columnPinning`	`boolean \| { left?: string[], right?: string[] }`	`false`	Freezes columns (by `key`) to the left/right edge with sticky positioning. `true` enables the feature with no initial pins. See Column pinning.
`columnVisibility`	`boolean \| Record<string, boolean>`	`false`	Enables hiding/showing columns via `column.toggleVisibility()`; an object sets the initial visibility.
`columnSizing`	`boolean \| { mode?: 'onChange' \| 'onEnd' }`	`false`	Enables column resize handles. `mode` controls whether widths update while dragging (`'onChange'`, the default) or on release (`'onEnd'`). See Column sizing.
`dataProvider`	`(request) => Promise<{ items, totalRows }>`	`null`	Server-side mode: the grid requests data on every sorting/filter/page change. The request carries `{ sorting, columnFilters, globalFilter, pagination }`. Implies pagination. See Server-side data.
`editing`	`boolean`	`false`	Inline cell editing on Enter/F2/double-click for columns opting in via `editable`/`editor`; implies `cellNavigation`. See Inline editing.
`empty`	`string \| () => Node \| string`	`'No items found'`	Content shown when no rows match.
`globalFilter`	`boolean`	`false`	Renders a search input above the grid that filters across all columns. Shorthand for `toolbar: { search: true }`.
`history`	`boolean`	`false`	Undo/redo stack over edit commits — toolbar buttons and Ctrl+Z / Ctrl+Shift+Z / Ctrl+Y. See Undo & redo.
`itemKey`	`(item, index) => string`	`null`	Stable row id — required for selection to survive sorting and filtering.
`items`	`object[]`	`[]`	Row data.
`labels`	`Partial<DataGridLabels>`	`{}`	UI strings (i18n), merged over the defaults. Supports `{token}` interpolation. See Localization.
`overscan`	`number`	`10`	Extra rows rendered above and below the visible window.
`pagination`	`boolean \| { pageSize?, pageSizeOptions?, position?, info? }`	`false`	Pagination mode — mutually exclusive with virtualization. See Pagination.
`rowHeight`	`number`	`44`	Estimated row height in px used by the virtualizer.
`rowSelection`	`boolean \| { selectAll? }`	`false`	Checkbox selection with select-all and shift+click ranges. See Row selection.
`sanitize`	`boolean`	`true`	Sanitize icon markup against the SVG allow list before inserting it.
`sanitizeFn`	`(html) => string \| null`	`null`	Custom sanitizer used in place of the built-in one.
`slots`	`{ toolbar?, pagination?, empty? }`	`{}`	Replaces built-in chrome. Each slot is a factory `({ table, labels }) => ({ element, update?, dispose? })`. See Slots.
`stateKey`	`string \| null`	`null`	Autosaves the grid state to localStorage under this key (debounced) and restores it on init. See Save & restore state.
`sorting`	`boolean \| { multiple?, resetable? }`	`true`	Column sorting; shift+click adds columns to the sort. See Sorting.
`toolbar`	`boolean \| { columns?, export?, history?, search? }`	`false`	Built-in toolbar above the grid. `true` enables every action whose feature is on; a granular object picks each. `columns` needs `columnVisibility`; `export` accepts a `CsvDownloadOptions` object; `history` needs the `history` option; `search` is the same input as `globalFilter`. See Toolbar.
`virtualization`	`boolean`	`true`	Windowed rendering for large datasets. See Virtualization.

Every menu and header icon is overridable with its own string option (SVG markup): columnMenuIcon, sortAscendingIcon, sortDescendingIcon, sortNeutralIcon, pinLeftIcon, pinRightIcon, unpinIcon, moveLeftIcon, moveRightIcon, hideColumnIcon, toolbarColumnsIcon, toolbarExportIcon, toolbarUndoIcon and toolbarRedoIcon. They default to the CoreUI icon set and are sanitized like any other icon.