Expand All

  Getting Started



  Row Models





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

Grid API

The grid API exposes functions that go beyond events and properties that your application can call. The grid needs to be initialised before the API can be accessed.


Use api placed inside gridOptions by the grid during initialisation.

AngularJS 1.x

Use api placed inside gridOptions by the grid during initialisation.


The API is provided to you in the onGridReady callback of the React component. Or if you are providing gridOptions object, you can use the API attached to this after the grid has initialised.


Use api placed inside gridOptions by the grid during initialisation. You can also use api directly on the Angular grid component.


Use api placed inside gridOptions by the grid during initialisation. You can also use api directly on the VueJS grid component.

Web Components

Use api placed inside gridOptions by the grid during initialisation. You can also use api directly on the DOM element.

Aurelia Components

Use api placed inside gridOptions by the grid during initialisation. You can also use api directly on the DOM element.


sizeColumnsToFit() Gets columns to adjust in size to fit the grid horizontally.
setColumnDefs(colDefs) Call to set new column definitions into the grid. The grid will redraw all the column headers, and then redraw all of the rows. The rows will not be discarded, so any selections, scrolling or groups open, will stay.


setRowData(rows) Set new rows into the grid.
setDatasource(datasource) Set new datasource into the gird. The grid will reset all paging and load the first page. If you want to reset the paging but keep the datasource, call this method with the same datasource.
Methods for getting and setting the data and getting the Row Nodes of the floating rows.
getModel() Returns the row model inside the table. From here you can see the original rows, rows after filter has been applied, rows after aggregation has been applied, and the final set of 'to be displayed' rows.
refreshInMemoryRowModel() Does a complete refresh of the in memory row model. Shotgun approach for any row changes you have done.

Looping Through Data

forEachNode(callback) Iterates through each node (row) in the grid and calls the callback for each node. This works similar to the 'forEach' method on a Javascript array. This is called for every node, ignoring any filtering or sorting applied within the grid. If pagination, then gets called for the currently loaded page. If using infinite row model, then gets called for each page loaded in the page cache.
forEachNodeAfterFilter(callback) Similar to forEachNode, except skips any filtered out data.
forEachNodeAfterFilterAndSort(callback) Similar to forEachNode, except skips any filtered out data and each the callback is called in the order the rows are displayed in the grid.
forEachLeafNode(callback) Similar to forEachNode, except lists all the leaf nodes. This effectively goes through all the data that you provided the grid before the grid did any grouping.


selectAll() Select all rows (even rows that are not visible due to grouping being enabled and their groups not expanded).
deselectAll() Clear all row selections.
selectAllFiltered() Select all filtered rows.
deselectAllFiltered() Clear all filtered selections.
getSelectedNodes() Returns a list of selected nodes. Getting the underlying node (rather than the data) is useful when working with tree / aggregated data, as the node can be traversed.
getSelectedRows() Returns a list of selected rows (ie row data that you provided).
getBestCostNodeSelection() Returns a list of all selected nodes at 'best cost' - a feature to be used with groups / trees. If a group has all it's children selected, then the group appears in the result, but not the children. Designed for use with 'children' as the group selection type, where groups don't actually appear in the selection normally.
getRangeSelections() Returns the list of selected ranges.
addRangeSelection(rangeSelection) Adds to the selected range.
clearRangeSelection() Clears the selected range.


refreshView() Rip out and re-insert all visible rows. Handy as a blanket 'redraw all' if changes have been made to the row data.
softRefreshView() Leave the rows intact. Each cell that has been marked as volatile (via colDef attribute) will be redrawn. Any cells that are not marked as volatile will be left alone, hence keeping any context or state that they have.
refreshRows(rowNodes) Rips out the virtual rows showing representing the provided list of row nodes and then redraws them.
refreshCells(rowNodes, colIds) Gets the individual cells for the provided rowNodes to refresh, the row itself and all other cells stay intact.
refreshHeader() Redraws the header. Useful if a column name changes, or something else that changes how the column header is displayed.
refreshGroupRows() Rip out and re-insert all visible header and footer rows only. Only need to call if update the aggregate data yourself, as this gets called after recomputeAggregates() anyway.
refreshGroup() Gets the grid to recompute the row groups.
getFirstRenderedRow() getLastRenderedRow() Gets the index of the first and last rendered rows.

Sort / Filter

setQuickFilter(quickFilter) Pass a quick filter text into ag-Grid for filtering. If using Angular, the grid watched the 'quickFilterText' attribute of the gridOptions. If you won't want to use quickFilterText (ie if not using AngularJS) then you can call this method instead to apply a quick filter.
isQuickFilterPresent() Returns true if the quick filter is set, otherwise false.
isAdvancedFilterPresent() Returns true if the advanced filter is set, otherwise false.
isAnyFilterPresent() Returns true if any filter is set. This includes quick filter, advanced filter or external filter.
getFilterInstance(col) Returns the filter component instance for the column. Either provide the colDef (matches on object reference) or the column field attribute (matches on string comparison). Matching by field is normal. Matching by colDef is useful when field is missing or not unique.
getFilterModel() Gets the current state of all the advanced filters. Used for saving filter state.
setFilterModel(model) Sets the state of all the advanced filters. Provide it with what you get from getFilterModel() to restore filter state.
onFilterChanged() Informs the grid that a filter has changed. This is typically called after a filter change through one of the filter APIs.
destroyFilter() Destroys a filter, useful to create get a particular filter created from scratch again.
onSortChanged() Gets the grid to act as if the sort was changed. Useful if you update some values in the grid and want to get the grid to reorder them according to the new values.
setSortModel(model) Sets the sort state of the grid.
getSortModel() Returns the sort state of the grid.


getFocusedCell() Returns the focused cell as an object containing the rowIndex, column and floating (top, bottom or null).
setFocusedCell(rowIndex, colKey, floating) Sets the focus to the specified cell. Set floating to null, 'top', or 'bottom'.
clearFocusedCell() Clears the focused cell.
tabToNextCell() Navigates the grid focus to the next cell, as if tabbing.
tabToPreviousCell() Navigates the grid focus to the previous cell, as if shift-tabbing.


stopEditing(cancel?) If a cell is editing, it stops the editing. Pass 'true' if you want to cancel the editing (ie don't accept changes).
startEditingCell(params) Gets the grid to start editing on a particular cell.


exportDataAsCsv(params) Does a CSV export of the grid's data.
getDataAsCsv(params) Similar to exportDataAsCsv, except returns result as a string rather than export it.
exportDataAsExcel(params) Does a Excel export of the grid's data.
getDataAsExcel(params) Similar to exportDataAsExcel, except returns result as a string rather than export it.


addEventListener(eventType, listener) Add an event listener for the said event type. Works similar to addEventListener for a browser DOM element.
addGlobalListener(listener) Add an event listener for all event types coming from the grid.
removeEventListener(eventType, listener) Remove an event listener.
removeGlobalListener(listener) Remove a global event listener.
dispatchEvent(eventType, event) Dispatch an event through the grid. Useful if you are doing a custom cellRenderer and want to fire events such as 'cellValueChanged'.


expandAll() Expand all groups.
collapseAll() Collapse all groups.
onGroupExpandedOrCollapsed() If after getting the model, you expand or collapse a group, call this method to inform the grid. It will work out the final set of 'to be displayed' rows again (ie expand or collapse the group visually).
recomputeAggregates() Recomputes the aggregates in the model and refreshes all the group rows.


getRenderedNodes() Retrieve rendered nodes. Due to virtualisation this will contain only the current visible rows and the amount in the buffer.


ensureIndexVisible(index) Ensures the index is visible, scrolling the table if needed.
ensureColumnVisible(colId) Ensures the column is visible, scrolling the table if needed.
ensureNodeVisible(comparator) Ensures a node is visible, scrolling the table if needed. Provide one of a) the node b) the data object c) a comparator function (that takes the node as a parameter, and returns true for match, false for no match)


showLoadingOverlay() Show the loading overlay.
showNoRowsOverlay() Show the 'no rows' overlay.
hideOverlay() Hides the overlay if showing.


copySelectedRangeToClipboard(includeHeaders) Copies the selected ranges to the clipboard.
copySelectedRangeDown() Copies the selected range down, similar to Ctrl+D in Excel.



Returns true when last page known. This will always be true if you are using the in memory row model for pagination.

Returns false when last page now known. This only happens when using infinite scrolling row model.


How many rows ag-Grid is showing per page.


Sets the paginationPageSize to newPageSize Then it repaginates the grid so the changes are applied immediately on the screen.


Returns the 0 index based page which ag-Grid is showing right now.


Returns the total number of pages. If paginationIsLastPageFound() == false returns null.


The total number of rows. If paginationIsLastPageFound() == false returns null.


Goes to the specified page. If the page requested doesn't exist, it will go to the last page.


Shorthands for goToPage(relevantPageNumber).


addRenderedRowListener(event, rowIndex, callback) Registers a callback to a rendered row. A rendered row is a row that is visually rendered on the screen (rows that are not visible because of the scroll position are not rendered). Unlike normal events, you do not need to unregister rendered row listeners. When the rendered row is removed from the grid, all associated rendered row listeners will also be removed. Currently only one event: 'renderedRowRemoved' - listen for this event if your cellRenderer needs to do clean down after the row no longer exists.
showToolPanel(show) Shows (or hides) the tool panel.
isToolPanelShowing() Returns true if the tool panel is showing, otherwise false.
doLayout() Force the grid to lay out it's components. The grid, by default, resizes to fit the div the grid lives in. This is done a) on initialisation b) window resize and c) every 500ms. You should call this if something happens in your application where the grid size has changed and you want to lay the grid out without waiting for the next 500ms refresh.
getValue(colKey, node) Gets the value for a column for a particular rowNode (row). This is useful if you want the raw value of a cell eg implementing your own csv export.
setHeaderHeight(value) To set the header height (in pixels) after the grid has initialised. Set to null or undefined to use the default of 25px. If havling multiple rows in the header, due to column grouping, this will be the height of each row.
destroy() Gets the grid to destroy and release resources. If you are using Angular (version 1 or 2) you do not need to call this, as the grid links in with the AngularJS 1.x lifecycle. However if you are using Web Components or native Javascript, you do need to call this, to avoid a memory leak in your application.
showColumnMenuAfterButtonClick(colKey, buttonElement), showColumnMenuAfterMouseClick(colKey, mouseEvent) Shows the column menu after and positions it relative to the provided element (button click) or mouse event. Use in conjunction with your own header template.
checkGridSize() Gets the grid to check it's size again. This is useful if you do not have the grid in the DOM when you create it, call this method after the grid is in the dom to get it to check it's width and height again (which decides what columns and rows to render).
resetRowHeights() Gets the grid to recalculated the row heights.
onRowHeightChanged() Tells the grid a row height has changed. To be used after calling rowNode.setRowHeight(newHeight).
copySelectedRowsToClipboard(includeHeaders, columnKeys) Copies the selected rows to the clipboard. Set includeHeaders = true to include the headers (default is false) set columnKeys to the list of columns if you don't want just specific columns.
addAggFunc(key, aggFunc), addAggFuncs(aggFuncs), clearAggFuncs() Adding and clearing of aggregation functions.