Properties

Below are listed all the properties of the grid. Remember you can add these properties as follows:

Javascript and AngularJS 1.x

Add properties to the gridOptions object.

React

Add properties to the gridOptions object, or you can also add as React props inside your JSX markup.

Angular

VueJS

Add properties to the gridOptions object, or you can also add as HTML attributes or VueJS bound properties.

Web Components

Add properties to the gridOptions object, or you can also add as HTML attributes or set directly onto the DOM element.

Aurelia Components

Add properties to the gridOptions object, or you can also add as HTML attributes or set directly onto the DOM element.

List of Properties

Property Description
columnDefs Array of Column Definitions.
defaultColDef A default column definition. All column definitions will use these properties. Items defined in the actual column definition get precedence.
defaultColGroupDef A default column group definition. All column group definitions will use these properties. Items defined in the actual column group definition get precedence.
headerHeight Height, in pixels, of the header row. The default is 25px. If grouping, each group row will be this height.
rowData Data to be displayed as rows in the table
floatingTopRowData Data to be displayed as floating top rows in the table
floatingBottomRowData Data to be displayed as floating bottom rows in the table
rowSelection Type of row selection, set to either 'single' or 'multiple' to enable selection.
rowDeselection Set to true or false. If true, then rows will be deselected if you hold down ctrl + click the row.
rowHeight Height of rows, in pixels. Default is 25 pixels.
enableColResize Set to true or false.
suppressAutoSize If enableColResize=true suppressAutoSize and suppressAutoSize=false, then double clicking the resize bar in the header will not auto-size the column.
autoSizePadding How many pixels to add to the column width after the autosize calculation. Default is 4px. Set this if you want to add extra room to accommodate (for example) sort icons, or some other dynamic nature of the header.
suppressColumnMoveAnimation If true, the ag-column-moving class is not added to the grid while columns are moving. In the default themes, this transpires to no animation for moving columns.
suppressMovableColumns If true, you cannot drag the columns to move them.
enableSorting, enableServerSideSorting Set one of these to true to enable sorting. enableSorting will allow header clicks and show sort icons and sort within the grid. enableServerSideSorting will allow header clicks and show sort icons, but the sorting will be deferred to your datasource.
suppressFieldDotNotation If true, then dots (eg address.firstline) in field names are not treated as deep references. Allows you to use dots in your field name if you prefer.
suppressMiddleClickScrolls If true, then middle clicks will result in 'click' events for cell and row. Otherwise the browser will use middle click to scroll the grid.
suppressPreventDefaultOnMouseWheel 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.
enableCellExpressions Set to true to allow cells to contain expressions.
unSortIcon Set to true to show the 'no sort' icon.
suppressMultiSort Set to true or false. If true, shift-clicking column header doesn't multi sort.
enableFilter, enableServerSideFilter Set one of these to true to enable filtering. enableFilter will present filters and do the filtering within the grid. enableServerSideFilter will present filters but defer the filtering to your datasource.
quickFilterText Rows are filtered using this text as a 'quick filter'.
angularCompileRows Whether to compile the rows for Angular. Default is false (for performance). Turn on if you want to use AngularJS in your custom cell renderers.
angularCompileFilters Whether to compile provided custom filters. Default is false (for performance). Turn on if you want to use AngularJS in your custom filters.
angularCompileHeaders Whether to compile the customer headers for AngularJS. Default is false (for performance). Turn on if you want to user AngularJS in your custom column headers.
groupUseEntireRow
groupDefaultExpanded
groupSelectsChildren
groupSelectsFiltered
groupSuppressAutoColumn
groupSuppressBlankHeader,
groupRemoveSingleChildren
Parameters for grouping. See the section on grouping for details explanation.
forPrint Set to true or false. When true, scrollbars are not used. Intention is to print the grid. Do not do this if you have many (more than 500??) rows as the browser will probably die.
suppressRowClickSelection If true, rows won't be selected when clicked. Use when you want checkbox selection exclusively.
suppressCellSelection If true, cells won't be selectable. This means cells will not get keyboard focus when you click on them.
colWidth The default width for each col. Widths specified in column definitions get preference over this.
minColWidth The default min width for each col. Min widths specified in column definitions get preference, otherwise 20px is the default.
maxColWidth The default max width for each col. Max widths specified in column definitions get preference, otherwise no max is set.
rowClass The class to give a particular row. Provide either a string (class name) or array of string (array of class names). If you want a different class per row, then use the callback getRowClass(params) instead.
rowStyle The style for a particular row. Provide an array of CSS key / value pairs eg {color: 'red'}. If you a different style per row, then use the callback getRowStyle(params) instead.
rowBuffer The number of rows rendered outside the scrollable viewable area the grid renders. Defaults to 20. Having a buffer means the grid will have rows ready to show as the user slowly scrolls vertically.
showToolPanel Set to true to show the tool panel by default.
toolPanelSuppressRowGroups, toolPanelSuppressValues, toolPanelSuppressPivots, toolPanelSuppressPivotMode Set to true to hide the relevant sections in the tool panel.
suppressScrollLag By default, scrolling lag is enabled for Safari and Internet Explorer (to solve scrolling performance issues in these browsers). To override when to use scroll lag either a) set suppressScrollLag to true to turn off scroll lag feature or b) return true of false from the function isScrollLag. This is a function, as it's expected your code will check the environment to decide whether to use scroll lag or not.
suppressMenuHide Set to true to always show the column menu button, rather than only showing when the mouse is over the column header.
suppressMovingInCss Does not apply 'ag-column-moving' class into grid when dragging columns. For the provided themes, this stops the animation while moving columns via dragging their headers.
suppressLoadingOverlay Disables the 'loading' overlay.
suppressNoRowsOverlay Disables the 'no rows' overlay.
singleClickEdit Set to true to allow editable cells to start editing with a single click.
enableGroupEdit Set to true to allow editing of the group rows.
editType Set to 'fullRow' to enable full row editing. Otherwise leave blank to edit one cell at a time.
suppressHorizontalScroll Set to true to never show the horizontal scroll. This is useful if the grid is a slave grid, and will scroll with a master grid.
slaveGrids A list of grids to treat as slaves. If a grid is a slave, it's columns and horizontal scrolling will try to mirror the columns of the master.
rowModelType Sets the row model type - enabled Virtual Scrolling, Pagination and ViewPort functionality. Defaults to 'normal'. Valid options are [pagination,virtual,viewport,normal]
overlayLoadingTemplate Provide a template for 'loading' overlay if not happy with the provided.
overlayNoRowsTemplate Provide a template for 'no rows' overlay if not happy with the provided.
suppressParentsInRowNodes If true, rowNodes don't get their parents set. The grid doesn't use the parent reference, it's 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 (eg if you need to convert the tree to JSON, which requires no cyclic dependencies) then set this to true.
suppressDragLeaveHidesColumns If true, when you drag a column out of the grid (eg to the group zone) the column is not hidden.
headerCellTemplate String for HTML header template to use.
enableCellChangeFlash Set to true to have cells flash after data changes.
suppressCopyRowsToClipboard Set to true to only have range selection, and not row selection, copied to clipboard.
suppressFocusAfterRefresh 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.
suppressColumnVirtualisation Set to true so that the grid doesn't virtualise the columns. So if you have 100 columns, but only 10 visible due to scrolling, all 100 will always be rendered.
maxConcurrentDatasourceRequests For virtual pagination only. How many concurrent data requests are allowed.
maxPagesInCache For virtual pagination only. How many pages to hold in the cache.
paginationOverflowSize For virtual pagination only. How many rows to seek ahead when unknown data size.
paginationInitialRowCount For virtual pagination only. How many rows to initially allow scrolling to in the grid.
paginationPageSize For normal paging, how many rows to show to a user at one time (ie page size). In virtual pagination dictates the size of teh pages in the data cache. For both paging and virtual pagination, defines the block size the datasource is asked for data.
groupRowInnerRenderer
groupRowInnerRendererFramework
groupRowRenderer
groupRowRendererFramework
groupRowRendererParams
Sets grouping row cell renderer. See the section on row grouping for detailed explanation.
fullWidthCellRenderer, fullWidthCellRendererFramework, fullWidthCellRendererParams For rendering fullWidth rows.
layoutInterval The grid will check it's size 500ms and lay itself out again if the size changes - such as your browser changes size, or your application changes the size of the div the grid live inside. If you want something other than 500ms, set this to a number of milliseconds. To stop the periodic layout, set it to -1.
scrollbarWidth To tell grid how wide the scrollbar is which gets used in calculations on grid width calculations. Set only if using non-standard browser provided scrollbars, so the grid can use the non-standard size in it's calculations.
suppressRowHoverClass Normally the grid adds CSS class ag-row-hover when mouse is hovering over a row. This requires the grid to add hover listeners to each row which is expensive (only to be considered expensive if you are having performance issues, such as running on old machine with IE). Set this property to true to drop this feature in favour of a slight performance gain.
suppressMenuHide Set to true to always show the column menu button, rather than only showing when the mouse is over the column header.
suppressTabbing Set to true to remove the grid tabbing functionality. Use this if you want to manage tabbing differently to what the grid provides..
sortingOrder SPL TODO
enableRtl SPL TODO
suppressClickEdit Se this to true so that neither single or double click starts editing. This is useful when you want to start the editing in another way, such as including a button in your cellRenderer.
debug Set 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.
icons ag-Grid comes with default icons that are created using SVG. You can provide your own icons for the grid to use. See Icons for more information.
animateRows Enable row animations by setting this to true.
pivotMode Set to true to enable pivot mode. See Pivoting for more information.
localeText You can change the text in the paging panels and the default filters by providing a localeText or a localeTextFunc (see below). See Internationalisation for more information.
localeTextFunc You can change the text in the paging panels and the default filters by providing a localeText or a localeTextFunc (see below). See Internationalisation for more information.
groupIncludeFooter If 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 black. When closed, the header will contain the aggregate data regardless of this setting (as 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.
groupSuppressRow If 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 parent group row to each group.
groupColumnDef Allows 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.
context Provides a context which can be used when rendering, setting row height, filtering and so on.
datasource A datasource is used when using row models a) pagination and b) virtual paging. This section explains the datasource used in each fo these row models. See Datasource for more information.

ag-Grid Enterprise   The properties below are available in the Enterprise version of ag-Grid.

Property Description
enableRangeSelection Set to true to enable range selection.
excelStyles The list of Excel styles to be used when exporting to Excel
rowGroupPanelShow When to show the 'row group panel' (where you drag rows to group) at the top. Default is never. Set to either 'always' or 'onlyWhenGrouping'.
pivotPanelShow When to show the 'pivot panel' (where you drag rows to pivot) at the top. Default is never. Set to either 'always' or 'onlyWhenPivoting'. Note that the pivot panel will never show if pivotMode is off.
suppressContextMenu Set to true to not show context menu. Use if you don't want to use the default 'right click' context menu.
suppressEnterprise Turn off enterprise features. This is used by ag-Grid testers, mentioned here in case someone is looking at the code and wondering.
suppressMenuColumnPanel
suppressMenuFilterPanel
suppressMenuMainPanel
By default the enterprise menu has three panels. Set these properties to true to suppress one or more of these panels.
rememberGroupStateWhenNewData When 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.
enableStatusBar When true, the status bar will be displayed at the bottom of the grid.
viewportRowModelPageSize When using viewport row model, sets the pages size for the viewport.
viewportRowModelBufferSize When using viewport row model, sets the buffer size for the viewport.
suppressUseColIdForGroups When true, the col id's are not used for values in the groups. To be used in conjunction with groupRowAggNodes() callback.
suppressAggFuncInHeader When true, column headers won't include the aggFunc, eg 'sum(Bank Balance)' will just be 'Bank Balance'.
functionsReadOnly 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 use to change the selection.
suppressTouch Disables touch support (but does not remove the browsers efforts to simulate mouse events on touch).
viewportDatasource To use the viewportRowModel you provide the grid with a viewportDatasource. See Viewport for more information.
aggFuncs Adding and clearing of aggregation functions.