Vue Data Grid Options

Options

Full reference of CDataGrid props — columns, data, features and behavior.

On this page

Every option is a reactive prop on <CDataGrid> — change a prop and the grid re-renders. Boolean feature props can be passed as bare attributes (column-filters), and object variants configure the feature (:pagination="{ pageSize: 20 }"). Feature-by-feature guides: Sorting, Filtering, Row selection, Pagination, Server-side data, Virtualization, column sizing, pinning, ordering & visibility and the column menu. Column definition keys are on Columns.

CDataGrid

jsx

import { CDataGrid } from '@coreui/vue-data-grid'

Props

Property	Default	Type
cellNavigation	-	`boolean`
APG grid keyboard navigation — `role="grid"`, a roving-tabindex active cell, and arrow-key movement across header and data cells.
columnFilters	-	`boolean`
Renders a filter row in the header with an input per filterable column.
columnMenu	`false`	`boolean`, `CDataGridColumnMenuBuilder`
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	`DEFAULT_COLUMN_MENU_ICON`	`CDataGridIcon`
Custom column menu button icon (VNode or render function) replacing the default one.
columnOrder	`false`	`boolean`, `ColumnOrderState`
Enables drag-and-drop column reordering; an array sets the initial order.
columnPinning	`false`	`boolean`, `ColumnPinningState`
Freezes columns (by `key`) to the left/right edge with sticky positioning; `true` enables the feature with no initial pins.
columnSizing	`false`	`boolean`, `DataGridColumnSizingOptions`
Enables column resize handles; `mode` controls whether widths update while dragging (`'onChange'`, the default) or on release (`'onEnd'`).
columnVisibility	`false`	`boolean`, `VisibilityState`
Enables hiding/showing columns via `column.toggleVisibility()`; an object sets the initial visibility.
columns	-	`CDataGridColumn[]`
Column definitions.
dataProvider	`undefined`	`(request: DataGridDataRequest) => Promise<DataGridDataResponse>`
Server-side mode: the grid requests data on every sorting/filter/page change; implies pagination.
editing	-	`boolean`
Inline cell editing on Enter/F2/double-click for columns opting in via `editable` or an `editor-{key}` slot; implies `cellNavigation`.
empty	`'No items found'`	`string`
Content shown when no rows match.
filterIcon	`DEFAULT_FILTER_ICON`	`CDataGridIcon`
-
globalFilter	-	`boolean`
Renders a search input above the grid that filters across all columns.
history	-	`boolean`
Undo/redo history of edit commits — Ctrl/Cmd+Z and Ctrl+Shift+Z/Ctrl+Y plus toolbar buttons; requires `editing`.
hideColumnIcon	`DEFAULT_HIDE_COLUMN_ICON`	`CDataGridIcon`
Custom hide-column menu action icon (VNode or render function) replacing the default one.
itemKey	`undefined`	`(item: DataGridItem, index: number) => string`
Stable row id — required for selection to survive sorting and filtering.
items	`() => []`	`DataGridItem[]`
Row data.
labels	`undefined`	`Partial<DataGridLabels>`
UI strings (i18n), merged over the defaults; supports `{token}` interpolation.
moveLeftIcon	`DEFAULT_MOVE_LEFT_ICON`	`CDataGridIcon`
Custom move-left menu action icon (VNode or render function) replacing the default one.
moveRightIcon	`DEFAULT_MOVE_RIGHT_ICON`	`CDataGridIcon`
Custom move-right menu action icon (VNode or render function) replacing the default one.
overscan	`10`	`number`
Extra rows rendered above and below the visible window.
pagination	`false`	`boolean`, `DataGridPaginationOptions`
Pagination mode — mutually exclusive with virtualization.
pinLeftIcon	`DEFAULT_PIN_LEFT_ICON`	`CDataGridIcon`
Custom pin-left menu action icon (VNode or render function) replacing the default one.
pinRightIcon	`DEFAULT_PIN_RIGHT_ICON`	`CDataGridIcon`
Custom pin-right menu action icon (VNode or render function) replacing the default one.
rowHeight	`44`	`number`
Estimated row height in px used by the virtualizer.
rowSelection	`false`	`boolean`, `DataGridRowSelectionOptions`
Checkbox selection with select-all and shift+click ranges.
sortAscendingIcon	`DEFAULT_SORT_ASCENDING_ICON`	`CDataGridIcon`
Custom ascending sort indicator icon (VNode or render function) replacing the default one.
sortDescendingIcon	`DEFAULT_SORT_DESCENDING_ICON`	`CDataGridIcon`
Custom descending sort indicator icon (VNode or render function) replacing the default one.
sortNeutralIcon	`DEFAULT_SORT_NEUTRAL_ICON`	`CDataGridIcon`
Custom unsorted sort indicator icon (VNode or render function) replacing the default one.
sorterVisibility	`undefined`	`string`
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	`true`	`boolean`, `DataGridSortingOptions`
Column sorting; shift+click adds columns to the sort.
stateKey	`undefined`	`string`
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.
toolbar	`false`	`boolean`, `CDataGridToolbarOptions`
Adds a toolbar above the grid — `true` enables every action whose feature is on (columns needs `columnVisibility`, export always, search); an object picks each individually.
toolbarColumnsIcon	`DEFAULT_TOOLBAR_COLUMNS_ICON`	`CDataGridIcon`
Custom toolbar columns button icon (VNode or render function) replacing the default one.
toolbarExportIcon	`DEFAULT_TOOLBAR_EXPORT_ICON`	`CDataGridIcon`
Custom toolbar export button icon (VNode or render function) replacing the default one.
toolbarRedoIcon	`DEFAULT_TOOLBAR_REDO_ICON`	`CDataGridIcon`
Custom toolbar redo button icon (VNode or render function) replacing the default one.
toolbarUndoIcon	`DEFAULT_TOOLBAR_UNDO_ICON`	`CDataGridIcon`
Custom toolbar undo button icon (VNode or render function) replacing the default one.
unpinIcon	`DEFAULT_UNPIN_ICON`	`CDataGridIcon`
Custom unpin menu action icon (VNode or render function) replacing the default one.
virtualization	`true`	`boolean`
Windowed rendering for large datasets.

Events

Event name
dataError
Fires when the data provider rejects, with the error (server-side mode).
dataLoad
Fires when the data provider resolves, with the `{ items, totalRows }` response (server-side mode).
editCancel
Fires when an edit is cancelled, with the item and column key.
editCommit
Fires when an edit commits, with `{ item, columnId, value, previousValue }` — the grid never mutates `items`; apply the change and re-render.
editStart
Fires when a cell enters edit mode, with the item and column key.
filterChange
Fires when column filters or the global filter change, with both filter states.
orderChange
Fires when columns are reordered, with the TanStack columnOrder state.
paginationChange
Fires when the page or page size changes, with the TanStack pagination state.
pinningChange
Fires when column pinning changes, with the TanStack columnPinning state.
selectionChange
Fires when the row selection changes, with the TanStack rowSelection state and the selected items.
sizingChange
Fires when a column is resized, with the TanStack columnSizing state.
sortingChange
Fires when sorting changes, with the TanStack sorting state.
visibilityChange
Fires when column visibility changes, with the TanStack columnVisibility state.

columnMenu is boolean | ((ctx) => CDataGridMenuAction[]): true builds the per-column header menu from the enabled features (sort/pin/move/hide), and a builder ({ column, defaultActions }) => actions returns the final item list. See Column menu.

Every menu and header icon is overridable with its own prop, each a CDataGridIcon (a VNode or () => VNode): columnMenuIcon, sortAscendingIcon, sortDescendingIcon, sortNeutralIcon, pinLeftIcon, pinRightIcon, unpinIcon, moveLeftIcon, moveRightIcon, hideColumnIcon, toolbarColumnsIcon and toolbarExportIcon. They default to the CoreUI icon set. Icons are native VNodes — there is no SVG string sanitization.