Expand All

  Getting Started

  Interfacing

  Features

  Row Models

  Themes

  Components

  Examples

Misc

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

Properties

Below are listed all the properties of the grid you can add.

Javascript

Add properties to the gridOptions object.

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

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

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.

Columns

columnDefs Array of Column Definitions.
defaultExportParams A default configuration object used to export to csv or excel
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.
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.
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.
suppressMultiSort Set to true or false. If true, shift-clicking column header doesn't multi sort.
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.
suppressMenuHide Set to true to always show the column menu button, rather than only showing when the mouse is over the 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.
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.

Sort & Filter

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.
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'.
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'].

Selection

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.
enableRangeSelection Set to true to enable range selection.

Editing

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.
enableCellChangeFlash Set to true to have cells flash after data changes.
suppressClickEdit Set 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.
stopEditingWhenGridLosesFocus Set this to true to stop cell editing when focus leaves the grid. The default is the grid stays editing until focus goes onto another cell.

Headers

headerHeight Height, in pixels, of the header row. The default is 25px. If grouping, each group row will be this height.

Row Grouping & Pivoting

groupUseEntireRow
groupDefaultExpanded
groupSelectsChildren
groupSelectsFiltered
groupSuppressAutoColumn
groupSuppressBlankHeader
groupRemoveSingleChildren
groupRemoveSingleChildren
groupMultiAutoColumn
Parameters for grouping. See the section on grouping for details explanation.
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.
suppressUseColIdForGroups When true, the col id's are not used for values in the groups. To be used in conjunction with groupRowAggNodes() callback.
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'.
pivotMode Set to true to enable pivot mode. See Pivoting for more information.
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.
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.
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.
aggFuncs Adding and clearing of aggregation functions.

Tool Panel

toolPanelSuppressRowGroups, toolPanelSuppressValues, toolPanelSuppressPivots, toolPanelSuppressPivotMode Set to true to hide the relevant sections in the tool panel.
showToolPanel Set to true to show the tool panel by default.

Data & Row Models

rowModelType Sets the row model type - enabled Virtual Scrolling, Pagination and ViewPort functionality. Defaults to 'normal'. Valid options are [pagination,virtual,viewport,normal]
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

Selection

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.

Scrolling

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.
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 This is no property suppressRowVirtualisation - if you want to do this, then set the rowBuffer property to be very large, eg 9999.
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

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

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.

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.

paginationStartPage

Number. The starting page that will be shown by ag-Grid. If this number is greater than the maximum number of pages, ag-Grid will place the user in the last page.

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.

Rendering & Styling

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. 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. rowHeight Height of rows, in pixels. Default is 25 pixels. animateRows Enable row animations by setting this to true. 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. 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 it's calculations.

Localisation

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.

Miscellaneous

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. 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. 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, it's 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. 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 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. 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 will be displayed at the bottom of the grid. suppressTouch Disables touch support (but does not remove the browsers efforts to simulate mouse events on touch).