To access the api see: Grid Api.
Accessories
Show the column chooser. |
Show the filter for the provided column. |
Show the column menu for the provided column. |
Displays the AG Grid context menu |
Hides any visible context menu or column menu. |
Hide the column chooser if visible. |
Returns the current side bar configuration. If a shortcut was used, returns the detailed long form. |
Show/hide the entire side bar, including any visible panel and the tab buttons. |
Returns true if the side bar is visible. |
Sets the side bar position relative to the grid. Possible values are 'left' or 'right'. |
Opens a particular tool panel. Provide the ID of the tool panel to open. |
Closes the currently open tool panel (if any). |
Returns the ID of the currently shown tool panel if any, otherwise null. |
Returns true if the tool panel is showing, otherwise false. |
Force refreshes all tool panels by calling their refresh method. |
Gets the tool panel instance corresponding to the supplied id. |
Gets the status panel instance corresponding to the supplied id. |
Clipboard
See Clipboard for more information.
Cuts data to clipboard by following the same rules as pressing Ctrl+X. |
Copies data to clipboard by following the same rules as pressing Ctrl+C. |
Copies the selected ranges to the clipboard. |
Copies the selected range down, similar to ^ Ctrl+D in Excel. |
Copies the selected rows to the clipboard. |
Pastes the data from the Clipboard into the focused cell of the grid. If no grid cell is focused, calling this method has no effect. |
Column Definitions
See Updating Column Definitions for more information.
Returns the current column definitions. |
Returns the column with the given colKey, which can either be the colId (a string) or the colDef (an object). |
Returns all the columns, regardless of visible or not. |
Returns all the grid columns, same as getColumns(), except
a) it has the order of the columns that are presented in the grid
b) it's after the 'pivot' step, so if pivoting, has the value columns for the pivot. |
Column Display
Sets the visibility of columns. Key can be the column ID or Column object. |
Returns the display name for a column. Useful if you are doing your own header rendering and want the grid to work out if headerValueGetter is used, or if you are doing your own column management GUI, to know what to show as the column name. |
Returns the display name for a column group (when grouping columns). |
Returns the column to the right of the provided column, taking into consideration open / closed column groups and visible columns. This is useful if you need to know what column is beside yours e.g. if implementing your own cell navigation. |
Same as getVisibleColAfter except gives column to the left. |
Same as getAllGridColumns(), except only returns rendered columns, i.e. columns that are not within the viewport and therefore not rendered, due to column virtualisation, are not displayed. |
Returns all columns currently displayed (e.g. are visible and if in a group, the group is showing the columns) for the pinned left, centre and pinned right portions of the grid. |
Same as getAllDisplayedColumns but just for the center portion of the grid. |
Same as getAllDisplayedColumns but just for the pinned left portion of the grid. |
Same as getAllDisplayedColumns but just for the pinned right portion of the grid. |
Returns all 'root' column headers. If you are not grouping columns, these return the columns. If you are grouping, these return the top level groups - you can navigate down through each one to get the other lower level headers and finally the columns at the bottom. |
Same as getAllDisplayedColumnGroups but just for the center portion of the grid. |
Same as getAllDisplayedColumnGroups but just for the pinned left portion of the grid. |
Same as getAllDisplayedColumnGroups but just for the pinned right portion of the grid. |
Returns true if the column is currently hovered. |
Column Groups
See Column Groups
Returns the column group with the given name. |
Returns the provided column group with the given name. |
Call this if you want to open or close a column group. |
Column Moving
See Column Moving
Moves columns to toIndex. The columns are first removed, then added at the toIndex location, thus index locations will change to the right of the column after the removal. |
Moves the column at fromIdex to toIndex. The column is first removed, then added at the toIndex location, thus index locations will change to the right of the column after the removal. |
Column Pinning
See Column Pinning
Returns true if pinning left or right, otherwise false. |
Returns true if pinning left, otherwise false. |
Returns true if pinning right, otherwise false. |
Set a column's pinned / unpinned state. Key can be the column ID, field, ColDef object or Column object. |
Column Sizing
See Column Sizing
Sets the column widths of the columns provided. The finished flag gets included in the resulting event and not used internally by the grid. The finished flag is intended for dragging, where a dragging action will produce many columnWidth events, so the consumer of events knows when it receives the last event in a stream. The finished parameter is optional, and defaults to true. |
Adjusts the size of columns to fit the available horizontal space.
Note: it is not recommended to call this method rapidly e.g. in response
to window resize events or as the container size is animated. This can
cause the scrollbar to flicker. Use column flex for smoother results.
If inferring cell data types with custom column types
and row data is initially empty or yet to be set,
the column sizing will happen asynchronously when row data is added.
To always perform this synchronously, set cellDataType = false on the default column definition. |
Auto-sizes columns based on their contents. If inferring cell data types with custom column types
and row data is initially empty or yet to be set,
the column sizing will happen asynchronously when row data is added.
To always perform this synchronously, set cellDataType = false on the default column definition. |
Calls autoSizeColumns on all displayed columns. If inferring cell data types with custom column types
and row data is initially empty or yet to be set,
the column sizing will happen asynchronously when row data is added.
To always perform this synchronously, set cellDataType = false on the default column definition. |
Column State
See Column State
Gets the state of the columns. Typically used when saving column state. |
Applies the state of the columns from a previous state. Returns false if one or more columns could not be found. |
Sets the state back to match the originally provided column definitions. |
Gets the state of the column groups. Typically used when saving column group state. |
Sets the state of the column group state from a previous state. |
Sets the state back to match the originally provided column definitions. |
Editing
See Cell Editing for more information.
Start editing the provided cell. If another cell is editing, the editing will be stopped in that other cell. |
If a cell is editing, it stops the editing. Pass true if you want to cancel the editing (i.e. don't accept changes). |
If the grid is editing, returns back details of the editing cell(s). |
Returns the list of active cell editor instances. Optionally provide parameters to restrict to certain columns / row nodes. |
Events
Add an event listener for the specified eventType.
Listener will receive the event as a single parameter.
Listeners will be automatically removed when the grid is destroyed. |
Remove an event listener. |
Add an event listener for all event types coming from the grid.
Listener will receive eventType and event as parameters.
Listeners will be automatically removed when the grid is destroyed.
If handling multiple event types it is recommended to use event.type to enable TypeScript to infer the event parameters. |
Remove a global event listener. |
Registers a callback to a virtual row.
A virtual 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.
listen for this event if your cellRenderer needs to do cleanup when the row no longer exists. |
Export
See Export for more information.
Downloads a CSV export of the grid's data. |
Similar to exportDataAsCsv, except returns the result as a string rather than download it. |
Downloads an Excel export of the grid's data. |
Similar to exportDataAsExcel, except instead of downloading a file, it will return a Blob to be processed by the user. |
This is method to be used to get the grid's data as a sheet, that will later be exported either by getMultipleSheetsAsExcel() or exportMultipleSheetsAsExcel(). |
Downloads an Excel export of multiple sheets in one file. |
Similar to exportMultipleSheetsAsExcel, except instead of downloading a file, it will return a Blob to be processed by the user. |
Filtering
See Filtering for more information.
Get the current Quick Filter text from the grid, or undefined if none is set. |
Reset the Quick Filter cache text on every rowNode. |
Returns true if the Quick Filter is set, otherwise false. |
Returns true if any column filter is set, otherwise false. |
Returns true if any filter is set. This includes quick filter, column filter, external filter or advanced filter. |
Returns the filter component instance for a column.
For getting/setting models for individual column filters, use getColumnFilterModel and setColumnFilterModel instead of this.
key can be a column ID or a Column object. |
Gets the current state of all the column filters. Used for saving filter state. |
Sets the state of all the column filters. Provide it with what you get from getFilterModel() to restore filter state.
If inferring cell data types, and row data is initially empty or yet to be set,
the filter model will be applied asynchronously after row data is added.
To always perform this synchronously, set cellDataType = false on the default column definition,
or provide cell data types for every column. |
Gets the current filter model for the specified column.
Will return null if no active filter. |
Sets the filter model for the specified column.
Setting a model of null will reset the filter (make inactive).
Must wait on the response before calling api.onFilterChanged(). |
Informs the grid that a filter has changed. This is typically called after a filter change through one of the filter APIs. |
Destroys a filter. Useful to force a particular filter to be created from scratch again. |
Get the state of the Advanced Filter. Used for saving Advanced Filter state |
Set the state of the Advanced Filter. Used for restoring Advanced Filter state |
Open the Advanced Filter Builder dialog (if enabled). |
Closes the Advanced Filter Builder dialog (if enabled).
Un-applied changes are discarded. |
Grid Options
Returns the grid option value for a provided key. |
Updates a single gridOption to the new value provided. (Cannot be used on Initial properties.)
If updating multiple options, it is recommended to instead use api.updateGridOptions() which batches update logic. |
Updates the provided subset of gridOptions with the provided values. (Cannot be used on Initial properties.) |
Integrated Charts
See Integrated Charts for more information.
Used to programmatically create charts from a range. |
Used to programmatically create pivot charts from a grid. |
Used to programmatically create cross filter charts from a range. |
Used to programmatically update a chart. |
Returns the ChartRef using the supplied chartId. |
Returns a list of models with information about the charts that are currently rendered from the grid. |
Restores a chart using the ChartModel that was previously obtained from getChartModels(). |
Returns a base64-encoded image data URL for the referenced chartId. |
Starts a browser-based image download for the referenced chartId. |
Open the Chart Tool Panel. |
Close the Chart Tool Panel. |
Keyboard Navigation
See Keyboard Navigation for more information.
Returns the focused cell (or the last focused cell if the grid lost focus). |
Sets the focus to the specified cell. rowPinned can be either 'top', 'bottom' or null (for not pinned). |
Clears the focused cell. |
Navigates the grid focus to the next cell, as if tabbing. |
Navigates the grid focus to the previous cell, as if shift-tabbing. |
Sets the focus to the specified header. If floatingFilter is true, the Column's floatingFilter element will be focused. |
Master Detail
See Master Detail for more information.
Returns the DetailGridInfo corresponding to the supplied detailGridId. |
Iterates through each DetailGridInfo in the grid and calls the supplied callback on each. |
Register a detail grid with the master grid when it is created. |
Unregister a detail grid from the master grid when it is destroyed. |
Miscellaneous
Get the current state of the grid. Can be used in conjunction with the initialState grid option to save and restore grid state. |
Gets the cell value for the given column and rowNode (row). Will return the cell value or the formatted value depending on the value of params.useFormatter. |
Expire the value cache. |
Will destroy the grid and release resources. If you are using a framework you do not need to call this, as the grid links in with the framework 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. |
Returns true if the grid has been destroyed. |
Sets an ARIA property in the grid panel (element with role="grid"), and removes an ARIA property when the value is null.Example: api.setGridAriaProperty('label', 'my grid') will set aria-label="my grid".api.setGridAriaProperty('label', null) will remove the aria-label attribute from the grid element. |
Returns the gridId for the current grid as specified via the gridOptions property gridId or the auto assigned grid id if none was provided. |
Returns true when there are no more animation frames left to process. |
Overlays
See Overlays for more information.
Show the no-rows overlay. If suppressNoRowsOverlay is set, or if loading is true, this will not do anything. |
Hide the no-rows overlay if it is showing. |
Pagination
See Row Pagination for more information.
Returns true when the last page is known; this will always be the case if you are using the Client-Side Row Model for pagination. Returns false when the last page is not known; this only happens when using Infinite Row Model. |
Returns how many rows are being shown per page. |
Returns the 0-based index of the page which is showing. |
Returns the total number of pages. |
Returns the total number of pageable rows, as impacted by gridOptions.paginateChildRows: true.
It is recommended to instead use gridApi.getDisplayedRowCount() if not using pagination, or if gridOption.paginateChildRows=true. |
Goes to the specified page. If the page requested doesn't exist, it will go to the last page. |
Navigates to the next page. |
Navigates to the previous page. |
Navigates to the first page. |
Navigates to the last page. |
Refresh
See View Refresh for more information.
Performs change detection on all cells, refreshing cells where required. |
Remove row(s) from the DOM and recreate them again from scratch. |
Redraws the header. Useful if a column name changes, or something else that changes how the column header is displayed. |
Flash rows, columns or individual cells. |
Rendering
Retrieve rendered nodes. Due to virtualisation this will contain only the current visible rows and those in the buffer. |
Returns the list of active cell renderer instances. |
Gets the sizes that various UI elements will be rendered at with the current theme.
If you override the row or header height using gridOptions, the override value you provided will be returned. |
Tells the grid to recalculate the row heights. |
Tells the grid a row height has changed. To be used after calling rowNode.setRowHeight(newHeight). |
Row Aggregation
See Aggregation for more information
Get a list of the existing value columns. |
Add the given list of columns to the existing set of value columns. |
Remove the given list of columns from the existing set of value columns. |
Set the value columns to the provided list of columns. |
Sets the agg function for a column. aggFunc can be one of the built-in aggregations or a custom aggregation by name or direct function. |
Add aggregations function with the specified keys. |
Clears all aggregation functions (including those provided by the grid). |
Row Displayed
Returns the displayed RowNode at the given index. |
Returns the total number of displayed rows. |
Get the index of the first displayed row due to scrolling (includes invisible rendered rows in the buffer). |
Get the index of the last displayed row due to scrolling (includes invisible rendered rows in the buffer). |
Row Drag and Drop
See Row Dragging for more information.
Adds a drop zone outside of the grid where rows can be dropped. |
Removes an external drop zone added by addRowDropZone. |
Returns the RowDropZoneParams to be used by another grid's addRowDropZone method. |
Row Expand and Collapse
See Row Grouping or Tree Data for more information
Expand all groups. |
Collapse all groups. |
Expand or collapse a specific row node, optionally expanding/collapsing all of its parent nodes.
By default rows are expanded asynchronously for best performance. Set forceSync: true if you need to interact with the expanded row immediately after this function. |
Informs the grid that row group expanded state has changed and it needs to rerender the group nodes.
Typically called after updating the row node expanded state explicitly, i.e rowNode.expanded = false,
across multiple groups and you want to update the grid view in a single rerender instead of on every group change. |
Row Grouping
See Row Grouping for more information.
Get row group columns. |
Set the row group columns. |
Add columns to the row groups. |
Remove columns from the row groups. |
Move the column to a new position in the row grouping order. |
Row Nodes
Returns the row node with the given ID.
The row node ID is the one you provide from the callback getRowId(params),
otherwise the ID is a number (cast as string) auto-generated by the grid when
the row data is set. |
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 using the Infinite Row Model, then this gets called for each page loaded in the page cache. |
Similar to forEachNode, except skips any filtered out data. |
Similar to forEachNodeAfterFilter, except the callbacks are called in the order the rows are displayed in the grid. |
Similar to forEachNode, except lists all the leaf nodes.
This effectively goes through all the data that you provided to the grid before the grid performed any grouping.
If using tree data, goes through all the nodes for the data you provided, including nodes that have children,
but excluding groups the grid created where gaps were missing in the hierarchy. |
Row Pinning
See Row Pinning for more information.
Gets the number of top pinned rows. |
Gets the number of bottom pinned rows. |
Gets the top pinned row with the specified index. |
Gets the bottom pinned row with the specified index. |
Row Pivoting
See Pivot for more information
Returns whether pivot mode is currently active. |
Get the columns which the grid is pivoting on. |
Set the columns for the grid to pivot on. |
Add columns for the grid to pivot on. |
Stops the grid from pivoting on the provided columns. |
Returns the pivot result column for the given pivotKeys and valueColId. |
Set explicit pivot column definitions yourself. Used for advanced use cases only. |
Returns the grid's pivot result columns. |
RowModel: Client-Side
Update row data. Pass a transaction object with lists for add, remove and update. |
Same as applyTransaction except executes asynchronously for efficiency. |
Executes any remaining asynchronous grid transactions, if any are waiting to be executed. |
Refresh the Client-Side Row Model, executing the grouping, filtering and sorting again.
Optionally provide the step you wish the refresh to apply from. Defaults to everything. |
Returns true if the Client-Side row model has no rows. It is not impacted by filtering and does not include pinned rows. |
RowModel: Infinite
See Infinite Row Model for more information.
Marks all the currently loaded blocks in the cache for reload.
If you have 10 blocks in the cache, all 10 will be marked for reload.
The old data will continue to be displayed until the new data is loaded. |
Purges the cache.
The grid is then told to refresh. Only the blocks required to display the current data on screen are fetched (typically no more than 2).
The grid will display nothing while the new blocks are loaded.
Use this to immediately remove the old data from the user. |
Returns false if grid allows for scrolling past the last row to load more rows, thus providing infinite scroll. |
Sets the rowCount and maxRowFound properties.
The second parameter, maxRowFound, is optional and if left out, only rowCount is set.
Set rowCount to adjust the height of the vertical scroll.
Set maxRowFound to enable / disable searching for more rows.
Use this method if you add or remove rows into the dataset and need to reset the number of rows or instruct the grid that the entire row count is no longer known. |
Returns an object representing the state of the cache. This is useful for debugging and understanding how the cache is working. |
RowModel: Server-Side
See Server-Side Row Model for more information.
Sets the rowCount and maxRowFound properties.
The second parameter, maxRowFound, is optional and if left out, only rowCount is set.
Set rowCount to adjust the height of the vertical scroll.
Set maxRowFound to enable / disable searching for more rows.
Use this method if you add or remove rows into the dataset and need to reset the number of rows or instruct the grid that the entire row count is no longer known. |
Refresh a server-side store level.
If you pass no parameters, then the top level store is refreshed.
To refresh a child level, pass in the string of keys to get to the desired level.
Once the store refresh is complete, the storeRefreshed event is fired. |
Returns info on all server side group levels. |
Gets all failed server side loads to retry. |
Apply transactions to the server side row model. |
Batch apply transactions to the server side row model. |
Applies row data to a server side store.
New rows will overwrite rows at the same index in the same way as if provided by a datasource success callback. |
Returns an object containing rules matching the selected rows in the SSRM.
If rowSelection.groupSelects is 'self' the returned object will be flat, and will conform to IServerSideSelectionState.
If rowSelection.groupSelects is 'descendants' or 'filteredDescendants' the returned object will be hierarchical, and will conform to IServerSideGroupSelectionState. |
Set the rules matching the selected rows in the SSRM.
If rowSelection.groupSelects is 'self' the param will be flat, and should conform to IServerSideSelectionState.
If rowSelection.groupSelects is 'descendants' or 'filteredDescendants' the param will be hierarchical, and should conform to IServerSideGroupSelectionState. |
Returns an object representing the state of the cache. This is useful for debugging and understanding how the cache is working. |
Returns false if grid allows for scrolling past the last row to load more rows, thus providing infinite scroll. |
Scrolling
Vertically scrolls the grid until the provided row index is inside the visible viewport.
If a position is provided, the grid will attempt to scroll until the row is at the given position within the viewport.
This will have no effect before the firstDataRendered event has fired. |
Vertically scrolls the grid until the provided row (or a row matching the provided comparator) is inside the visible viewport.
If a position is provided, the grid will attempt to scroll until the row is at the given position within the viewport.
This will have no effect before the firstDataRendered event has fired. |
Ensures the column is visible by scrolling the table if needed.
This will have no effect before the firstDataRendered event has fired. |
Returns an object with two properties: left: The left pixel position of the current scroll in the grid right: The right pixel position of the current scroll in the grid |
Returns an object with two properties: top: The top pixel position of the current scroll in the grid bottom: The bottom pixel position of the current scroll in the grid |
Selection
Select all rows. By default this ignores filtering, expansion and pagination settings. Pass the appropriate select all mode as an
argument in order to select only rows that satisfy the filter, or those rows on the current page. |
Clear all row selections. By default this ignores filtering, expansion and pagination settings. Pass the appropriate select all mode as an
argument in order to select only rows that satisfy the filter, or those rows on the current page. |
Returns an unsorted 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. |
Returns an unsorted list of selected rows (i.e. row data that you provided). |
Set all of the provided nodes selection state to the provided value. |
Returns a list of all selected nodes at 'best cost', a feature to be used with groups / trees.
If a group has all its 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. |
Returns the list of selected cell ranges.
The start is the first cell the user clicked on and the end is the cell where the user stopped dragging.
Do not assume that the start cell's index is numerically before the end cell, as the user could have dragged up. |
Adds the provided cell range to the selected ranges.
This keeps any previous ranges. If you wish to only have the new range selected, then call clearCellSelection() first. |
Clears the selected cell ranges. |
Sorting
See Row Sorting for more information.
Gets the grid to act as if the sort was changed.
Useful if you update some values and want to get the grid to reorder them according to the new values. |
Undo / Redo
See Undo/Redo Edits for more information.
Reverts the last cell edit. |
Re-applies the most recently undone cell edit. |
Returns current number of available cell edit undo operations. |
Returns current number of available cell edit redo operations. |