Angular Data Grid Options

Options

Full reference of CoreUI Data Grid for Angular inputs — columns, data, features and behavior.

On this page

Every option is an input on <c-data-grid>. Inputs are reactive — change a bound value and the grid re-renders; there is no imperative update() call. Feature inputs accept true for the defaults or an object to configure the feature — see each feature’s page for its keys: sorting, filtering, row selection, pagination, server-side data, column sizing, pinning, ordering & visibility and the column menu. Column definitions are documented in Columns.

jsx
import { DataGridComponent } from '@coreui/angular-data-grid'
PropertyDefaultType
cellNavigationfalseboolean

APG grid keyboard navigation — role="grid", a roving-tabindex active cell, and arrow-key movement across header and data cells.

columnFiltersfalseboolean

Renders a filter row in the header with an input per filterable column.

columnMenufalseboolean, DataGridColumnMenuBuilder

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-TemplateRef<unknown>, undefined

Custom column menu button icon (TemplateRef) replacing the default one.

columnOrderfalseboolean, ColumnOrderState

Enables drag-and-drop column reordering; an array sets the initial order.

columnPinningfalseboolean, ColumnPinningState

Freezes columns (by key) to the left/right edge with sticky positioning; true enables the feature with no initial pins.

columns-DataGridColumn[]

Column definitions.

columnSizingfalseboolean, DataGridColumnSizingOptions

Enables column resize handles; mode controls whether widths update while dragging ('onChange', the default) or on release ('onEnd').

columnVisibilityfalseboolean, VisibilityState

Enables hiding/showing columns via column.toggleVisibility(); an object sets the initial visibility.

dataProvider-object, undefined

Server-side mode: the grid requests data on every sorting/filter/page change; implies pagination.

editingfalseboolean

Inline cell editing on Enter/F2/double-click for columns opting in via editable or a cDataGridCellEditor template; implies cellNavigation.

empty'No items found'string

Content shown when no rows match.

filterIcon-TemplateRef<unknown>, undefined

Icon for the per-column filter button.

globalFilterfalseboolean

Renders a search input above the grid that filters across all columns.

hideColumnIcon-TemplateRef<unknown>, undefined

Custom hide-column menu action icon (TemplateRef) replacing the default one.

historyfalseboolean

Undo/redo history of edit commits — Ctrl/Cmd+Z and Ctrl+Shift+Z/Ctrl+Y plus toolbar buttons; requires editing.

itemKey-object, undefined

Stable row id — required for selection to survive sorting and filtering.

items[]DataGridItem[]

Row data.

labels{}Partial<DataGridLabels>

UI strings (i18n), merged over the defaults; supports {token} interpolation.

moveLeftIcon-TemplateRef<unknown>, undefined

Custom move-left menu action icon (TemplateRef) replacing the default one.

moveRightIcon-TemplateRef<unknown>, undefined

Custom move-right menu action icon (TemplateRef) replacing the default one.

overscan10number

Extra rows rendered above and below the visible window.

paginationfalseboolean, DataGridPaginationOptions

Pagination mode — mutually exclusive with virtualization.

pinLeftIcon-TemplateRef<unknown>, undefined

Custom pin-left menu action icon (TemplateRef) replacing the default one.

pinRightIcon-TemplateRef<unknown>, undefined

Custom pin-right menu action icon (TemplateRef) replacing the default one.

rowHeight44number

Estimated row height in px used by the virtualizer.

rowSelectionfalseboolean, DataGridRowSelectionOptions

Checkbox selection with select-all and shift+click ranges.

sortAscendingIcon-TemplateRef<unknown>, undefined

Custom ascending sort indicator icon (TemplateRef) replacing the default one.

sortDescendingIcon-TemplateRef<unknown>, undefined

Custom descending sort indicator icon (TemplateRef) 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.

sortingtrueboolean, DataGridSortingOptions

Column sorting; shift+click adds columns to the sort.

sortNeutralIcon-TemplateRef<unknown>, undefined

Custom unsorted sort indicator icon (TemplateRef) 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 init.

toolbarfalseboolean, DataGridToolbarOptions

Adds a toolbar above the grid — true enables every action whose feature is on (columns needs columnVisibility, export, search); an object picks each individually.

toolbarColumnsIcon-TemplateRef<unknown>, undefined

Custom toolbar column-chooser button icon (TemplateRef) replacing the default one.

toolbarExportIcon-TemplateRef<unknown>, undefined

Custom toolbar export button icon (TemplateRef) replacing the default one.

toolbarRedoIcon-TemplateRef<unknown>, undefined

Custom toolbar redo button icon (TemplateRef) replacing the default one.

toolbarUndoIcon-TemplateRef<unknown>, undefined

Custom toolbar undo button icon (TemplateRef) replacing the default one.

unpinIcon-TemplateRef<unknown>, undefined

Custom unpin menu action icon (TemplateRef) replacing the default one.

virtualizationtrueboolean

Windowed rendering for large datasets.

Content templates

Where the vanilla grid takes slots, filter and render options, the Angular grid takes ng-template content children:

TemplateContextDescription
<ng-template cDataGridCell="key">$implicit: item, index, valueCustom cell content for the column key. See Columns overview.
<ng-template cDataGridColumnFilter="key">$implicit: column, table, labelsCustom filter UI for the column key. See Filtering.
<ng-template cDataGridSlot="toolbar | pagination | empty">$implicit: table, labelsReplaces a built-in chrome module. See Slots.

Import the matching directive (DataGridCellDirective, DataGridColumnFilterDirective, DataGridSlotDirective) alongside DataGridComponent to use a template.