Expand All

  Getting Started



  Row Models




  Third Party


Github stars make projects look great. Please help, donate a star, it's free.
Read about ag-Grid's Partnership with webpack.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

Grid Properties

columnDefs Array of Column Definitions.
defaultColDef A default column definition.
defaultColGroupDef A default column group definition. All column group definitions will use these properties. Items defined in the actual column group definition get precedence.
enableColResize Set to true to allow column resizing by dragging the mouse at a columns headers edge.
suppressAutoSize Suppresses auto-sizing columns for columns. In other words, double clicking a columns headers edge will not auto-size.
autoSizePadding How many pixels to add to a column width after the auto-sizing calculation. The default is 4 pixels. 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 Set to true to suppress column moving. In other words, set to true to make the columns fixed position.
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.
unSortIcon Set to true to show the 'no sort' icon. See Example Custom Sorting.
suppressMultiSort Set to true to suppress multi-sort when the user shift-clicks a column header.
suppressMenuHide Set to true to always show the column menu button, rather than only showing when the mouse is over the column header.
autoGroupColumnDef 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.
Sort & Filter
enableSorting Set to true when using In Memory Row Model to enable Row Sorting. Clicking a column header will cause the grid to sort the data.
enableServerSideSorting Set to true when using Infinite, Enterprise or Viewport Row Models to enable Row Sorting. Clicking a column header will result in your datasource getting asked for the data again with the new sort order.
enableFilter Set to true when using In Memory Row Model to enable Row Filtering.
enableServerSideFilter Set to true when using Infinite, Enterprise or Viewport Row Models to enable Row Filtering. A change in filter will result in your datasource getting asked for the data again with the new filter.
quickFilterText Rows are filtered using this text as a quick filter.
cacheQuickFilter Set to true to turn on the quick filter cache, used for a performance gain when using the quick filter.
sortingOrder Array 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.
accentedSort Set 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
suppressRowClickSelection If true, row selection won't happen when rows are 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.
enableRangeSelection Set to true to enable Range Selection.
singleClickEdit Set to true to enable Single Click Editing for cells, to start editing with a single click.
suppressClickEdit Set to true so that neither single or double click starts editing. See Single Click, Double Click, No Click Editing
enableGroupEdit Set to true to enable Group Editing, otherwise by default, row groups cannot be edited.
editType Set to 'fullRow' to enable Full Row Editing. Otherwise leave blank to edit one cell at a time.
enableCellChangeFlash Set to true to have cells flash after data changes. See Flashing Data Changes.
stopEditingWhenGridLosesFocus Set 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.
headerHeight The height for the row containing the column label header. If not specified the default is 25px. See Header Height example.
groupHeaderHeight The height for the rows containing header column groups. If not specified, it uses headerHeight. See Header Height example.
floatingFiltersHeight The height for the row containing the floating filters. If not specified the default is 20px. See Header Height example.
pivotHeaderHeight The height for the row containing the columns when in pivot mode. If not specified, it uses headerHeight. See Header Height example.
pivotGroupHeaderHeight The height for the row containing header column groups when in pivot mode. If not specified, it uses groupHeaderHeight. See Header Height example.
Row Grouping & Pivoting
groupUseEntireRow If grouping, set to true or false (default is false). 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.
groupDefaultExpanded If grouping, set to the number of levels to expand by default. Eg 0 for none, 1 first level only, etc. Default is 0 (expand none). Set to -1 for expand everything. See example Removing Single Children.
autoGroupColumnDef 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. See Configuring the Auto Group Column.
groupSuppressAutoColumn If 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 grids help. In other words, you already have a column in your column definitions that is responsible for displaying the groups. See Configuring the Auto Group Column.
groupMultiAutoColumn If using auto column, set to true to have each group in its own column separate column, eg if group by Country then Year, two auto columns will be created, one for country and one for year. See Multi Auto Column Group.
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. See Suppress Group Row.
groupSelectsChildren When true, if you select a group, the the children of the group will also get selected. See Group Selection.
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 blank. 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 See Grouping Footers.
groupSuppressBlankHeader If 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.
groupSelectsFiltered If using groupSelectsChildren, then only the children that pass the current filter will get selected. See Group Selection.
groupRemoveSingleChildren Set to true to collapse groups that only have one child. See Remove Single Children.
groupHideOpenParents Set to true to hide parents that are open. When used with multiple columns for showing groups, it can give more pleasing user experience. See Group Hide Open Parents.
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'. See Tool Panel Example.
pivotMode Set to true to enable pivot mode. See Pivoting.
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.
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. See Keeping Group State.
suppressAggFuncInHeader When true, column headers won't include the aggFunc, eg 'sum(Bank Balance)' will just be 'Bank Balance'.
suppressAggAtRootLevel When true, the aggregations won't be computed for root node of the grid.
aggregateOnlyChangedColumns When using change detection, only the updated column with get re-aggregated.
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. See Read Only Functions.
aggFuncs A map of 'function name' to 'function' for custom aggregation functions. See example Custom Aggregation Functions.
Tool Panel
toolPanelSuppressRowGroups, toolPanelSuppressValues, toolPanelSuppressPivots, toolPanelSuppressPivotMode Set to true to hide the relevant sections in the Tool Panel. See example Suppress Panels
showToolPanel Set to true to show the Tool Panel by default.
Data & Row Models
rowModelType Sets the Row Model type. Defaults to 'inMemory'. Valid options are [inMemory,infinite,viewport,enterprise].
rowData In Memory row model only - set the data to be displayed as rows in the grid.
deltaRowDataMode In Memory row model only - enables delta row data mode, for compatibility with immutable stores.
pinnedTopRowData Data to be displayed as Pinned Top Rows in the grid.
pinnedBottomRowData Data to be displayed as Pinned Bottom Rows in the grid.
rowSelection Type of Row Selection, set to either 'single' or 'multiple'.
rowDeselection If true then rows will be deselected if you hold down ctrl + click the row.
suppressHorizontalScroll 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. See example Aligned Grid as Footer
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.
suppressRowVirtualisation There is no property suppressRowVirtualisation - if you want to do this, then set the rowBuffer property to be very large, eg 9999. But be careful, lots of rendered ros will mean a very large amount of rendering in the DOM which will slow things down.
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.
suppressScrollOnNewData 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.
pagination True - Pagination is enabled.
False (Default) - Pagination is disabled.
paginationPageSize Number. How many rows to load per page. Default value = 100. If paginationAutoPageSize is specified, this property is ignored. See example Customising Pagination.
paginationAutoPageSize True - 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.
False (Default) - paginationPageSize is used. See example Auto Page Size.
suppressPaginationPanel True - The out of the box ag-Grid controls for navigation are hidden. This is useful if pagination=true and you want to provide your own pagination controls.
False (Default) - when pagination=true It automatically shows at the bottom the necessary controls so that the user can navigate through the different pages. See example Custom Pagination Controls.
Row Model: Infinite Scrolling
maxConcurrentDatasourceRequests How many concurrent data requests are allowed.
maxPagesInCache How many pages to hold in the cache.
paginationOverflowSize How many rows to seek ahead when unknown data size.
paginationInitialRowCount How many rows to initially allow scrolling to in the grid.
Row Model: Viewport
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.
viewportDatasource To use the viewportRowModel you provide the grid with a viewportDatasource. See Viewport for more information.
Full Width Renderers
Sets the Cell Renderer to use when groupUseEntireRow=true. See row grouping.
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.
Rendering & Styling
icons Icons to use inside the grid instead of the grid's default icons.
rowHeight Default Row Height in pixels. Default is 25 pixels.
animateRows Set to true to enable Row Animation.
rowClass The class to give a particular row. See Row Styling.
rowStyle The style to give a particular row. See Row Styling.
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.
excelStyles The list of Excel styles to be used when exporting to Excel
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 its calculations.
localeText, 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.
valueCache Set to true to turn on the value cache. The default is the value cache is not used.
valueCacheNeverExpires Set to true to set value cache to not expire after data updates.
defaultExportParams A default configuration object used to export to csv or excel
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.
domLayout Set to 'forPrint' for 'autoHeight'. By default, grid will fit width and height of the provided div. If more rows or columns, grid will provide scrolls. If you to 'autoHeight', then the grid will autosize it's height to fit the rows but still provide horizontal scrolls. If set to 'forPrint', then the grid will have no scrolls (or pinned areas or tool panel) and every cell will be rendered - use this if you want a printable version of the grid.
ensureDomOrder When true, this property ensures the order of rows and columns, including the headers.
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.
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.
slaveGrids A list of grids to treat as slaves. If a grid is a slave, its columns and horizontal scrolling will try to mirror the columns of the master.
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.
suppressCopyRowsToClipboard Set to true to only have range selection, and not row selection, copied to clipboard.
clipboardDeliminator To specify deliminator to use while copying 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.
layoutInterval The grid will check its 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.
suppressTabbing Set to true to remove the grid tabbing functionality. Use this if you want to manage tabbing differently to what the grid provides..
enableRtl Set to true to operate grid in RTL (Right to Left) mode.
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.
context Provides a context which can be used when rendering, setting row height, filtering and so on.
suppressContextMenu Set to true to not show context menu. Use if you don't want to use the default 'right click' context menu.
allowContextMenuWithControlKey Allows context menu to show, even when ctrl key is held down.
suppressEnterprise Turn off enterprise features. This is used by ag-Grid testers, mentioned here in case someone is looking at the code and wondering.
enableStatusBar When true, the status bar appear at the bottom of the grid when cells are selected.
alwaysShowStatusBar When true, the status bar will always be displayed at the bottom of the grid, when 'enableStatusBar' is also enabled
suppressTouch Disables touch support (but does not remove the browsers efforts to simulate mouse events on touch).
suppressAsyncEvents Disables the async nature of the events introduced in v10, and makes them syncrhonous. This property is only introduced for the purpose of supporting legacy code which has a dependency to sync events. It is strongly recommended that you don't change this property unless you have legacy issues