Vue Data GridGrid Options Reference

Implements the GridOptions<TData> interface.

The grid will respond to property updates unless they are marked as Initial. See Updating Grid Options.

Accessories

statusBar
{ statusPanels: StatusPanelDef[] }
Specifies the status bar components to use in the status bar.
sideBar
SideBarDef | string | string[] | boolean | null
Specifies the side bar components.
getContextMenuItems
GetContextMenuItems
For customising the context menu.
suppressContextMenu
boolean
default: false
Set to true to not show the context menu. Use if you don't want to use the default 'right click' context menu.
preventDefaultOnContextMenu
boolean
default: false
When using suppressContextMenu, you can use the onCellContextMenu function to provide your own code to handle cell contextmenu events. This flag is useful to prevent the browser from showing its default context menu.
allowContextMenuWithControlKey
boolean
default: false
Allows context menu to show, even when ^ Ctrl key is held down. Default: false
getMainMenuItems
GetMainMenuItems
For customising the main 'column header' menu.
columnMenu
'legacy' | 'new'
default: 'new'
Changes the display type of the column menu. 'new' just displays the main list of menu items. 'legacy' displays a tabbed menu.
suppressMenuHide
boolean
default: true
When true, the column menu button will always be shown. When `false, the column menu button will only show when the mouse is over the column header. If columnMenu = 'legacy', this will default to false instead of true.
DOM element to use as the popup parent for grid popups (context menu, column menu etc).
postProcessPopup
Function
Allows user to process popups after they are created. Applications can use this if they want to, for example, reposition the popup.

Clipboard

See Clipboard for more information.

copyHeadersToClipboard
boolean
default: false
Set to true to also include headers when copying to clipboard using ^ Ctrl+C clipboard. Default: false
copyGroupHeadersToClipboard
boolean
default: false
Set to true to also include group headers when copying to clipboard using ^ Ctrl+C clipboard. Default: false
clipboardDelimiter
string
default: '\t'
Specify the delimiter to use when copying to clipboard.
suppressCutToClipboard
boolean
default: false
Set to true to block cut operations within the grid.
suppressLastEmptyLineOnPaste
boolean
default: false
Set to true to work around a bug with Excel (Windows) that adds an extra empty line at the end of ranges copied to the clipboard.
suppressClipboardPaste
boolean
default: false
Set to true to turn off paste operations within the grid.
suppressClipboardApi
boolean
default: false
Set to true to stop the grid trying to use the Clipboard API, if it is blocked, and immediately fallback to the workaround.
processCellForClipboard
Function
Allows you to process cells for the clipboard. Handy if for example you have Date objects that need to have a particular format if importing into Excel.
processHeaderForClipboard
Function
Allows you to process header values for the clipboard.
processGroupHeaderForClipboard
Function
Allows you to process group header values for the clipboard.
processCellFromClipboard
Function
Allows you to process cells from the clipboard. Handy if for example you have number fields and want to block non-numbers from getting into the grid.
sendToClipboard
Function
Allows you to get the data that would otherwise go to the clipboard. To be used when you want to control the 'copy to clipboard' operation yourself.
processDataFromClipboard
Function
Allows complete control of the paste operation, including cancelling the operation (so nothing happens) or replacing the data with other data.

Column Definitions

See Column / Column Group definitions for more information

Array of Column / Column Group definitions.
defaultColDef
A default column definition. Items defined in the actual column definitions get precedence.
defaultColGroupDef
Partial<ColGroupDef>
A default column group definition. All column group definitions will use these properties. Items defined in the actual column group definition get precedence.
columnTypes
{ [key: string]: ColTypeDef }
An object map of custom column types which contain groups of properties that column definitions can reuse by referencing in their type property.
dataTypeDefinitions
{ [cellDataType: string]: DataTypeDefinition; }
An object map of cell data types to their definitions. Cell data types can either override/update the pre-defined data types ('text', 'number', 'boolean', 'date', 'dateString' or 'object'), or can be custom data types.
maintainColumnOrder
boolean
default: false
Keeps the order of Columns maintained after new Column Definitions are updated.
enableStrictPivotColumnOrder
boolean
default: false
Resets pivot column order when impacted by filters, data or configuration changes
suppressFieldDotNotation
boolean
default: false
If true, then dots in field names (e.g. 'address.firstLine') are not treated as deep references. Allows you to use dots in your field name if you prefer.

Column Headers

See Column Headers for more information.

headerHeight
number
The height in pixels for the row containing the column label header. If not specified, it uses the theme value of header-height.
groupHeaderHeight
number
The height in pixels for the rows containing header column groups. If not specified, it uses headerHeight.
floatingFiltersHeight
number
The height in pixels for the row containing the floating filters. If not specified, it uses the theme value of header-height.
pivotHeaderHeight
number
The height in pixels for the row containing the columns when in pivot mode. If not specified, it uses headerHeight.
pivotGroupHeaderHeight
number
The height in pixels for the row containing header column groups when in pivot mode. If not specified, it uses groupHeaderHeight.

Column Moving

See Column Moving for more information.

allowDragFromColumnsToolPanel
boolean
default: false
Allow reordering and pinning columns by dragging columns from the Columns Tool Panel to the grid.
suppressMovableColumns
boolean
default: false
Set to true to suppress column moving, i.e. to make the columns fixed position.
suppressMoveWhenColumnDragging
boolean
default: false
Set to true to suppress moving columns while dragging the Column Header. This option highlights the position where the column will be placed and it will only move it on mouse up.
suppressColumnMoveAnimation
boolean
default: false
If true, the ag-column-moving class is not added to the grid while columns are moving. In the default themes, this results in no animation when moving columns. Default: false
suppressDragLeaveHidesColumns
boolean
default: false
If true, when you drag a column out of the grid (e.g. to the group zone) the column is not hidden.
suppressRowGroupHidesColumns
boolean
default: false
If true, when you drag a column into a row group panel the column is not hidden.

Column Pinning

See Column Pinning for more information.

processUnpinnedColumns
Function
Allows the user to process the columns being removed from the pinned section because the viewport is too small to accommodate them. Returns an array of columns to be removed from the pinned areas.

Column Sizing

See Column Sizing for more information.

colResizeDefault
'shift'
Set to 'shift' to have shift-resize as the default resize operation (same as user holding down ⇧ Shift while resizing).
autoSizeStrategy
| SizeColumnsToFitGridStrategy | SizeColumnsToFitProvidedWidthStrategy | SizeColumnsToContentStrategy
Auto-size the columns when the grid is loaded. Can size to fit the grid width, fit a provided width, or fit the cell contents.
suppressAutoSize
boolean
default: false
Suppresses auto-sizing columns for columns. In other words, double clicking a column's header's edge will not auto-size.
autoSizePadding
number
default: 20
Number of pixels to add to a column width after the auto-sizing calculation. Set this if you want to add extra room to accommodate (for example) sort icons, or some other dynamic nature of the header.
skipHeaderOnAutoSize
boolean
default: false
Set this to true to skip the headerName when autoSize is called by default.

Components

See Components for more information.

components
{ [p: string]: any }
A map of component names to components.

Editing

See Cell Editing for more information.

editType
'fullRow'
Set to 'fullRow' to enable Full Row Editing. Otherwise leave blank to edit one cell at a time.
singleClickEdit
boolean
default: false
Set to true to enable Single Click Editing for cells, to start editing with a single click.
suppressClickEdit
boolean
default: false
Set to true so that neither single nor double click starts editing.
stopEditingWhenCellsLoseFocus
boolean
default: false
Set this to true to stop cell editing when grid loses focus. The default is that the grid stays editing until focus goes onto another cell.
enterNavigatesVertically
boolean
default: false
Set to true along with enterNavigatesVerticallyAfterEdit to have Excel-style behaviour for the ↵ Enter key, i.e. pressing the ↵ Enter key will move down to the cell beneath. Default: false
enterNavigatesVerticallyAfterEdit
boolean
default: false
Set to true along with enterNavigatesVertically to have Excel-style behaviour for the ↵ Enter key, i.e. pressing the ↵ Enter key will move down to the cell beneath. Default: false
enableCellEditingOnBackspace
boolean
Forces Cell Editing to start when backspace is pressed. This is only relevant for MacOS users.
undoRedoCellEditing
boolean
Set to true to enable Undo / Redo while editing.
undoRedoCellEditingLimit
number
default: 10
Set the size of the undo / redo stack.
readOnlyEdit
boolean
default: false
Set to true to stop the grid updating data after Edit, Clipboard and Fill Handle operations. When this is set, it is intended the application will update the data, eg in an external immutable store, and then pass the new dataset to the grid.
Note: rowNode.setDataValue() does not update the value of the cell when this is True, it fires onCellEditRequest instead.

Export

See Export for more information.

defaultCsvExportParams
A default configuration object used to export to CSV.
suppressCsvExport
boolean
default: false
Prevents the user from exporting the grid to CSV.
defaultExcelExportParams
A default configuration object used to export to Excel.
suppressExcelExport
boolean
default: false
Prevents the user from exporting the grid to Excel.
A list (array) of Excel styles to be used when exporting to Excel with styles.

Filtering

See Filtering for more information.

quickFilterText
string
Rows are filtered using this text as a Quick Filter.
cacheQuickFilter
boolean
default: false
Set to true to turn on the Quick Filter cache, used to improve performance when using the Quick Filter.
includeHiddenColumnsInQuickFilter
boolean
default: false
Hidden columns are excluded from the Quick Filter by default. To include hidden columns, set to true.
quickFilterParser
Function
Changes how the Quick Filter splits the Quick Filter text into search terms.
quickFilterMatcher
Function
Changes the matching logic for whether a row passes the Quick Filter.
applyQuickFilterBeforePivotOrAgg
boolean
default: false
When pivoting, Quick Filter is only applied on the pivoted data (or aggregated data if groupAggFiltering = true). Set to true to apply Quick Filter before pivoting (/aggregating) instead.
isExternalFilterPresent
Function
Grid calls this method to know if an external filter is present.
doesExternalFilterPass
Function
Should return true if external filter passes, otherwise false.
excludeChildrenWhenTreeDataFiltering
boolean
default: false
Set to true to override the default tree data filtering behaviour to instead exclude child nodes from filter results.
suppressSetFilterByDefault
boolean
default: false
When using AG Grid Enterprise, the Set Filter is used by default when filter: true is set on column definitions. Set to true to prevent this and instead use the Text Filter, Number Filter or Date Filter based on the cell data type, the same as when using AG Grid Community.
enableAdvancedFilter
boolean
default: false
Set to true to enable the Advanced Filter.
includeHiddenColumnsInAdvancedFilter
boolean
default: false
Hidden columns are excluded from the Advanced Filter by default. To include hidden columns, set to true.
advancedFilterParent
DOM element to use as the parent for the Advanced Filter to allow it to appear outside of the grid. Set to null or undefined to appear inside the grid.
advancedFilterBuilderParams
IAdvancedFilterBuilderParams
Customise the parameters passed to the Advanced Filter Builder.

Integrated Charts

See Integrated Charts for more information.

enableCharts
boolean
default: false
Set to true to Enable Charts.
getChartToolbarItems
Function
Callback to be used to customise the chart toolbar items.
createChartContainer
Function
Callback to enable displaying the chart in an alternative chart container.
chartThemes
string[]
default: ['ag-default', 'ag-material', 'ag-sheets', 'ag-polychroma', 'ag-vivid'];
The list of chart themes that a user can choose from in the chart panel.
customChartThemes
{ [name: string]: AgChartTheme }
A map containing custom chart themes.
chartThemeOverrides
Chart theme overrides applied to all themes.
chartToolPanelsDef
ChartToolPanelsDef
Allows customisation of the Chart Tool Panels, such as changing the tool panels visibility and order, as well as choosing which charts should be displayed in the chart panel.
chartMenuItems
(string | MenuItemDef)[] | GetChartMenuItems
Get chart menu items. Only applies when using AG Charts Enterprise.

Keyboard Navigation

See Keyboard Navigation for more information.

focusGridInnerElement
Function
Allows overriding the element that will be focused when the grid receives focus from outside elements (tabbing into the grid).
navigateToNextHeader
Function
Allows overriding the default behaviour for when user hits navigation (arrow) key when a header is focused. Return the next Header position to navigate to or null to stay on current header.
tabToNextHeader
Function
Allows overriding the default behaviour for when user hits Tab key when a header is focused. Return the next header position to navigate to, true to stay on the current header, or false to let the browser handle the tab behaviour. As of v31.3, returning null is deprecated.
navigateToNextCell
Function
Allows overriding the default behaviour for when user hits navigation (arrow) key when a cell is focused. Return the next Cell position to navigate to or null to stay on current cell.
tabToNextCell
Function
Allows overriding the default behaviour for when user hits Tab key when a cell is focused. Return the next cell position to navigate to, true to stay on the current cell, or false to let the browser handle the tab behaviour. As of v31.3, returning null is deprecated.

Loading Cell Renderers

See loadingCellRenderer for more information.

loadingCellRenderer
any
Provide your own loading cell renderer to use when data is loading via a DataSource.
loadingCellRendererParams
any
Params to be passed to the loadingCellRenderer component.
loadingCellRendererSelector
LoadingCellRendererSelectorFunc
Callback to select which loading cell renderer to be used when data is loading via a DataSource.

Localisation

See Localisation for more information.

localeText
{ [key: string]: string }
A map of key->value pairs for localising text within the grid.
getLocaleText
Function
A callback for localising text within the grid.

Master Detail

See Master Detail for more information.

masterDetail
boolean
default: false
Set to true to enable Master Detail.
isRowMaster
IsRowMaster
Callback to be used with Master Detail to determine if a row should be a master row. If false is returned no detail row will exist for this row.
detailCellRenderer
any
Provide a custom detailCellRenderer to use when a master row is expanded.
detailCellRendererParams
any
Specifies the params to be used by the Detail Cell Renderer. Can also be a function that provides the params to enable dynamic definitions of the params.
detailRowHeight
number
Set fixed height in pixels for each detail row.
detailRowAutoHeight
boolean
Set to true to have the detail grid dynamically change it's height to fit it's rows.
embedFullWidthRows
boolean
Set to true to have the Full Width Rows embedded in grid's main container so they can be scrolled horizontally.
keepDetailRows
boolean
default: false
Set to true to keep detail rows for when they are displayed again.
keepDetailRowsCount
number
default: 10
Sets the number of details rows to keep.

Miscellaneous

initialState
GridState
Initial state for the grid. Only read once on initialization. Can be used in conjunction with api.getState() to save and restore grid state.
alignedGrids
AlignedGrid[] | (() => AlignedGrid[])
A list of grids to treat as Aligned Grids. Provide a list if the grids / apis already exist or return via a callback to allow the aligned grids to be retrieved asynchronously. If grids are aligned then the columns and horizontal scrolling will be kept in sync.
context
Provides a context object that is provided to different callbacks the grid uses. Used for passing additional information to the callbacks used by your application.
tabIndex
number
default: 0
Change this value to set the tabIndex order of the Grid within your application.
rowBuffer
number
default: 10
The number of rows rendered outside the viewable area the grid renders. Having a buffer means the grid will have rows ready to show as the user slowly scrolls vertically.
valueCache
boolean
default: false
Set to true to turn on the value cache.
valueCacheNeverExpires
boolean
default: false
Set to true to configure the value cache to not expire after data updates.
enableCellExpressions
boolean
default: false
Set to true to allow cell expressions.
getDocument
Function
Allows overriding what document is used. Currently used by Drag and Drop (may extend to other places in the future). Use this when you want the grid to use a different document than the one available on the global scope. This can happen if docking out components (something which Electron supports)
suppressTouch
boolean
default: false
Disables touch support (but does not remove the browser's efforts to simulate mouse events on touch).
dragAndDropImageComponent
Provide a custom drag and drop image component.
noRowsOverlayComponentParams
any
Customise the parameters provided to the no-rows overlay component.
suppressFocusAfterRefresh
boolean
default: false
Set to true to not set focus back on the grid after a refresh. This can avoid issues where you want to keep the focus on another part of the browser.
suppressPropertyNamesCheck
boolean
default: false
Disables showing a warning message in the console if using a gridOptions or colDef property that doesn't exist.
suppressChangeDetection
boolean
default: false
Disables change detection.
debug
boolean
default: false
Set this to true to enable debug information from the grid and related components. Will result in additional logging being output, but very useful when investigating problems.

Overlays

See Overlays for more information.

loading
boolean
Show or hide the loading overlay.
overlayLoadingTemplate
string
Provide a HTML string to override the default loading overlay. Supports non-empty plain text or HTML with a single root element.
loadingOverlayComponent
Provide a custom loading overlay component.
loadingOverlayComponentParams
any
Customise the parameters provided to the loading overlay component.
suppressNoRowsOverlay
boolean
default: false
Set to true to prevent the no-rows overlay being shown when there is no row data.
overlayNoRowsTemplate
string
Provide a HTML string to override the default no-rows overlay. Supports non-empty plain text or HTML with a single root element.
noRowsOverlayComponent
Provide a custom no rows overlay component.
noRowsOverlayComponentParams
any
Customise the parameters provided to the no-rows overlay component.

Pagination

See Row Pagination for more information.

pagination
boolean
default: false
Set whether pagination is enabled.
paginationPageSize
number
default: 100
How many rows to load per page. If paginationAutoPageSize is specified, this property is ignored.
paginationPageSizeSelector
number[] | boolean
default: true
Determines if the page size selector is shown in the pagination panel or not. Set to an array of values to show the page size selector with custom list of possible page sizes. Set to true to show the page size selector with the default page sizes [20, 50, 100]. Set to false to hide the page size selector.
paginationNumberFormatter
Function
Allows user to format the numbers in the pagination panel, i.e. 'row count' and 'page number' labels. This is for pagination panel only, to format numbers inside the grid's cells (i.e. your data), then use valueFormatter in the column definitions.
paginationAutoPageSize
boolean
default: false
Set to true so that the number of rows to load per page is automatically adjusted by the grid so each page shows enough rows to just fill the area designated for the grid. If false, paginationPageSize is used.
paginateChildRows
boolean
default: false
Set to true to have pages split children of groups when using Row Grouping or detail rows with Master Detail.
suppressPaginationPanel
boolean
default: false
If true, the default grid controls for navigation are hidden. This is useful if pagination=true and you want to provide your own pagination controls. Otherwise, when pagination=true the grid automatically shows the necessary controls at the bottom so that the user can navigate through the different pages.

Pivot and Aggregation

See Pivot and Aggregation for more information

pivotMode
boolean
default: false
Set to true to enable pivot mode.
pivotPanelShow
'always' | 'onlyWhenPivoting' | 'never'
default: 'never'
When to show the 'pivot panel' (where you drag rows to pivot) at the top. Note that the pivot panel will never show if pivotMode is off.
pivotDefaultExpanded
number
default: 0
If pivoting, set to the number of column group levels to expand by default, e.g. 0 for none, 1 for first level only, etc. Set to -1 to expand everything.
pivotRowTotals
'before' | 'after'
When set and the grid is in pivot mode, automatically calculated totals will appear for each value column in the position specified.
pivotSuppressAutoColumn
boolean
default: false
If true, the grid will not swap in the grouping column when pivoting. Useful if pivoting using Server Side Row Model or Viewport Row Model and you want full control of all columns including the group column.
pivotMaxGeneratedColumns
number
default: -1
The maximum number of generated columns before the grid halts execution. Upon reaching this number, the grid halts generation of columns and triggers a pivotMaxColumnsExceeded event. -1 for no limit.
processPivotResultColDef
Function
Callback for the mutation of the generated pivot result column definitions
processPivotResultColGroupDef
Function
Callback for the mutation of the generated pivot result column group definitions
suppressExpandablePivotGroups
boolean
default: false
When enabled, pivot column groups will appear 'fixed', without the ability to expand and collapse the column groups.
functionsReadOnly
boolean
default: false
If true, then row group, pivot and value aggregation will be read-only from the GUI. The grid will display what values are used for each, but will not allow the user to change the selection.
aggFuncs
{ [key: string]: IAggFunc }
A map of 'function name' to 'function' for custom aggregation functions.
getGroupRowAgg
Function
Callback to use when you need access to more then the current column for aggregation.
suppressAggFuncInHeader
boolean
default: false
When true, column headers won't include the aggFunc name, e.g. 'sum(Bank Balance)' will just be 'Bank Balance'.
alwaysAggregateAtRootLevel
boolean
default: false
When using aggregations, the grid will always calculate the root level aggregation value.
aggregateOnlyChangedColumns
boolean
default: false
When using change detection, only the updated column will be re-aggregated.
suppressAggFilteredOnly
boolean
default: false
Set to true so that aggregations are not impacted by filtering.
groupAggFiltering
boolean | IsRowFilterable
default: false
Set to determine whether filters should be applied on aggregated group values.
removePivotHeaderRowWhenSingleValueColumn
boolean
default: false
Set to true to omit the value Column header when there is only a single value column.

Rendering

animateRows
boolean
default: true
Set to false to disable Row Animation which is enabled by default.
cellFlashDuration
number
default: 500
Sets the duration in milliseconds of how long a cell should remain in its "flashed" state. If 0, the cell will not flash.
cellFadeDuration
number
default: 1000
Sets the duration in milliseconds of how long the "flashed" state animation takes to fade away after the timer set by cellFlashDuration has completed.
allowShowChangeAfterFilter
boolean
default: false
Set to true to have cells flash after data changes even when the change is due to filtering.
domLayout
DomLayoutType
default: 'normal'
Switch between layout options. See Printing and Auto Height. Default: normal
ensureDomOrder
boolean
default: false
When true, the order of rows and columns in the DOM are consistent with what is on screen. Disables row animations.
getBusinessKeyForNode
Function
Return a business key for the node. If implemented, each row in the DOM will have an attribute row-business-key='abc' where abc is what you return as the business key. This is useful for automated testing, as it provides a way for your tool to identify rows based on unique business keys.
gridId
string
Provide a custom gridId for this instance of the grid. Value will be set on the root DOM node using the attribute grid-id as well as being accessible via the gridApi.getGridId() method.
processRowPostCreate
Function
Callback fired after the row is rendered into the DOM. Should not be used to initiate side effects.
enableRtl
boolean
default: false
Set to true to operate the grid in RTL (Right to Left) mode.
suppressColumnVirtualisation
boolean
default: false
Set to true so that the grid doesn't virtualise the columns. For example, if you have 100 columns, but only 10 visible due to scrolling, all 100 will always be rendered.
suppressRowVirtualisation
boolean
default: false
Set to true so that the grid doesn't virtualise the rows. For example, if you have 100 rows, but only 10 visible due to scrolling, all 100 will always be rendered.
suppressMaxRenderedRowRestriction
boolean
default: false
By default the grid has a limit of rendering a maximum of 500 rows at once (remember the grid only renders rows you can see, so unless your display shows more than 500 rows without vertically scrolling this will never be an issue).
This is only relevant if you are manually setting rowBuffer to a high value (rendering more rows than can be seen), or suppressRowVirtualisation is true, or if your grid height is able to display more than 500 rows at once.

Row Drag and Drop

See Row Dragging for more information.

rowDragManaged
boolean
default: false
Set to true to enable Managed Row Dragging.
rowDragEntireRow
boolean
default: false
Set to true to enable clicking and dragging anywhere on the row without the need for a drag handle.
rowDragMultiRow
boolean
default: false
Set to true to enable dragging multiple rows at the same time.
suppressRowDrag
boolean
default: false
Set to true to suppress row dragging.
suppressMoveWhenRowDragging
boolean
default: false
Set to true to suppress moving rows while dragging the rowDrag waffle. This option highlights the position where the row will be placed and it will only move the row on mouse up.
rowDragText
Function
A callback that should return a string to be displayed by the rowDragComp while dragging a row. If this callback is not set, the current cell value will be used. If the rowDragText callback is set in the ColDef it will take precedence over this, except when rowDragEntireRow=true.

Row Full Width

See Full Width Rows for more information.

fullWidthCellRenderer
any
Provide your own cell renderer component to use for full width rows.
fullWidthCellRendererParams
any
Customise the parameters provided to the fullWidthCellRenderer component.

Row Grouping

See Row Grouping for more information.

groupDisplayType
RowGroupingDisplayType
Specifies how the results of row grouping should be displayed. The options are:
  • 'singleColumn': single group column automatically added by the grid.
  • 'multipleColumns': a group column per row group is added automatically.
  • 'groupRows': group rows are automatically added instead of group columns.
  • 'custom': informs the grid that group columns will be provided.
  • groupDefaultExpanded
    number
    default: 0
    If grouping, set to the number of levels to expand by default, e.g. 0 for none, 1 for first level only, etc. Set to -1 to expand everything.
    autoGroupColumnDef
    Allows specifying the group 'auto column' if you are not happy with the default. If grouping, this column definition is included as the first column in the grid. If not grouping, this column is not included.
    groupMaintainOrder
    boolean
    default: false
    When true, preserves the current group order when sorting on non-group columns.
    groupLockGroupColumns
    number
    default: 0
    If grouping, locks the group settings of a number of columns, e.g. 0 for no group locking. 1 for first group column locked, -1 for all group columns locked.
    groupTotalRow
    'top' | 'bottom' | UseGroupTotalRow
    When provided, an extra row group total row will be inserted into row groups at the specified position, to display when the group is expanded. This row will contain the aggregate values for the group. If a callback function is provided, it can be used to selectively determine which groups will have a total row added.
    grandTotalRow
    'top' | 'bottom'
    When provided, an extra grand total row will be inserted into the grid at the specified position. This row displays the aggregate totals of all rows in the grid.
    suppressStickyTotalRow
    boolean | 'grand' | 'group'
    Suppress the sticky behaviour of the total rows, can be suppressed individually by passing 'grand' or 'group'.
    groupSuppressBlankHeader
    boolean
    default: false
    If true, and showing footer, aggregate data will always be displayed at both the header and footer levels. This stops the possibly undesirable behaviour of the header details 'jumping' to the footer on expand.
    showOpenedGroup
    boolean
    default: false
    Shows the open group in the group column for non-group rows.
    isGroupOpenByDefault
    Function
    (Client-side Row Model only) Allows groups to be open by default.
    initialGroupOrderComparator
    Function
    Allows default sorting of groups.
    groupRemoveSingleChildren
    boolean
    default: false
    Set to true to collapse groups that only have one child.
    groupRemoveLowestSingleChildren
    boolean
    default: false
    Set to true to collapse lowest level groups that only have one child.
    groupHideOpenParents
    boolean
    default: false
    Set to true to hide parents that are open. When used with multiple columns for showing groups, it can give a more pleasing user experience.
    groupAllowUnbalanced
    boolean
    default: false
    Set to true to prevent the grid from creating a '(Blanks)' group for nodes which do not belong to a group, and display the unbalanced nodes alongside group nodes.
    rowGroupPanelShow
    'always' | 'onlyWhenGrouping' | 'never'
    default: 'never'
    When to show the 'row group panel' (where you drag rows to group) at the top.
    rowGroupPanelSuppressSort
    boolean
    default: false
    Set to true to suppress sort indicators and actions from the row group panel.
    groupRowRenderer
    any
    Provide the Cell Renderer to use when groupDisplayType = 'groupRows'.
    groupRowRendererParams
    any
    Customise the parameters provided to the groupRowRenderer component.
    suppressDragLeaveHidesColumns
    boolean
    default: false
    By default, dragging a column out of the grid, i.e. to the Row Group Panel, it will be hidden in the grid. This property prevents the column becoming hidden in the grid. Default: false
    suppressGroupRowsSticky
    boolean
    default: false
    Set to true prevent Group Rows from sticking to the top of the grid.
    suppressRowGroupHidesColumns
    boolean
    default: false
    If true, when you drag a column into a row group panel the column is not hidden.
    suppressMakeColumnVisibleAfterUnGroup
    boolean
    default: false
    By default, when a column is un-grouped, i.e. using the Row Group Panel, it is made visible in the grid. This property stops the column becoming visible again when un-grouping. Default: false
    treeData
    boolean
    default: false
    Set to true to enable the Grid to work with Tree Data. You must also implement the getDataPath(data) callback.
    getDataPath
    GetDataPath
    Callback to be used when working with Tree Data when treeData = true.

    Row Pinning

    Row data uses the generic type TData if provided via GridOptions<TData>. Otherwise TData will default to any.

    See Row Pinning for more information.

    pinnedTopRowData
    any[]
    Data to be displayed as pinned top rows in the grid.
    pinnedBottomRowData
    any[]
    Data to be displayed as pinned bottom rows in the grid.

    RowModel

    See Row Model for more information.

    rowModelType
    RowModelType
    default: 'clientSide'
    Sets the row model type.
    getRowId
    GetRowIdFunc
    Provide a pure function that returns a string ID to uniquely identify a given row. This enables the grid to work optimally with data changes and updates.

    RowModel: Client-Side

    Row data uses the generic type TData if provided via GridOptions<TData>. Otherwise TData will default to any.

    rowData
    TData[] | null
    Set the data to be displayed as rows in the grid.
    resetRowDataOnUpdate
    boolean
    default: false
    When enabled, getRowId() callback is implemented and new Row Data is set, the grid will disregard all previous rows and treat the new Row Data as new data. As a consequence, all Row State (eg selection, rendered rows) will be reset.
    asyncTransactionWaitMillis
    number
    How many milliseconds to wait before executing a batch of async transactions.
    suppressModelUpdateAfterUpdateTransaction
    boolean
    default: false
    Prevents Transactions changing sort, filter, group or pivot state when transaction only contains updates. Default: false

    RowModel: Infinite

    See Infinite Row Model for more information.

    datasource
    Provide the datasource for infinite scrolling.
    cacheOverflowSize
    number
    default: 1
    How many extra blank rows to display to the user at the end of the dataset, which sets the vertical scroll and then allows the grid to request viewing more rows of data.
    maxConcurrentDatasourceRequests
    number
    default: 2
    How many requests to hit the server with concurrently. If the max is reached, requests are queued. Set to -1 for no maximum restriction on requests.
    cacheBlockSize
    number
    default: 100
    How many rows for each block in the store, i.e. how many rows returned from the server at a time.
    maxBlocksInCache
    number
    How many blocks to keep in the store. Default is no limit, so every requested block is kept. Use this if you have memory concerns, and blocks that were least recently viewed will be purged when the limit is hit. The grid will additionally make sure it has all the blocks needed to display what is currently visible, in case this property is set to a low value.
    infiniteInitialRowCount
    number
    default: 1
    How many extra blank rows to display to the user at the end of the dataset, which sets the vertical scroll and then allows the grid to request viewing more rows of data.

    RowModel: Server-Side

    See Server-Side Row Model for more information.

    serverSideDatasource
    Provide the serverSideDatasource for server side row model.
    cacheBlockSize
    number
    default: 100
    How many rows for each block in the cache, i.e. how many rows returned from the server at a time. Default: 100
    maxBlocksInCache
    number
    How many blocks to keep in the cache. Default is no limit, so every requested block is kept. Use this if you have memory concerns, and blocks that were least recently viewed will be purged when the limit is hit. The grid will additionally make sure it has all the blocks needed to display what is currently visible, in case this property is set to a low value.
    maxConcurrentDatasourceRequests
    number
    default: 2
    How many requests to hit the server with concurrently. If the max is reached, requests are queued. Set to -1 for no maximum restriction on requests.
    blockLoadDebounceMillis
    number
    How many milliseconds to wait before loading a block. Useful when scrolling over many blocks, as it prevents blocks loading until scrolling has settled.
    suppressServerSideFullWidthLoadingRow
    boolean
    When true, the Server-side Row Model will not use a full width loading renderer, instead using the colDef loadingCellRenderer if present.
    purgeClosedRowNodes
    boolean
    default: false
    When enabled, closing group rows will remove children of that row. Next time the row is opened, child rows will be read from the datasource again. This property only applies when there is Row Grouping. Default: false
    serverSidePivotResultFieldSeparator
    string
    default: '_'
    Used to split pivot field strings for generating pivot result columns when pivotResultFields is provided as part of a getRows success.
    serverSideSortAllLevels
    boolean
    default: false
    When enabled, always refreshes top level groups regardless of which column was sorted. This property only applies when there is Row Grouping & sorting is handled on the server.
    serverSideEnableClientSideSort
    boolean
    default: false
    When enabled, sorts fully loaded groups in the browser instead of requesting from the server.
    serverSideOnlyRefreshFilteredGroups
    boolean
    default: false
    When enabled, only refresh groups directly impacted by a filter. This property only applies when there is Row Grouping & filtering is handled on the server.
    serverSideInitialRowCount
    number
    default: 1
    Set how many loading rows to display to the user for the root level group.
    getChildCount
    Function
    Allows setting the child count for a group row.
    getServerSideGroupLevelParams
    Function
    Allows providing different params for different levels of grouping.
    isServerSideGroupOpenByDefault
    Function
    Allows groups to be open by default.
    isApplyServerSideTransaction
    Function
    Allows cancelling transactions.
    isServerSideGroup
    Function
    SSRM Tree Data: Allows specifying which rows are expandable.
    getServerSideGroupKey
    Function
    SSRM Tree Data: Allows specifying group keys.

    RowModel: Viewport

    See Viewport Row Model for more information.

    viewportDatasource
    To use the viewport row model you need to provide the grid with a viewportDatasource.
    viewportRowModelPageSize
    number
    When using viewport row model, sets the page size for the viewport.
    viewportRowModelBufferSize
    number
    When using viewport row model, sets the buffer size for the viewport.

    Scrolling

    alwaysShowHorizontalScroll
    boolean
    default: false
    Set to true to always show the horizontal scrollbar. Windows and Mac OS both have settings to control scrollbar visibility. Depending on your browser, you may need to adjust the scrollbar settings in your OS to have this property take effect.
    alwaysShowVerticalScroll
    boolean
    default: false
    Set to true to always show the vertical scrollbar. Windows and Mac OS both have settings to control scrollbar visibility. Depending on your browser, you may need to adjust the scrollbar settings in your OS to have this property take effect.
    debounceVerticalScrollbar
    boolean
    default: false
    Set to true to debounce the vertical scrollbar. Can provide smoother scrolling on slow machines.
    suppressHorizontalScroll
    boolean
    default: false
    Set to true to never show the horizontal scroll. This is useful if the grid is aligned with another grid and will scroll when the other grid scrolls. (Should not be used in combination with alwaysShowHorizontalScroll.)
    suppressScrollOnNewData
    boolean
    default: false
    When true, the grid will not scroll to the top when new row data is provided. Use this if you don't want the default behaviour of scrolling to the top every time you load new data.
    suppressScrollWhenPopupsAreOpen
    boolean
    default: false
    When true, the grid will not allow mousewheel / touchpad scroll when popup elements are present.
    suppressAnimationFrame
    boolean
    default: false
    When true, the grid will not use animation frames when drawing rows while scrolling. Use this if the grid is working fast enough that you don't need animation frames and you don't want the grid to flicker.
    suppressMiddleClickScrolls
    boolean
    default: false
    If true, middle clicks will result in click events for cells and rows. Otherwise the browser will use middle click to scroll the grid.
    Note: Not all browsers fire click events with the middle button. Most will fire only mousedown and mouseup events, which can be used to focus a cell, but will not work to call the onCellClicked function.
    suppressPreventDefaultOnMouseWheel
    boolean
    default: false
    If true, mouse wheel events will be passed to the browser. Useful if your grid has no vertical scrolls and you want the mouse to scroll the browser page.
    scrollbarWidth
    number
    Tell the grid how wide in pixels the scrollbar is, which is used in grid width calculations. Set only if using non-standard browser-provided scrollbars, so the grid can use the non-standard size in its calculations.

    Selection

    selection
    SelectionOptions
    Selection options object representing the new selection API. If this value is set all other selection related grid options will be ignored.
    selectionColumnDef
    SelectionColumnDef
    Configure the selection column, used for displaying checkboxes. Note that due to the nature of this column, this type is a subset of ColDef, which does not support several normal column features such as editing, pivoting and grouping.
    suppressCellFocus
    boolean
    default: false
    If true, cells won't be focusable. This means keyboard navigation will be disabled for grid cells, but remain enabled in other elements of the grid such as column headers, floating filters, tool panels.
    suppressHeaderFocus
    boolean
    default: false
    If true, header cells won't be focusable. This means keyboard navigation will be disabled for grid header cells, but remain enabled in other elements of the grid such as grid cells and tool panels.
    enableCellTextSelection
    boolean
    default: false
    Set to true to be able to select the text within cells. Note: When this is set to true, the clipboard service is disabled and only selected text is copied.

    Sorting

    See Row Sorting for more information.

    sortingOrder
    SortDirection[]
    default: [null, 'asc', 'desc']
    Array defining the order in which sorting occurs (if sorting is enabled). Values can be 'asc', 'desc' or null. For example: sortingOrder: ['asc', 'desc'].
    accentedSort
    boolean
    default: false
    Set to true to specify that the sort should take accented characters into account. If this feature is turned on the sort will be slower.
    unSortIcon
    boolean
    default: false
    Set to true to show the 'no sort' icon.
    suppressMultiSort
    boolean
    default: false
    Set to true to suppress multi-sort when the user shift-clicks a column header.
    alwaysMultiSort
    boolean
    default: false
    Set to true to always multi-sort when the user clicks a column header, regardless of key presses.
    multiSortKey
    'ctrl'
    Set to 'ctrl' to have multi sorting work using the ^ Ctrl (or Command ⌘ for Mac) key.
    suppressMaintainUnsortedOrder
    boolean
    default: false
    Set to true to suppress sorting of un-sorted data to match original row data.
    postSortRows
    Function
    Callback to perform additional sorting after the grid has sorted the rows.
    deltaSort
    boolean
    default: false
    When enabled, sorts only the rows added/updated by a transaction.

    Styling

    icons
    { [key: string]: ((...args: any[]) => any) | string }
    Icons to use inside the grid instead of the grid's default icons.
    rowHeight
    number
    default: 25
    Default row height in pixels.
    getRowHeight
    Function
    Callback version of property rowHeight to set height for each row individually. Function should return a positive number of pixels, or return null/undefined to use the default row height.
    rowStyle
    RowStyle
    The style properties to apply to all rows. Set to an object of key (style names) and values (style values).
    getRowStyle
    Function
    Callback version of property rowStyle to set style for each row individually. Function should return an object of CSS values or undefined for no styles.
    rowClass
    string | string[]
    CSS class(es) for all rows. Provide either a string (class name) or array of strings (array of class names).
    getRowClass
    Function
    Callback version of property rowClass to set class(es) for each row individually. Function should return either a string (class name), array of strings (array of class names) or undefined for no class.
    rowClassRules
    RowClassRules
    Rules which can be applied to include certain CSS classes.
    suppressRowHoverHighlight
    boolean
    default: false
    Set to true to not highlight rows by adding the ag-row-hover CSS class.
    suppressRowTransform
    boolean
    default: false
    Uses CSS top instead of CSS transform for positioning rows. Useful if the transform function is causing issues such as used in row spanning. Default: false
    columnHoverHighlight
    boolean
    default: false
    Set to true to highlight columns by adding the ag-column-hover CSS class.

    Tooltips

    See Tooltip Component for more information.

    enableBrowserTooltips
    boolean
    default: false
    Set to true to use the browser's default tooltip instead of using the grid's Tooltip Component.
    tooltipShowDelay
    number
    default: 2000
    The delay in milliseconds that it takes for tooltips to show up once an element is hovered over. Note: This property does not work if enableBrowserTooltips is true.
    tooltipHideDelay
    number
    default: 10000
    The delay in milliseconds that it takes for tooltips to hide once they have been displayed. Note: This property does not work if enableBrowserTooltips is true and tooltipHideTriggers includes timeout.
    tooltipMouseTrack
    boolean
    default: false
    Set to true to have tooltips follow the cursor once they are displayed.
    tooltipShowMode
    'standard' | 'whenTruncated'
    default: `standard`
    This defines when tooltip will show up for Cells, Headers and SetFilter Items.
  • standard - The tooltip always shows up when the items configured with Tooltips are hovered.
  • whenTruncated - The tooltip will only be displayed when the items hovered have truncated (showing ellipsis) values. This property does not work when enableBrowserTooltips={true}.
  • tooltipTrigger
    'hover' | 'focus'
    default: 'hover'
    The trigger that will cause tooltips to show and hide.
  • hover - The tooltip will show/hide when a cell/header is hovered.
  • focus - The tooltip will show/hide when a cell/header is focused.
  • tooltipInteraction
    boolean
    default: false
    Set to true to enable tooltip interaction. When this option is enabled, the tooltip will not hide while the tooltip itself it being hovered or has focus.

    Grid Options

    All the above properties can also be specified on a single gridOptions object. If an option is set via gridOptions, as well as directly on the component, then the component value will take precedence. gridOptions is only read during initialisation, if you change it afterwards it will not impact the grid.