Grid Properties

All of these grid properties are available through the GridOptions interface.

Columns

columnDefsArray of Column Definitions.
defaultColDefA default column definition.
defaultColGroupDefA default column group definition. All column group definitions will use these properties. Items defined in the actual column group definition get precedence.
columnTypesAn object map of custom column types which contain groups of properties that column definitions can inherit.
colResizeDefaultSet to 'shift' to have shift-resize as the default resize operation (same as user holding down Shift while resizing).
suppressAutoSizeSuppresses auto-sizing columns for columns. In other words, double clicking a column's header's edge will not auto-size.
Default: false
autoSizePaddingNumber 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.
Default: 4
skipHeaderOnAutoSizeSet this to true to skip the headerName when autoSize is called by default. See Resizing Example.
Default: false
suppressColumnMoveAnimationIf 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
suppressMovableColumnsSet to true to suppress column moving, i.e. to make the columns fixed position.
Default: false
suppressFieldDotNotationIf 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.
Default: false
unSortIconSet to true to show the 'no sort' icon. See Example Custom Sorting.
Default: false
suppressMultiSortSet to true to suppress multi-sort when the user shift-clicks a column header.
Default: false
suppressMenuHideSet to true to always show the column menu button, rather than only showing when the mouse is over the column header.
Default: false
autoGroupColumnDefAllows specifying the group 'auto column' if you are not happy with the default. If grouping, this column def is included as the first column definition in the grid. If not grouping, this column is not included.
suppressSetColumnStateEventsSet to true to suppress column events being raised when columnApi.setColumnState(state) and columnApi.resetColumnState() are invoked.
Default: false
allowDragFromColumnsToolPanelAllow reordering and pinning columns by dragging columns from the columns tool panel to the grid.
Default: false
immutableColumnsPuts the grid into Immutable Column mode, so that setting new columns keeps column state.
Default: false

Sort and Filter

quickFilterTextRows are filtered using this text as a quick filter.
cacheQuickFilterSet to true to turn on the quick filter cache, used for a performance gain when using the quick filter.
Default: false
sortingOrderArray defining the order in which sorting occurs (if sorting is enabled). Values can be 'asc', 'desc' or null. For example: sortingOrder: ['asc', 'desc']. See Example Sorting Order and Animation.
accentedSortSet to true to specify that the sort should take into account accented characters. If this feature is turned on the sort will perform slower. See Accented Sort.
Default: false
multiSortKeySet to 'ctrl' to have multi sorting work using the Ctrl or Command (for Apple) keys. See Multi Column Sorting.
suppressMaintainUnsortedOrderSet to true to suppress sorting of un-sorted data to match original row data. See Big Data Small Transactions.
Default: false
excludeChildrenWhenTreeDataFilteringSet to true to override the default tree data filtering behaviour to instead exclude child nodes from filter results. See Tree Data Filtering.
Default: false

Selection

rowSelectionType of Row Selection.
Options: 'single', 'multiple'
rowMultiSelectWithClickSet to true to allow multiple rows to be selected using single click. See Multi Select Single Click.
Default: false
rowDeselectionIf true then rows will be deselected if you hold down Ctrl and click the row.
Default: false
suppressRowClickSelectionIf true, row selection won't happen when rows are clicked. Use when you want checkbox selection exclusively.
Default: false
suppressCellSelectionIf true, cells won't be selectable. This means cells will not get keyboard focus when you click on them.
Default: false
enableRangeSelectionSet to true to enable Range Selection.
Default: false

Row Dragging

rowDragManagedSet to true to enable Managed Row Dragging.
Default: false
suppressRowDragSet to true to suppress Row Dragging.
Default: false
suppressMoveWhenRowDraggingSet 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. See Row Dragging.
Default: false

Editing

singleClickEditSet to true to enable Single Click Editing for cells, to start editing with a single click.
Default: false
suppressClickEditSet to true so that neither single nor double click starts editing. See Single Click, Double Click, No Click Editing.
Default: false
editTypeSet to 'fullRow' to enable Full Row Editing. Otherwise leave blank to edit one cell at a time.
enableCellChangeFlashSet to true to have cells flash after data changes. See Flashing Data Changes.
Default: false
cellFlashDelayTo be used in combination with enableCellChangeFlash, this configuration will set delay in ms of how long a cell should remain in its "flashed state.
Default: 500
cellFadeDelayTo be used in combination with enableCellChangeFlash, this configuration will set delay in ms of how long the "flashed state animation takes to fade away after the timer set by cellFlashDelay has completed.
Default: 1000
allowShowChangeAfterFilterSet to true to have cells flash after data changes even when the change is due to filtering. See Flashing Data Changes.
Default: false
stopEditingWhenGridLosesFocusSet this to true to stop cell editing when grid loses focus. The default is the grid stays editing until focus goes onto another cell. For inline (non-popup) editors only.
Default: false
enterMovesDown
enterMovesDownAfterEdit
Set both properties to true to have Excel-style behaviour for the Enter key, i.e. enter key moves down.
Default: false

Headers

headerHeightThe height in pixels for the row containing the column label header. See Header Height.
Default: 25
groupHeaderHeightThe height for the rows containing header column groups. If not specified, it uses headerHeight. See Header Height.
floatingFiltersHeightThe height for the row containing the floating filters. See Header Height.
Default: 20
pivotHeaderHeightThe height for the row containing the columns when in pivot mode. If not specified, it uses headerHeight. See Header Height.
pivotGroupHeaderHeightThe height for the row containing header column groups when in pivot mode. If not specified, it uses groupHeaderHeight. See Header Height.

Row Grouping

groupUseEntireRowUsed when grouping. If true, a group row will span all columns across the entire width of the table. If false, the cells will be rendered as normal and you will have the opportunity to include a grouping column (normally the first on the left) to show the group. See Full Width Group Rows.
Default: false
groupDefaultExpandedIf 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. See Removing Single Children.
Default: 0
autoGroupColumnDefAllows specifying the group 'auto column' if you are not happy with the default. If grouping, this column def is included as the first column definition in the grid. If not grouping, this column is not included. See Configuring the Auto Group Column.
groupSuppressAutoColumnIf true, the grid will not swap in the grouping column when grouping is enabled. Use this if you want complete control on the column displayed and don't want the grid's help, in other words if you already have a column in your column definitions that is responsible for displaying the groups. See Configuring the Auto Group Column.
Default: false
groupMultiAutoColumnIf using auto column, set to true to have each group in its own separate column, e.g. if grouping by Country then Year, two auto columns will be created, one for Country and one for Year. See Multi Auto Column Group.
Default: false
groupSuppressRowIf true, the group row won't be displayed and the groups will be expanded by default with no ability to expand / contract the groups. Useful when you want to just 'group' the rows, but not add a parent group row to each group. See Suppress Group Row.
Default: false
groupSelectsChildrenWhen true, if you select a group, the children of the group will also be selected. See Group Selection.
Default: false
groupIncludeFooterIf grouping, whether to show a group footer when the group is expanded. If true, then by default, the footer will contain aggregate data (if any) when shown and the header will be blank. When closed, the header will contain the aggregate data regardless of this setting (as the footer is hidden anyway). This is handy for 'total' rows, that are displayed below the data when the group is open, and alongside the group when it is closed See Grouping Footers.
Default: false
groupIncludeTotalFooterSet to true to show a 'grand' total group footer across all groups. See Grouping Footers.
Default: false
groupSuppressBlankHeaderIf true, and showing footer, aggregate data will be displayed at both the header and footer levels always. This stops the possibly undesirable behaviour of the header details 'jumping' to the footer on expand.
Default: false
groupSelectsFilteredIf using groupSelectsChildren, then only the children that pass the current filter will get selected. See Group Selection.
Default: false
groupRemoveSingleChildrenSet to true to collapse groups that only have one child. See Remove Single Children.
Default: false
groupRemoveLowestSingleChildrenSet to true to collapse lowest level groups that only have one child. See Remove Single Children.
Default: false
groupHideOpenParentsSet to true to hide parents that are open. When used with multiple columns for showing groups, it can give a more pleasing user experience. See Group Hide Open Parents.
Default: false
rowGroupPanelShowWhen to show the 'row group panel' (where you drag rows to group) at the top. See Column Tool Panel Example.
Default: 'never'
Options: 'never', 'always', 'onlyWhenGrouping'

Row Pivoting

pivotModeSet to true to enable pivot mode. See Pivoting.
Default: false
pivotPanelShowWhen 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.
Default: 'never'
Options: 'never', 'always', 'onlyWhenPivoting'
rememberGroupStateWhenNewDataWhen true, if you set new data into the grid and have groups open, the grid will keep groups open if they exist in the new dataset. See Keeping Group State.
Default: false
suppressAggFuncInHeaderWhen true, column headers won't include the aggFunc, e.g. 'sum(Bank Balance)' will just be 'Bank Balance'.
Default: false
suppressAggAtRootLevelWhen true, the aggregations won't be computed for root node of the grid. See Big Data Small Transactions.
Default: false
aggregateOnlyChangedColumnsWhen using change detection, only the updated column with get re-aggregated.
Default: false
functionsReadOnlyIf 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. See Read Only Functions.
Default: false
aggFuncsA map of 'function name' to 'function' for custom aggregation functions. See Custom Aggregation Functions.
suppressMakeVisibleAfterUnGroupBy default, when a column is un-grouped it is made visible. e.g. on main demo: 1) group by country by dragging (action of moving column out of grid means column is made visible=false); then 2) un-group by clicking 'x' on the country column in the column drop zone; the column is then made visible=true. This property stops the column becoming visible again when un-grouping.
Default: false
pivotColumnGroupTotalsWhen set and the grid is in pivot mode, automatically calculated totals will appear within the Pivot Column Groups,in the position specified. See Pivot Column Group Totals.
Options: 'before', 'after'
pivotRowTotalsWhen set and the grid is in pivot mode, automatically calculated totals will appear for each value column in the position specified. See Pivot Row Totals.
Options: 'before', 'after'
pivotSuppressAutoColumnIf 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.
Default: false

Data and Row Models

rowModelTypeSets the Row Model type.
Default: 'clientSide'
Options: 'clientSide', 'infinite', 'viewport', 'serverSide'
rowData(Client-Side Row Model only) Set the data to be displayed as rows in the grid.
immutableData(Client-Side Row Model only) Enables Immutable Data mode, for compatibility with immutable stores.
pinnedTopRowDataData to be displayed as Pinned Top Rows in the grid.
pinnedBottomRowDataData to be displayed as Pinned Bottom Rows in the grid.

Row Model: Server-Side

cacheBlockSizeHow many rows for each block in the cache, i.e. how many rows returned from the server at a time.
Default: 100
maxBlocksInCacheHow many blocks to cache in the client. Default is no limit, so every requested block is kept. Use this if you have memory concerns, and block 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 low.
cacheOverflowSizeWhen infinite scrolling is active, this says how many rows beyond the current last row the scrolls should allow to scroll. For example, if 200 rows already loaded from server, and cacheOverflowSize is 50, the scroll will allow scrolling to row 250.
Default: 1
maxConcurrentDatasourceRequestsHow many requests to hit the server with concurrently. If the max is reached, requests are queued.
Default: 1
blockLoadDebounceMillisPrevents blocks loading until scrolling has stopped for the specified number of milliseconds. When row count (i.e. lastRowIndex) is known, setting this property will enable skipping over blocks when scrolling.
infiniteInitialRowCountHow many rows to initially allow the user to scroll to. This is handy if you expect large data sizes and you want the scrollbar to cover many blocks before it has to start re-adjusting for the loading of additional data.
purgeClosedRowNodesWhen enabled, closing group row nodes will purges all caches beneath closed row nodes. This property only applies when there is Row Grouping.
serverSideSortingAlwaysResetsWhen enabled, always refreshes top level groups regardless of which column was sorted. This property only applies when there is Row Grouping.

Row Model: Viewport

viewportRowModelPageSizeWhen using viewport row model, sets the pages size for the viewport.
viewportRowModelBufferSizeWhen using viewport row model, sets the buffer size for the viewport.
viewportDatasourceTo use the viewport row model you provide the grid with a viewportDatasource. See Viewport.

Scrolling

alwaysShowVerticalScrollSet to true to always show the vertical scrollbar.
Default: false
suppressHorizontalScrollSet 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. See Aligned Grid as Footer.
Default: false
suppressColumnVirtualisationSet 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.
Default: false
suppressRowVirtualisationThere is no such property as suppressRowVirtualisation - if you want to do this, then set the rowBuffer property to be very large, e.g. 9999. Warning: lots of rendered rows will mean a very large amount of rendering in the DOM which will slow things down.
suppressMaxRenderedRowRestrictionBy 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 if your grid height is able to display more than 500 rows at once.
Default: false
suppressScrollOnNewDataWhen 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.
Default: false
suppressAnimationFrameWhen 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.
Default: false

Pagination

paginationSet whether Pagination is enabled.
Default: false
paginationPageSizeHow many rows to load per page. If paginationAutoPageSize is specified, this property is ignored. See Customising Pagination.
Default: 100
paginationAutoPageSizeSet to true so that the number of rows to load per page is automatically adjusted by ag-Grid so each page shows enough rows to just fill the area designated for the grid. If false, paginationPageSize is used. See Auto Page Size.
Default: false
suppressPaginationPanelIf true, the default ag-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. See Custom Pagination Controls.
Default: false
paginateChildRowsSet to true to have pages split children of groups when using Row Grouping or detail rows with Master Detail. See Pagination & Child Rows.

Full Width Renderers

groupRowRenderer
groupRowRendererFramework
groupRowRendererParams
Sets the Cell Renderer to use when groupUseEntireRow=true. See Row Grouping.
groupRowInnerRenderer
groupRowInnerRendererFramework
Sets the inner Cell Renderer to use when groupUseEntireRow=true. See Row Grouping.
fullWidthCellRenderer
fullWidthCellRendererFramework
fullWidthCellRendererParams
Sets the Cell Renderer to use for Full Width Rows.

Master Detail

masterDetailUsed to enable Master Detail. See Enabling Master Detail.
Default: false
detailCellRendererParamsSpecifies the params to be used by the default detail Cell Renderer. See DetailDetail Grids.
keepDetailRowsSet to true to keep detail rows for when they are displayed again.
Default: false
keepDetailRowsCountSets the number of details rows to keep.
Default: 10
detailRowHeightSet fixed height for each detail row.
autoHeightSet to true to have the detail grid to dynamically change it's height to fit it's rows.
Default: false

Rendering and Styling

iconsIcons to use inside the grid instead of the grid's default icons.
rowHeightDefault Row Height in pixels.
Default: 25
animateRowsSet to true to enable Row Animation.
Default: false
rowStyleThe style to give a particular row. See Row Style.
rowClassThe class to give a particular row. See Row Class.
rowClassRulesRules which can be applied to include certain CSS classes. See Row Class Rules.
excelStylesThe list of Excel styles to be used when exporting to Excel
scrollbarWidthTell the grid how wide 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.
suppressRowHoverHighlightSet to true to not highlight rows by adding the ag-row-hover CSS class.
Default: false

Clipboard

suppressCopyRowsToClipboardSet to true to only have the range selection, and not row selection, copied to clipboard.
Default: false
copyHeadersToClipboardSet to true to also include headers when copying to clipboard using Ctrl + C clipboard.
Default: false
clipboardDeliminatorSpecify the deliminator to use when copying to clipboard.
suppressFocusAfterRefreshSet 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.
Default: false
suppressLastEmptyLineOnPasteSet 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.
Default: false
enableCellTextSelectionSet to true to be able to select the text within cells.
Note: When this is set to true, the clipboard service is disabled.
Default: false

Localisation

localeText
localeTextFunc
You can change the text in the paging panels and the default filters by providing a localeText or a localeTextFunc. See Localisation.

Overlays

suppressLoadingOverlayDisables the 'loading' overlay.
Default: false
suppressNoRowsOverlayDisables the 'no rows' overlay.
Default: false
overlayLoadingTemplateProvide a template for 'loading' overlay.
overlayNoRowsTemplateProvide a template for 'no rows' overlay.
loadingOverlayComponent
loadingOverlayComponentFramework
Provide a custom loading overlay component.
noRowsOverlayComponent
noRowsOverlayComponentFramework
Provide a custom no rows overlay component.

Charts

enableChartsSet to true to Enable Charts.
Default: false

Components

See Components for more information.

componentsA map of component names to plain JavaScript components.
frameworkComponentsA map of component names to framework (React, Angular etc) components.

Miscellaneous

popupParentDOM element to use as popup parent for grid popups (context menu, column menu etc).
valueCacheSet to true to turn on the value cache.
Default: false
valueCacheNeverExpiresSet to true to set value cache to not expire after data updates.
Default: false
defaultExportParamsA default configuration object used to export to CSV or Excel.
suppressMiddleClickScrollsIf true, then middle clicks will result in click events for cell and row. 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.
Default: false
suppressPreventDefaultOnMouseWheelIf 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.
Default: false
enableBrowserTooltipsSet to true to use the browser's default tooltip instead of using ag-Grid's Tooltip Component.
Default: false
tooltipShowDelayThe delay in milliseconds that it takes for tooltips to show up once an element is hovered.
Note: This property does not work if enableBrowserTooltips is true.
Default: 2000
tooltipMouseTrackSet to true to have tooltips follow the cursor once they are displayed.
Default: false
enableCellExpressionsSet to true to allow cell expressions.
Default: false
domLayoutSwitch between layout options. See Printing and Auto Height.
Default: 'normal'
Options: 'normal', 'autoHeight', 'print'
ensureDomOrderWhen true, the order of rows and columns in the DOM are consistent with what is on screen. See Accessibility - Row and Column Order.
Default: false
rowBufferThe number of rows rendered outside the scrollable viewable area the grid renders. Having a buffer means the grid will have rows ready to show as the user slowly scrolls vertically.
Default: 20
alignedGridsA list of grids to treat as Aligned Grids. If grids are aligned then the columns and horizontal scrolling will be kept in sync.
suppressParentsInRowNodesIf true, rowNodes don't get their parents set. The grid doesn't use the parent reference, but it is included to help the client code navigate the node tree if it wants by providing bi-direction navigation up and down the tree. If this is a problem (e.g. if you need to convert the tree to JSON, which does not allow cyclic dependencies) then set this to true.
Default: false
suppressDragLeaveHidesColumnsIf true, when you drag a column out of the grid (e.g. to the group zone) the column is not hidden.
Default: false
layoutIntervalThe interval in milliseconds that the grid uses to periodically check its size and lay itself out again if the size has changed, such as when your browser changes size, or your application changes the size of the div element that the grid lives inside. To stop the periodic layout, set it to -1.
Default: 500
enableRtlSet to true to operate grid in RTL (Right to Left) mode.
Default: false
debugSet this to true to enable debug information from ag-Grid and related components. Will result in additional logging being output, but very useful when investigating problems.
Default: false
contextProvides a context object that is provided to different callbacks the grid uses. Used for passing additional information to the callbacks by your application.
suppressContextMenuSet to true to not show context menu. Use if you don't want to use the default 'right click' context menu.
Default: false
preventDefaultOnContextMenuWhen 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.
Default: false
allowContextMenuWithControlKeyAllows context menu to show, even when Ctrl key is held down.
statusBarSpecifies the status bar components to use in the status bar.
suppressTouchDisables touch support (but does not remove the browser's efforts to simulate mouse events on touch).
Default: false
suppressAsyncEventsDisables the async nature of the events introduced in v10, and makes them synchronous. This property is only introduced for the purpose of supporting legacy code which has a dependency to sync events in earlier versions (v9 or earlier) of ag-Grid. It is strongly recommended that you don't change this property unless you have legacy issues.
Default: false
suppressCsvExportPrevents the user from exporting the grid to CSV.
Default: false
suppressExcelExportPrevents the user from exporting the grid to Excel.
Default: false
asyncTransactionWaitMillisHow many milliseconds to wait before executing a batch of async transactions.
suppressPropertyNamesCheckDisables showing a warning message in the console if using a gridOptions or colDef property that doesn't exist.
Default: false
suppressRowTransformUses 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
serverSideSortingAlwaysResetsWhen true, a full reset will be performed when sorting using the Server-Side Row Model.
Default: false
suppressBrowserResizeObserverThe grid will check for ResizeObserver and use it if it exists in the browser, otherwise it will use the grid's alternative implementation. Some users reported issues with Chrome's ResizeObserver. Use this property to always use the grid's alternative implementation should such problems exist.
Default: false