React Data Grid: Grid API
All of these grid methods are available through the api property of GridOptions.
Columns
getColumnDefsFunction | Returns the current column definitions. | |
sizeColumnsToFitFunction | Sets columns to adjust in size to fit the grid horizontally. | |
setColumnDefsFunction | Call to set new column definitions. The grid will redraw all the column headers, and then redraw all of the rows. | |
setAutoGroupColumnDefFunction | Call to set new auto group column definition. The grid will recreate any auto-group columns if present. |
Data
setRowDataFunction | Set row data. | |
applyTransactionFunction | Update row data. Pass a transaction object with lists for add, remove and update. | |
applyTransactionAsyncFunction | Same as applyTransaction except executes asynchronously for efficiency. | |
flushAsyncTransactionsFunction | Executes any remaining asynchronous grid transactions, if any are waiting to be executed. | |
setPinnedTopRowDataFunction | Set the top pinned rows. | |
setPinnedBottomRowDataFunction | Set the bottom pinned rows. | |
getPinnedTopRowCountFunction | Gets the number of top pinned rows. | |
getPinnedBottomRowCountFunction | Gets the number of bottom pinned rows. | |
getPinnedTopRowFunction | Gets the top pinned row with the specified index. | |
getPinnedBottomRowFunction | Gets the top pinned row with the specified index. | |
getModelFunction | 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. | |
refreshClientSideRowModelFunction | Gets the Client-Side Row Model to refresh, executing the grouping, filtering and sorting again. | |
setDatasourceFunction | Set new datasource for Infinite Row Model. | |
setServerSideDatasourceFunction | Set new datasource for Server-Side Row Model. | |
setViewportDatasourceFunction | Set new datasource for Viewport Row Model. |
Accessing Row Nodes
getRowNodeFunction | Returns the row node with the given ID. The row node ID is the one you provide from the callback getRowNodeId(data), otherwise the ID is a number auto-generated by the grid when the row data is set. | |
forEachNodeFunction | 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. | |
forEachNodeAfterFilterFunction | Similar to forEachNode, except skips any filtered out data. | |
forEachNodeAfterFilterAndSortFunction | Similar to forEachNodeAfterFilter, except the callbacks are called in the order the rows are displayed in the grid. | |
forEachLeafNodeFunction | 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. |
Displayed Rows
getDisplayedRowAtIndexFunction | Returns the displayed RowNode at the given index. | |
getDisplayedRowCountFunction | Returns the total number of displayed rows. | |
getFirstDisplayedRowFunction | Get the index of the first displayed row due to scrolling (includes invisible rendered rows in the buffer). | |
getLastDisplayedRowFunction | Get the index of the last displayed row due to scrolling (includes invisible rendered rows in the buffer). |
Master Detail
getDetailGridInfoFunction | Returns the DetailGridInfo corresponding to the supplied detailGridId. | |
forEachDetailGridInfoFunction | Iterates through each DetailGridInfo in the grid and calls the supplied callback on each. See Accessing Detail Grids. |
Selection
selectAllFunction | Select all rows (even rows that are not visible due to grouping being enabled and their groups not expanded). | |
deselectAllFunction | Clear all row selections. | |
selectAllFilteredFunction | Select all filtered rows. | |
deselectAllFilteredFunction | Clear all filtered selections. | |
getSelectedNodesFunction | 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. | |
getSelectedRowsFunction | Returns a list of selected rows (i.e. row data that you provided). | |
getBestCostNodeSelectionFunction | 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. | |
getCellRangesFunction | Returns the list of selected cell ranges. | |
addCellRangeFunction | Adds to the selected range. | |
clearRangeSelectionFunction | Clears the selected range. | |
setSuppressRowClickSelectionFunction | Sets the suppressRowClickSelection property. |
Refresh
refreshCellsFunction | Performs change detection on all cells, refreshing cells where required. See Refresh Cells. | |
redrawRowsFunction | Remove a row from the DOM and recreate it again from scratch. See Redraw Rows. | |
refreshHeaderFunction | Redraws the header. Useful if a column name changes, or something else that changes how the column header is displayed. | |
flashCellsFunction | Flash rows, columns or individual cells. See Flashing Cells. |
Sort and Filter
setQuickFilterFunction | Pass a quick filter text into the grid for filtering. If using Angular, the grid watches the quickFilterText attribute of the gridOptions. If you won't want to use quickFilterText (i.e. if not using AngularJS) then you can call this method instead to apply a quick filter. | |
isQuickFilterPresentFunction | Returns true if the quick filter is set, otherwise false. | |
isColumnFilterPresentFunction | Returns true if any column filter is set, otherwise false. | |
isAnyFilterPresentFunction | Returns true if any filter is set. This includes quick filter, advanced filter or external filter. | |
getFilterInstanceFunction | Returns the filter component instance for a column. col can be a string field name or a ColDef object (matches on object reference, useful if field names are not unique). For filters that are created asynchronously including React 16+ components, calling this method will return null if the filter has not already been created. If your app uses asynchronous components, use the optional callback function which will be invoked with the filter instance when it is available. | |
getFilterModelFunction | Gets the current state of all the advanced filters. Used for saving filter state. | |
setFilterModelFunction | Sets the state of all the advanced filters. Provide it with what you get from getFilterModel() to restore filter state. | |
onFilterChangedFunction | Informs the grid that a filter has changed. This is typically called after a filter change through one of the filter APIs. | |
destroyFilterFunction | Destroys a filter. Useful to force a particular filter to be created from scratch again. | |
onSortChangedFunction | 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. |
Navigation
getFocusedCellFunction | Returns the focused cell (or the last focused cell if the grid lost focus). | |
setFocusedCellFunction | Sets the focus to the specified cell. | |
clearFocusedCellFunction | Clears the focused cell. | |
tabToNextCellFunction | Navigates the grid focus to the next cell, as if tabbing. | |
tabToPreviousCellFunction | Navigates the grid focus to the previous cell, as if shift-tabbing. |
Editing
stopEditingFunction | If a cell is editing, it stops the editing. Pass true if you want to cancel the editing (i.e. don't accept changes). See Editing API. | |
startEditingCellFunction | Start editing a particular cell. See Editing API. | |
getEditingCellsFunction | If the grid is editing, returns back details of the editing cell(s). See Editing API. |
Export
exportDataAsCsvFunction | Downloads a CSV export of the grid's data. | |
getDataAsCsvFunction | Similar to exportDataAsCsv, except returns the result as a string rather than download it. | |
exportDataAsExcelFunction | Downloads an Excel export of the grid's data. | |
getDataAsExcelFunction | Similar to exportDataAsExcel, except instead of downloading a file, it will return a Blob to be processed by the user. | |
getSheetDataForExcelFunction | 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(). | |
exportMultipleSheetsAsExcelFunction | Downloads an Excel export of multiple sheets in one file. | |
getMultipleSheetsAsExcelFunction | Similar to exportMultipleSheetsAsExcel, except instead of downloading a file, it will return a Blob to be processed by the user. |
Events
addEventListenerFunction | Add an event listener for the specified eventType. Works similar to addEventListener for a browser DOM element. | |
addGlobalListenerFunction | Add an event listener for all event types coming from the grid. | |
removeEventListenerFunction | Remove an event listener. | |
removeGlobalListenerFunction | Remove a global event listener. |
Row Groups
expandAllFunction | Expand all groups. | |
collapseAllFunction | Collapse all groups. | |
setRowNodeExpandedFunction | Expand or collapse a specific row node. | |
onGroupExpandedOrCollapsedFunction | 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 (i.e. expand or collapse the group visually). |
Row Drag
setSuppressRowDragFunction | Sets the suppressRowDrag property. See Suppress Row Drag. | |
setSuppressMoveWhenRowDraggingFunction | Sets the suppressMoveWhenRowDragging property. See Suppress Move When Dragging. | |
addRowDropZoneFunction | Adds a drop zone outside of the grid where rows can be dropped. See Row Dragging to an External DropZone. | |
removeRowDropZoneFunction | Removes an external drop zone added by addRowDropZone. See Row Dragging to an External DropZone. | |
getRowDropZoneParamsFunction | Returns the RowDropZoneParams to be used by another grid's addRowDropZone method. See Row Dragging Between Grids. |
Rendering
getRenderedNodesFunction | Retrieve rendered nodes. Due to virtualisation this will contain only the current visible rows and those in the buffer. | |
getCellRendererInstancesFunction | Returns the list of active Cell Renderer Instances. | |
getCellEditorInstancesFunction | Returns the list of active Cell Editor Instances. | |
getSizesForCurrentThemeFunction | 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. |
Scrolling
setAlwaysShowHorizontalScrollFunction | If true, the horizontal scrollbar will always be present, even if not required. Otherwise, it will only be displayed when necessary. | |
setAlwaysShowVerticalScrollFunction | If true, the vertical scrollbar will always be present, even if not required. Otherwise it will only be displayed when necessary. | |
ensureIndexVisibleFunction | Ensures the row index is visible by vertically scrolling the grid. If a position of 'top', 'middle' or 'bottom' is supplied, the grid will scroll the grid to place the row at the top, middle or bottom respectively. Otherwise, the grid will do the minimum scrolling possible to show the row, i.e. if the grid needs to scroll up then it will scroll so that the row is at the top, if the grid needs to scroll down then it will scroll so that the row is at the bottom, if the row is already in view then the grid will do nothing. | |
ensureNodeVisibleFunction | Ensures a row node is visible, scrolling the grid if needed. Provide either a) the node, b) the data object, or c) a comparator function (that takes the node as a parameter, and returns true for match or false for no match). | |
ensureColumnVisibleFunction | Ensures the column is visible, scrolling the table if needed. | |
getHorizontalPixelRangeFunction | Returns an object with two properties:
| |
getVerticalPixelRangeFunction | Returns an object with two properties:
|
Infinite Scrolling
refreshInfiniteCacheFunction | 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. | |
purgeInfiniteCacheFunction | 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. | |
getInfiniteRowCountFunction | The row count defines how many rows the grid allows scrolling to. | |
isLastRowIndexKnownFunction | Returns true if grid allows for scrolling past the last row to load more rows, thus providing infinite scroll. | |
setRowCountFunction | Sets the rowCount and lastRowIndexKnown properties. The second parameter, lastRowIndexKnown, is optional and if left out, only rowCount is set. Set rowCount to adjust the height of the vertical scroll. Set lastRowIndexKnown 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 put the data back into 'look for data' mode. | |
getCacheBlockStateFunction | Returns an object representing the state of the cache. This is useful for debugging and understanding how the cache is working. |
Overlays
showLoadingOverlayFunction | Show the 'loading' overlay. | |
showNoRowsOverlayFunction | Show the 'no rows' overlay. | |
hideOverlayFunction | Hides the overlay if showing. |
Clipboard
copySelectedRangeToClipboardFunction | Copies the selected ranges to the clipboard. | |
copySelectedRangeDownFunction | Copies the selected range down, similar to Ctrl+D in Excel. | |
copySelectedRowsToClipboardFunction | 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 want just specific columns. |
Pagination
paginationIsLastPageFoundFunction | 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. | |
paginationGetPageSizeFunction | Returns how many rows are being shown per page. | |
paginationSetPageSizeFunction | Sets the paginationPageSize, then re-paginates the grid so the changes are applied immediately. | |
paginationGetCurrentPageFunction | Returns the 0-based index of the page which is showing. | |
paginationGetTotalPagesFunction | Returns the total number of pages. Returns null if paginationIsLastPageFound() === false. | |
paginationGetRowCountFunction | The total number of rows. Returns null if paginationIsLastPageFound() === false. | |
paginationGoToPageFunction | Goes to the specified page. If the page requested doesn't exist, it will go to the last page. | |
paginationGoToNextPageFunction | Navigates to the next page. | |
paginationGoToPreviousPageFunction | Navigates to the previous page. | |
paginationGoToFirstPageFunction | Navigates to the first page. | |
paginationGoToLastPageFunction | Navigates to the last page. |
Headers
setHeaderHeightFunction | Sets the height in pixels for the row containing the column label header. | |
setGroupHeaderHeightFunction | Sets the height in pixels for the rows containing header column groups. | |
setFloatingFiltersHeightFunction | Sets the height in pixels for the row containing the floating filters. | |
setPivotHeaderHeightFunction | Sets the height in pixels for the row containing the columns when in pivot mode. | |
setPivotGroupHeaderHeightFunction | Sets the height in pixels for the row containing header column groups when in pivot mode. |
Undo / Redo
See Undo/Redo Edits for more information.
undoCellEditingFunction | Reverts the last cell edit. | |
redoCellEditingFunction | Re-applies the most recently undone cell edit. | |
getCurrentUndoSizeFunction | Returns current number of available cell edit undo operations. | |
getCurrentRedoSizeFunction | Returns current number of available cell edit redo operations. |
Charts
createRangeChartFunction | Used to programmatically create charts from a range. See Range Chart API. | |
createPivotChartFunction | Used to programmatically create pivot charts from a grid. See Pivot Chart API. | |
createCrossFilterChartFunction | Used to programmatically create cross filter charts from a range. See Cross-filter API. | |
getChartRefFunction | Returns the ChartRef using the supplied chartId. | |
getChartModelsFunction | Returns a list of models with information about the charts that are currently rendered from the grid. See Saving and Restoring Charts. | |
restoreChartFunction | Restores a chart using the ChartModel that was previously obtained from getChartModels(). See Saving and Restoring Charts. | |
getChartImageDataURLFunction | Returns a string containing the requested data URL which contains a representation of the chart image. See Downloading Chart Image. |
Miscellaneous
setPopupParentFunction | DOM element to use as the popup parent for grid popups (context menu, column menu etc). | |
addRenderedRowListenerFunction | 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. Currently supports only one event, virtualRowRemoved; listen for this event if your cellRenderer needs to do cleanup when the row no longer exists. | |
isToolPanelShowingFunction | Returns true if the tool panel is showing, otherwise false. | |
getToolPanelInstanceFunction | Gets the tool panel instance corresponding to the supplied id. See Expand / Collapse Column Groups. | |
getValueFunction | Gets the value for a column for a particular rowNode (row). This is useful if you want the raw value of a cell e.g. if implementing your own CSV export. | |
destroyFunction | 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. | |
showColumnMenuAfterButtonClickFunction | Shows the column menu after and positions it relative to the provided button element. Use in conjunction with your own header template. | |
showColumnMenuAfterMouseClickFunction | Shows the column menu after and positions it relative to the mouse event. Use in conjunction with your own header template. | |
resetRowHeightsFunction | Tells the grid to recalculate the row heights. | |
onRowHeightChangedFunction | Tells the grid a row height has changed. To be used after calling rowNode.setRowHeight(newHeight). | |
addAggFuncFunction | Add an aggregation function with the specified key. | |
addAggFuncsFunction | Add aggregations function with the specified keys. | |
clearAggFuncsFunction | Clears all aggregation functions (including those provided by the grid). | |
hidePopupMenuFunction | Hides any visible context menu or column menu. | |
setEnableCellTextSelectionFunction | Sets the enableCellTextSelection property. See Cell Text Selection. | |
isAnimationFrameQueueEmptyFunction | Returns true when there are no more animation frames left to process. | |
refreshServerSideStoreFunction | Refresh a server-side store. See Purging Groups. | |
getServerSideStoreStateFunction | Returns info on all server side stores. See Store State. | |
retryServerSideLoadsFunction | Gets all failed server side loads to retry. See Retry Loads. | |
setFillHandleDirectionFunction | Sets the preferred direction for the selection fill handle. See Fill Handle. | |
setGridAriaPropertyFunction | 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. |