Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

Angular Data Grid: Grid API

All of these grid methods are available through the api property of GridOptions.

Columns

getColumnDefs
Function
Returns the current column definitions.
function getColumnDefs(): (ColDef | ColGroupDef)[];
sizeColumnsToFit
Function
Sets columns to adjust in size to fit the grid horizontally.
function sizeColumnsToFit(): void;
setColumnDefs
Function
Call to set new column definitions. The grid will redraw all the column headers, and then redraw all of the rows.
function setColumnDefs(
    colDefs: (ColDef | ColGroupDef)[],
    source: ColumnEventType = "api"
): void;

type ColumnEventType = 
      "sizeColumnsToFit" 
    | "autosizeColumns" 
    | "alignedGridChanged" 
    | "filterChanged" 
    | "filterDestroyed" 
    | "gridOptionsChanged" 
    | "gridInitializing" 
    | "toolPanelDragAndDrop" 
    | "toolPanelUi" 
    | "uiColumnMoved" 
    | "uiColumnResized" 
    | "uiColumnDragged" 
    | "uiColumnExpanded" 
    | "uiColumnSorted" 
    | "contextMenu" 
    | "columnMenu" 
    | "rowModelUpdated" 
    | "api" 
    | "flex" 
    | "pivotChart"
setAutoGroupColumnDef
Function
Call to set new auto group column definition. The grid will recreate any auto-group columns if present.
function setAutoGroupColumnDef(
    colDef: ColDef,
    source: ColumnEventType = "api"
): void;

type ColumnEventType = 
      "sizeColumnsToFit" 
    | "autosizeColumns" 
    | "alignedGridChanged" 
    | "filterChanged" 
    | "filterDestroyed" 
    | "gridOptionsChanged" 
    | "gridInitializing" 
    | "toolPanelDragAndDrop" 
    | "toolPanelUi" 
    | "uiColumnMoved" 
    | "uiColumnResized" 
    | "uiColumnDragged" 
    | "uiColumnExpanded" 
    | "uiColumnSorted" 
    | "contextMenu" 
    | "columnMenu" 
    | "rowModelUpdated" 
    | "api" 
    | "flex" 
    | "pivotChart"

Data

setRowData
Function
Set row data.
function setRowData(rowData: any[]): void;
applyTransaction
Function
Update row data. Pass a transaction object with lists for add, remove and update.
function applyTransaction(
    rowDataTransaction: RowDataTransaction
): RowNodeTransaction | null | undefined;

interface RowDataTransaction {
  addIndex?: number | null;
  add?: any[] | null;
  remove?: any[] | null;
  update?: any[] | null;
}

interface RowNodeTransaction {
  add: RowNode[];
  remove: RowNode[];
  update: RowNode[];
}
applyTransactionAsync
Function
Same as applyTransaction except executes asynchronously for efficiency.
function applyTransactionAsync(
    rowDataTransaction: RowDataTransaction,
    callback: (res: RowNodeTransaction) => void
): void;

interface RowDataTransaction {
  addIndex?: number | null;
  add?: any[] | null;
  remove?: any[] | null;
  update?: any[] | null;
}

interface RowNodeTransaction {
  add: RowNode[];
  remove: RowNode[];
  update: RowNode[];
}
flushAsyncTransactions
Function
Executes any remaining asynchronous grid transactions, if any are waiting to be executed.
function flushAsyncTransactions(): void;
setPinnedTopRowData
Function
Set the top pinned rows.
function setPinnedTopRowData(rows: any[]): void;
setPinnedBottomRowData
Function
Set the bottom pinned rows.
function setPinnedBottomRowData(rows: any[]): void;
getPinnedTopRowCount
Function
Gets the number of top pinned rows.
function getPinnedTopRowCount(): number;
getPinnedBottomRowCount
Function
Gets the number of bottom pinned rows.
function getPinnedBottomRowCount(): number;
getPinnedTopRow
Function
Gets the top pinned row with the specified index.
function getPinnedTopRow(index: number): RowNode | undefined;
getPinnedBottomRow
Function
Gets the top pinned row with the specified index.
function getPinnedBottomRow(index: number): RowNode | undefined;
getModel
Function
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.
function getModel(): IRowModel;

interface IRowModel {
  // Returns the rowNode at the given index. 
  getRow(index: number): RowNode | undefined;
  // Returns the rowNode for given id. 
  getRowNode(id: string): RowNode | undefined;
  // This is legacy, not used by AG Grid, but keeping for backward compatibility 
  getRowCount(): number;
  getTopLevelRowCount(): number;
  getTopLevelRowDisplayedIndex(topLevelIndex: number): number;
  // Returns the row index at the given pixel 
  getRowIndexAtPixel(pixel: number): number;
  // Returns true if the provided rowNode is in the list of rows to render 
  isRowPresent(rowNode: RowNode): boolean;
  // Returns row top and bottom for a given row 
  getRowBounds(index: number): RowBounds | null;
  // Returns true if this model has no rows, regardless of model filter. EG if rows present, but filtered
  // out, this still returns false. If it returns true, then the grid shows the 'no rows' overlay - but we
  // don't show that overlay if the rows are just filtered out. 
  isEmpty(): boolean;
  // Returns true if no rows (either no rows at all, or the rows are filtered out). This is what the grid
  // uses to know if there are rows to render or not. 
  isRowsToRender(): boolean;
  // Returns all rows in range that should be selected. If there is a gap in range (non ClientSideRowModel) then
  // then no rows should be returned 
  getNodesInRangeForSelection(first: RowNode, last: RowNode | null): RowNode[];
  // Iterate through each node. What this does depends on the model type. For clientSide, goes through
  // all nodes. For serverSide, goes through what's loaded in memory. 
  forEachNode(callback: (rowNode: RowNode, index: number) => void): void;
  // The base class returns the type. We use this instead of 'instanceof' as the client might provide
  // their own implementation of the models in the future. 
  getType(): string;
  // It tells us if this row model knows about the last row that it can produce. This is used by the
  // PaginationPanel, if last row is not found, then the 'last' button is disabled and the last page is
  // not shown. This is always true for ClientSideRowModel. It toggles for InfiniteRowModel. 
  isLastRowIndexKnown(): boolean;
  // Used by CSRM only - is makes sure there are now estimated row heights within the range. 
  ensureRowHeightsValid(startPixel: number, endPixel: number, startLimitIndex: number, endLimitIndex: number): boolean;
  // Gets called after grid is initialised. What happens depends on row model. Client Side will take rowData
  // from gridOptions, the other row models will start calling their datasources. 
  start(): void;
}
refreshClientSideRowModel
Function
Gets the Client-Side Row Model to refresh, executing the grouping, filtering and sorting again.
function refreshClientSideRowModel(step: string): any;
setDatasource
Function
Set new datasource for Infinite Row Model.
function setDatasource(
    datasource: IDatasource
): void;

interface IDatasource {
  // If you know up front how many rows are in the dataset, set it here. Otherwise leave blank. 
  rowCount?: number;
  // Callback the grid calls that you implement to fetch rows from the server. See below for params. 
  getRows(params: IGetRowsParams): void;
  destroy?(): void;
}
setServerSideDatasource
Function
Set new datasource for Server-Side Row Model.
function setServerSideDatasource(
    datasource: IServerSideDatasource
): void;

interface IServerSideDatasource {
  getRows(params: IServerSideGetRowsParams): void;
  destroy?(): void;
}
setViewportDatasource
Function
Set new datasource for Viewport Row Model.
function setViewportDatasource(
    viewportDatasource: IViewportDatasource
): void;

interface IViewportDatasource {
  // Gets called exactly once before viewPort is used. Passes methods to be used to tell viewPort of data loads / changes. 
  init(params: IViewportDatasourceParams): void;
  // Tell the viewport what the scroll position of the grid is, so it knows what rows it has to get 
  setViewportRange(firstRow: number, lastRow: number): void;
  // Gets called once when viewPort is no longer used. If you need to do any cleanup, do it here. 
  destroy?(): void;
}

Accessing Row Nodes

getRowNode
Function
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.
function getRowNode(id: string): RowNode | undefined;
forEachNode
Function
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.
function forEachNode(
    callback: (rowNode: RowNode, index: number) => void
): void;
forEachNodeAfterFilter
Function
Similar to forEachNode, except skips any filtered out data.
function forEachNodeAfterFilter(
    callback: (rowNode: RowNode, index: number) => void
): void;
forEachNodeAfterFilterAndSort
Function
Similar to forEachNodeAfterFilter, except the callbacks are called in the order the rows are displayed in the grid.
function forEachNodeAfterFilterAndSort(
    callback: (rowNode: RowNode, index: number) => void
): void;
forEachLeafNode
Function
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.
function forEachLeafNode(
    callback: (rowNode: RowNode) => void
): void;

Displayed Rows

getDisplayedRowAtIndex
Function
Returns the displayed RowNode at the given index.
function getDisplayedRowAtIndex(index: number): RowNode | undefined;
getDisplayedRowCount
Function
Returns the total number of displayed rows.
function getDisplayedRowCount(): number;
getFirstDisplayedRow
Function
Get the index of the first displayed row due to scrolling (includes invisible rendered rows in the buffer).
function getFirstDisplayedRow(): number;
getLastDisplayedRow
Function
Get the index of the last displayed row due to scrolling (includes invisible rendered rows in the buffer).
function getLastDisplayedRow(): number;

Master Detail

getDetailGridInfo
Function
Returns the DetailGridInfo corresponding to the supplied detailGridId.
function getDetailGridInfo(id: string): DetailGridInfo | undefined;

interface DetailGridInfo {
  api?: GridApi;
  columnApi?: ColumnApi;
  id: string;
}
forEachDetailGridInfo
Function
Iterates through each DetailGridInfo in the grid and calls the supplied callback on each. See Accessing Detail Grids.
function forEachDetailGridInfo(
    callback: (gridInfo: DetailGridInfo, index: number) => void
): void;

interface DetailGridInfo {
  api?: GridApi;
  columnApi?: ColumnApi;
  id: string;
}

Selection

selectAll
Function
Select all rows (even rows that are not visible due to grouping being enabled and their groups not expanded).
function selectAll(): void;
deselectAll
Function
Clear all row selections.
function deselectAll(): void;
selectAllFiltered
Function
Select all filtered rows.
function selectAllFiltered(): void;
deselectAllFiltered
Function
Clear all filtered selections.
function deselectAllFiltered(): void;
getSelectedNodes
Function
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.
function getSelectedNodes(): RowNode[];
getSelectedRows
Function
Returns a list of selected rows (i.e. row data that you provided).
function getSelectedRows(): any[];
getBestCostNodeSelection
Function
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.
function getBestCostNodeSelection(): RowNode[] | undefined;
getCellRanges
Function
Returns the list of selected cell ranges.
function getCellRanges(): CellRange[] | null;

interface CellRange {
  id?: string;
  type?: CellRangeType;
  startRow?: RowPosition;
  endRow?: RowPosition;
  columns: Column[];
  startColumn: Column;
}
addCellRange
Function
Adds to the selected range.
function addCellRange(
    params: CellRangeParams
): void;

interface CellRangeParams {
  rowStartIndex: number | null;
  rowStartPinned?: string | null;
  rowEndIndex: number | null;
  rowEndPinned?: string | null;
  columnStart?: string | Column;
  columnEnd?: string | Column;
  columns?: (string | Column)[];
}
clearRangeSelection
Function
Clears the selected range.
function clearRangeSelection(): void;
setSuppressRowClickSelection
Function
Sets the suppressRowClickSelection property.
function setSuppressRowClickSelection(value: boolean): void;

Refresh

refreshCells
Function
Performs change detection on all cells, refreshing cells where required. See Refresh Cells.
function refreshCells(
    params: RefreshCellsParams = {}
): void;

interface RefreshCellsParams {
  rowNodes?: RowNode[];
  columns?: (string | Column)[];
  force?: boolean;
  suppressFlash?: boolean;
}
redrawRows
Function
Remove a row from the DOM and recreate it again from scratch. See Redraw Rows.
function redrawRows(
    params: RedrawRowsParams = {}
): void;

interface RedrawRowsParams {
  rowNodes?: RowNode[];
}
refreshHeader
Function
Redraws the header. Useful if a column name changes, or something else that changes how the column header is displayed.
function refreshHeader(): void;
flashCells
Function
Flash rows, columns or individual cells. See Flashing Cells.
function flashCells(
    params: FlashCellsParams = {}
): void;

interface FlashCellsParams {
  rowNodes?: RowNode[];
  columns?: (string | Column)[];
  flashDelay?: number;
  fadeDelay?: number;
}

Sort and Filter

setQuickFilter
Function
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.
function setQuickFilter(newFilter: any): void;
isQuickFilterPresent
Function
Returns true if the quick filter is set, otherwise false.
function isQuickFilterPresent(): boolean;
isColumnFilterPresent
Function
Returns true if any column filter is set, otherwise false.
function isColumnFilterPresent(): boolean;
isAnyFilterPresent
Function
Returns true if any filter is set. This includes quick filter, advanced filter or external filter.
function isAnyFilterPresent(): boolean;
getFilterInstance
Function
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.
function getFilterInstance(
    key: string | Column,
    callback: (filter: IFilterComp) => void
): IFilterComp | null | undefined;

interface IFilterComp {
  // Return the DOM element of your component, this is what the grid puts into the DOM 
  getGui(): HTMLElement;
  // Gets called once by grid when the component is being removed; if your component needs to do any cleanup, do it here 
  destroy?(): void;
  // A hook to perform any necessary operation just after the GUI for this component has been rendered
  // on the screen.
  // If a parent popup is closed and reopened (e.g. for filters), this method is called each time the component is shown.
  // This is useful for any
  // logic that requires attachment before executing, such as putting focus on a particular DOM
  // element. The params has one callback method 'hidePopup', which you can call at any later
  // point to hide the popup - good if you have an 'Apply' button and you want to hide the popup
  // after it is pressed. 
  afterGuiAttached?(params?: IAfterGuiAttachedParams): void;
  // The init(params) method is called on the component once. See below for details on the parameters. 
  init?(params: IFilterParams): AgPromise<void> | void;
  // This is used to let the grid know if the filter is active or not 
  isFilterActive(): boolean;
  // The grid will ask each active filter, in turn, whether each row in the grid passes. If any
  // filter fails, then the row will be excluded from the final set. The method is provided a
  // params object with attributes node (the rodNode the grid creates that wraps the data) and data
  // (the data object that you provided to the grid for that row). 
  doesFilterPass(params: IDoesFilterPassParams): boolean;
  // Gets the filter state for storing 
  getModel(): any;
  // Restores the filter state. 
  setModel(model: any): void | AgPromise<void>;
  // Gets called when new rows are inserted into the grid. If the filter needs to change its
  // state after rows are loaded, it can do it here. For example the set filters uses this
  // to update the list of available values to select from (e.g. 'Ireland', 'UK' etc for
  // Country filter). To get the list of available values from within this method from the
  // Client Side Row Model, use gridApi.forEachLeafNode(callback). 
  onNewRowsLoaded?(): void;
  // Called whenever any filter is changed. 
  onAnyFilterChanged?(): void;
  // If using React or Angular 2, returns the underlying component instance, so you can call methods
  // on it if you want. 
  getFrameworkComponentInstance?(): any;
  // Optional method used by AG Grid when rendering floating filters and there isn't a floating filter
  // associated for this filter, this will happen if you create a custom filter and NOT a custom floating
  // filter. 
  getModelAsString?(model: any): string;
}

interface IFilterComp {
  // Return the DOM element of your component, this is what the grid puts into the DOM 
  getGui(): HTMLElement;
  // Gets called once by grid when the component is being removed; if your component needs to do any cleanup, do it here 
  destroy?(): void;
  // A hook to perform any necessary operation just after the GUI for this component has been rendered
  // on the screen.
  // If a parent popup is closed and reopened (e.g. for filters), this method is called each time the component is shown.
  // This is useful for any
  // logic that requires attachment before executing, such as putting focus on a particular DOM
  // element. The params has one callback method 'hidePopup', which you can call at any later
  // point to hide the popup - good if you have an 'Apply' button and you want to hide the popup
  // after it is pressed. 
  afterGuiAttached?(params?: IAfterGuiAttachedParams): void;
  // The init(params) method is called on the component once. See below for details on the parameters. 
  init?(params: IFilterParams): AgPromise<void> | void;
  // This is used to let the grid know if the filter is active or not 
  isFilterActive(): boolean;
  // The grid will ask each active filter, in turn, whether each row in the grid passes. If any
  // filter fails, then the row will be excluded from the final set. The method is provided a
  // params object with attributes node (the rodNode the grid creates that wraps the data) and data
  // (the data object that you provided to the grid for that row). 
  doesFilterPass(params: IDoesFilterPassParams): boolean;
  // Gets the filter state for storing 
  getModel(): any;
  // Restores the filter state. 
  setModel(model: any): void | AgPromise<void>;
  // Gets called when new rows are inserted into the grid. If the filter needs to change its
  // state after rows are loaded, it can do it here. For example the set filters uses this
  // to update the list of available values to select from (e.g. 'Ireland', 'UK' etc for
  // Country filter). To get the list of available values from within this method from the
  // Client Side Row Model, use gridApi.forEachLeafNode(callback). 
  onNewRowsLoaded?(): void;
  // Called whenever any filter is changed. 
  onAnyFilterChanged?(): void;
  // If using React or Angular 2, returns the underlying component instance, so you can call methods
  // on it if you want. 
  getFrameworkComponentInstance?(): any;
  // Optional method used by AG Grid when rendering floating filters and there isn't a floating filter
  // associated for this filter, this will happen if you create a custom filter and NOT a custom floating
  // filter. 
  getModelAsString?(model: any): string;
}
getFilterModel
Function
Gets the current state of all the advanced filters. Used for saving filter state.
function getFilterModel(): void;
setFilterModel
Function
Sets the state of all the advanced filters. Provide it with what you get from getFilterModel() to restore filter state.
function setFilterModel(model: any): void;
onFilterChanged
Function
Informs the grid that a filter has changed. This is typically called after a filter change through one of the filter APIs.
function onFilterChanged(): void;
destroyFilter
Function
Destroys a filter. Useful to force a particular filter to be created from scratch again.
function destroyFilter(key: string | Column): void;
onSortChanged
Function
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.
function onSortChanged(): void;

Navigation

getFocusedCell
Function
Returns the focused cell (or the last focused cell if the grid lost focus).
function getFocusedCell(): CellPosition | null;

interface CellPosition {
  // A positive number from 0 to n, where n is the last row the grid is rendering
  // or -1 if you want to navigate to the grid header 
  rowIndex: number;
  // Either 'top', 'bottom' or undefined/null (for not pinned) 
  rowPinned: string | null;
  // The grid column 
  column: Column;
}
setFocusedCell
Function
Sets the focus to the specified cell.
function setFocusedCell(
    rowIndex: number,
    colKey: string | Column,
    floating: string
): void;
clearFocusedCell
Function
Clears the focused cell.
function clearFocusedCell(): void;
tabToNextCell
Function
Navigates the grid focus to the next cell, as if tabbing.
function tabToNextCell(): boolean;
tabToPreviousCell
Function
Navigates the grid focus to the previous cell, as if shift-tabbing.
function tabToPreviousCell(): boolean;

Editing

stopEditing
Function
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.
function stopEditing(
    cancel: boolean = false
): void;
startEditingCell
Function
Start editing a particular cell. See Editing API.
function startEditingCell(
    params: StartEditingCellParams
): void;

interface StartEditingCellParams {
  rowIndex: number;
  colKey: string | Column;
  rowPinned?: string;
  keyPress?: number;
  charPress?: string;
}
getEditingCells
Function
If the grid is editing, returns back details of the editing cell(s). See Editing API.
function getEditingCells(): CellPosition[];

interface CellPosition {
  // A positive number from 0 to n, where n is the last row the grid is rendering
  // or -1 if you want to navigate to the grid header 
  rowIndex: number;
  // Either 'top', 'bottom' or undefined/null (for not pinned) 
  rowPinned: string | null;
  // The grid column 
  column: Column;
}

Export

exportDataAsCsv
Function
Downloads a CSV export of the grid's data.
function exportDataAsCsv(
    params: CsvExportParams
): void;
getDataAsCsv
Function
Similar to exportDataAsCsv, except returns the result as a string rather than download it.
function getDataAsCsv(
    params: CsvExportParams
): string | undefined;
exportDataAsExcel
Function
Downloads an Excel export of the grid's data.
function exportDataAsExcel(
    params: ExcelExportParams
): void;
getDataAsExcel
Function
Similar to exportDataAsExcel, except instead of downloading a file, it will return a Blob to be processed by the user.
function getDataAsExcel(
    params: ExcelExportParams
): string | Blob | undefined;
getSheetDataForExcel
Function
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().
function getSheetDataForExcel(
    params: ExcelExportParams
): string | undefined;
exportMultipleSheetsAsExcel
Function
Downloads an Excel export of multiple sheets in one file.
function exportMultipleSheetsAsExcel(
    params: ExcelExportMultipleSheetParams
): void;

interface ExcelExportMultipleSheetParams {
  author?: string;
  data: string[];
  fileName?: string;
  fontSize?: number;
}
getMultipleSheetsAsExcel
Function
Similar to exportMultipleSheetsAsExcel, except instead of downloading a file, it will return a Blob to be processed by the user.
function getMultipleSheetsAsExcel(
    params: ExcelExportMultipleSheetParams
): Blob | undefined;

interface ExcelExportMultipleSheetParams {
  author?: string;
  data: string[];
  fileName?: string;
  fontSize?: number;
}

Events

addEventListener
Function
Add an event listener for the specified eventType. Works similar to addEventListener for a browser DOM element.
function addEventListener(
    eventType: string,
    listener: Function
): void;
addGlobalListener
Function
Add an event listener for all event types coming from the grid.
function addGlobalListener(listener: Function): void;
removeEventListener
Function
Remove an event listener.
function removeEventListener(
    eventType: string,
    listener: Function
): void;
removeGlobalListener
Function
Remove a global event listener.
function removeGlobalListener(listener: Function): void;

Row Groups

expandAll
Function
Expand all groups.
function expandAll(): void;
collapseAll
Function
Collapse all groups.
function collapseAll(): void;
setRowNodeExpanded
Function
Expand or collapse a specific row node.
function setRowNodeExpanded(
    rowNode: RowNode,
    expanded: boolean
): void;
onGroupExpandedOrCollapsed
Function
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).
function onGroupExpandedOrCollapsed(
    deprecated_refreshFromIndex: any
): void;

Row Drag

setSuppressRowDrag
Function
Sets the suppressRowDrag property. See Suppress Row Drag.
function setSuppressRowDrag(value: boolean): void;
setSuppressMoveWhenRowDragging
Function
Sets the suppressMoveWhenRowDragging property. See Suppress Move When Dragging.
function setSuppressMoveWhenRowDragging(value: boolean): void;
addRowDropZone
Function
Adds a drop zone outside of the grid where rows can be dropped. See Row Dragging to an External DropZone.
function addRowDropZone(
    params: RowDropZoneParams
): void;

interface RowDropZoneParams {
  onDragEnter?: (params: RowDragEnterEvent) => void;
  onDragLeave?: (params: RowDragLeaveEvent) => void;
  onDragging?: (params: RowDragMoveEvent) => void;
  onDragStop?: (params: RowDragEndEvent) => void;
  getContainer: () => HTMLElement;
}
removeRowDropZone
Function
Removes an external drop zone added by addRowDropZone. See Row Dragging to an External DropZone.
function removeRowDropZone(
    params: RowDropZoneParams
): void;

interface RowDropZoneParams {
  onDragEnter?: (params: RowDragEnterEvent) => void;
  onDragLeave?: (params: RowDragLeaveEvent) => void;
  onDragging?: (params: RowDragMoveEvent) => void;
  onDragStop?: (params: RowDragEndEvent) => void;
  getContainer: () => HTMLElement;
}
getRowDropZoneParams
Function
Returns the RowDropZoneParams to be used by another grid's addRowDropZone method. See Row Dragging Between Grids.
function getRowDropZoneParams(
    events: RowDropZoneEvents
): RowDropZoneParams;

interface RowDropZoneEvents {
  onDragEnter?: (params: RowDragEnterEvent) => void;
  onDragLeave?: (params: RowDragLeaveEvent) => void;
  onDragging?: (params: RowDragMoveEvent) => void;
  onDragStop?: (params: RowDragEndEvent) => void;
}

interface RowDropZoneParams {
  onDragEnter?: (params: RowDragEnterEvent) => void;
  onDragLeave?: (params: RowDragLeaveEvent) => void;
  onDragging?: (params: RowDragMoveEvent) => void;
  onDragStop?: (params: RowDragEndEvent) => void;
  getContainer: () => HTMLElement;
}

Rendering

getRenderedNodes
Function
Retrieve rendered nodes. Due to virtualisation this will contain only the current visible rows and those in the buffer.
function getRenderedNodes(): RowNode[];
getCellRendererInstances
Function
Returns the list of active Cell Renderer Instances.
function getCellRendererInstances(
    params: GetCellRendererInstancesParams = {}
): ICellRenderer[];

interface GetCellRendererInstancesParams {
  rowNodes?: RowNode[];
  columns?: (string | Column)[];
}

interface ICellRenderer {
  // Get the cell to refresh. Return true if successful. Return false if not (or you don't have refresh logic),
  // then the grid will refresh the cell for you. 
  refresh(params: ICellRendererParams): boolean;
}
getCellEditorInstances
Function
Returns the list of active Cell Editor Instances.
function getCellEditorInstances(
    params: GetCellEditorInstancesParams = {}
): ICellEditor[];

interface GetCellEditorInstancesParams {
  rowNodes?: RowNode[];
  columns?: (string | Column)[];
}

interface ICellEditor {
  // Return the final value - called by the grid once after editing is complete 
  getValue(): any;
  // Gets called once after initialised. If you return true, the editor will
  // appear in a popup, so is not constrained to the boundaries of the cell.
  // This is great if you want to, for example, provide you own custom dropdown list
  // for selection. Default is false (ie if you don't provide the method). 
  isPopup?(): boolean;
  // Gets called once, only if isPopup() returns true. Return "over" if the popup
  // should cover the cell, or "under" if it should be positioned below leaving the
  // cell value visible. If this method is not present, the default is "over". 
  getPopupPosition?(): string | undefined;
  // Gets called once after initialised. If you return true, the editor will not be
  // used and the grid will continue editing. Use this to make a decision on editing
  // inside the init() function, eg maybe you want to only start editing if the user
  // hits a numeric key, but not a letter, if the editor is for numbers. 
  isCancelBeforeStart?(): boolean;
  // Gets called once after editing is complete. If your return true, then the new
  // value will not be used. The editing will have no impact on the record. Use this
  // if you do not want a new value from your gui, i.e. you want to cancel the editing. 
  isCancelAfterEnd?(): boolean;
  // If doing full line edit, then gets called when focus should be put into the editor 
  focusIn?(): void;
  // If doing full line edit, then gets called when focus is leaving the editor 
  focusOut?(): void;
  // If using a framework this returns the underlying component instance, so you can call
  // methods on it if you want. 
  getFrameworkComponentInstance?(): any;
}
getSizesForCurrentTheme
Function
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.
function getSizesForCurrentTheme(): void;

Scrolling

setAlwaysShowHorizontalScroll
Function
If true, the horizontal scrollbar will always be present, even if not required. Otherwise, it will only be displayed when necessary.
function setAlwaysShowHorizontalScroll(show: boolean): void;
setAlwaysShowVerticalScroll
Function
If true, the vertical scrollbar will always be present, even if not required. Otherwise it will only be displayed when necessary.
function setAlwaysShowVerticalScroll(show: boolean): void;
ensureIndexVisible
Function
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.
function ensureIndexVisible(
    index: any,
    position: string | null
): void;
ensureNodeVisible
Function
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).
function ensureNodeVisible(
    comparator: any,
    position: string | null = null
): void;
ensureColumnVisible
Function
Ensures the column is visible, scrolling the table if needed.
function ensureColumnVisible(key: string | Column): void;
getHorizontalPixelRange
Function
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
function getHorizontalPixelRange(): { left: number, right: number; };
getVerticalPixelRange
Function
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
function getVerticalPixelRange(): { top: number, bottom: number; };

Infinite Scrolling

refreshInfiniteCache
Function
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.
function refreshInfiniteCache(): void;
purgeInfiniteCache
Function
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.
function purgeInfiniteCache(): void;
getInfiniteRowCount
Function
The row count defines how many rows the grid allows scrolling to.
function getInfiniteRowCount(): number | undefined;
isLastRowIndexKnown
Function
Returns true if grid allows for scrolling past the last row to load more rows, thus providing infinite scroll.
function isLastRowIndexKnown(): boolean | undefined;
setRowCount
Function
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.
function setRowCount(
    rowCount: number,
    maxRowFound: boolean
): void;
getCacheBlockState
Function
Returns an object representing the state of the cache. This is useful for debugging and understanding how the cache is working.
function getCacheBlockState(): any;

Overlays

showLoadingOverlay
Function
Show the 'loading' overlay.
function showLoadingOverlay(): void;
showNoRowsOverlay
Function
Show the 'no rows' overlay.
function showNoRowsOverlay(): void;
hideOverlay
Function
Hides the overlay if showing.
function hideOverlay(): void;

Clipboard

copySelectedRangeToClipboard
Function
Copies the selected ranges to the clipboard.
function copySelectedRangeToClipboard(includeHeader: boolean): void;
copySelectedRangeDown
Function
Copies the selected range down, similar to Ctrl+D in Excel.
function copySelectedRangeDown(): void;
copySelectedRowsToClipboard
Function
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.
function copySelectedRowsToClipboard(
    includeHeader: boolean,
    columnKeys: (string | Column)[]
): void;

Pagination

paginationIsLastPageFound
Function
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.
function paginationIsLastPageFound(): boolean;
paginationGetPageSize
Function
Returns how many rows are being shown per page.
function paginationGetPageSize(): number;
paginationSetPageSize
Function
Sets the paginationPageSize, then re-paginates the grid so the changes are applied immediately.
function paginationSetPageSize(size: number): void;
paginationGetCurrentPage
Function
Returns the 0-based index of the page which is showing.
function paginationGetCurrentPage(): number;
paginationGetTotalPages
Function
Returns the total number of pages. Returns null if paginationIsLastPageFound() === false.
function paginationGetTotalPages(): number;
paginationGetRowCount
Function
The total number of rows. Returns null if paginationIsLastPageFound() === false.
function paginationGetRowCount(): number;
paginationGoToPage
Function
Goes to the specified page. If the page requested doesn't exist, it will go to the last page.
function paginationGoToPage(page: number): void;
paginationGoToNextPage
Function
Navigates to the next page.
function paginationGoToNextPage(): void;
paginationGoToPreviousPage
Function
Navigates to the previous page.
function paginationGoToPreviousPage(): void;
paginationGoToFirstPage
Function
Navigates to the first page.
function paginationGoToFirstPage(): void;
paginationGoToLastPage
Function
Navigates to the last page.
function paginationGoToLastPage(): void;

Headers

setHeaderHeight
Function
Sets the height in pixels for the row containing the column label header.
function setHeaderHeight(headerHeight: number): void;
setGroupHeaderHeight
Function
Sets the height in pixels for the rows containing header column groups.
function setGroupHeaderHeight(headerHeight: number): void;
setFloatingFiltersHeight
Function
Sets the height in pixels for the row containing the floating filters.
function setFloatingFiltersHeight(headerHeight: number): void;
setPivotHeaderHeight
Function
Sets the height in pixels for the row containing the columns when in pivot mode.
function setPivotHeaderHeight(headerHeight: number): void;
setPivotGroupHeaderHeight
Function
Sets the height in pixels for the row containing header column groups when in pivot mode.
function setPivotGroupHeaderHeight(headerHeight: number): void;

Undo / Redo

See Undo/Redo Edits for more information.

undoCellEditing
Function
Reverts the last cell edit.
function undoCellEditing(): void;
redoCellEditing
Function
Re-applies the most recently undone cell edit.
function redoCellEditing(): void;
getCurrentUndoSize
Function
Returns current number of available cell edit undo operations.
function getCurrentUndoSize(): number;
getCurrentRedoSize
Function
Returns current number of available cell edit redo operations.
function getCurrentRedoSize(): number;

Charts

createRangeChart
Function
Used to programmatically create charts from a range. See Range Chart API.
function createRangeChart(
    params: CreateRangeChartParams
): ChartRef | undefined;

interface CreateRangeChartParams {
  cellRange: CellRangeParams;
  chartType: ChartType;
  chartThemeName?: string;
  chartContainer?: HTMLElement;
  suppressChartRanges?: boolean;
  aggFunc?: string | IAggFunc;
  chartThemeOverrides?: AgChartThemeOverrides;
  unlinkChart?: boolean;
}

interface ChartRef {
  chartId: string;
  chart: any;
  chartElement: HTMLElement;
  destroyChart: () => void;
}
createPivotChart
Function
Used to programmatically create pivot charts from a grid. See Pivot Chart API.
function createPivotChart(
    params: CreatePivotChartParams
): ChartRef | undefined;

interface CreatePivotChartParams {
  chartType: ChartType;
  chartThemeName?: string;
  chartContainer?: HTMLElement;
  chartThemeOverrides?: AgChartThemeOverrides;
  unlinkChart?: boolean;
}

interface ChartRef {
  chartId: string;
  chart: any;
  chartElement: HTMLElement;
  destroyChart: () => void;
}
createCrossFilterChart
Function
Used to programmatically create cross filter charts from a range. See Cross-filter API.
function createCrossFilterChart(
    params: CreateRangeChartParams
): ChartRef | undefined;

interface CreateRangeChartParams {
  cellRange: CellRangeParams;
  chartType: ChartType;
  chartThemeName?: string;
  chartContainer?: HTMLElement;
  suppressChartRanges?: boolean;
  aggFunc?: string | IAggFunc;
  chartThemeOverrides?: AgChartThemeOverrides;
  unlinkChart?: boolean;
}

interface ChartRef {
  chartId: string;
  chart: any;
  chartElement: HTMLElement;
  destroyChart: () => void;
}
getChartRef
Function
Returns the ChartRef using the supplied chartId.
function getChartRef(chartId: string): ChartRef | undefined;

interface ChartRef {
  chartId: string;
  chart: any;
  chartElement: HTMLElement;
  destroyChart: () => void;
}
getChartModels
Function
Returns a list of models with information about the charts that are currently rendered from the grid. See Saving and Restoring Charts.
function getChartModels(): ChartModel[] | undefined;

interface ChartModel {
  modelType: ChartModelType;
  chartId: string;
  chartType: ChartType;
  cellRange: CellRangeParams;
  chartThemeName?: string;
  chartOptions: ChartOptions<any>;
  suppressChartRanges?: boolean;
  aggFunc?: string | IAggFunc;
  unlinkChart?: boolean;
}
restoreChart
Function
Restores a chart using the ChartModel that was previously obtained from getChartModels(). See Saving and Restoring Charts.
function restoreChart(
    chartModel: ChartModel,
    chartContainer: HTMLElement
): ChartRef | undefined;

interface ChartModel {
  modelType: ChartModelType;
  chartId: string;
  chartType: ChartType;
  cellRange: CellRangeParams;
  chartThemeName?: string;
  chartOptions: ChartOptions<any>;
  suppressChartRanges?: boolean;
  aggFunc?: string | IAggFunc;
  unlinkChart?: boolean;
}

interface ChartRef {
  chartId: string;
  chart: any;
  chartElement: HTMLElement;
  destroyChart: () => void;
}
getChartImageDataURL
Function
Returns a string containing the requested data URL which contains a representation of the chart image. See Downloading Chart Image.
function getChartImageDataURL(
    params: GetChartImageDataUrlParams
): string | undefined;

interface GetChartImageDataUrlParams {
  chartId: string;
  fileFormat?: string;
}

Miscellaneous

setPopupParent
Function
DOM element to use as the popup parent for grid popups (context menu, column menu etc).
function setPopupParent(
    ePopupParent: HTMLElement
): void;
addRenderedRowListener
Function
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.
function addRenderedRowListener(
    eventName: string,
    rowIndex: number,
    callback: Function
): void;
isToolPanelShowing
Function
Returns true if the tool panel is showing, otherwise false.
function isToolPanelShowing(): void;
getToolPanelInstance
Function
Gets the tool panel instance corresponding to the supplied id. See Expand / Collapse Column Groups.
function getToolPanelInstance(id: string): IToolPanel | undefined;

interface IToolPanel {
  refresh(): void;
}
getValue
Function
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.
function getValue(
    colKey: string | Column,
    rowNode: RowNode
): any;
destroy
Function
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.
function destroy(): void;
showColumnMenuAfterButtonClick
Function
Shows the column menu after and positions it relative to the provided button element. Use in conjunction with your own header template.
function showColumnMenuAfterButtonClick(
    colKey: string | Column,
    buttonElement: HTMLElement
): void;
showColumnMenuAfterMouseClick
Function
Shows the column menu after and positions it relative to the mouse event. Use in conjunction with your own header template.
function showColumnMenuAfterMouseClick(
    colKey: string | Column,
    mouseEvent: MouseEvent | Touch
): void;
resetRowHeights
Function
Tells the grid to recalculate the row heights.
function resetRowHeights(): void;
onRowHeightChanged
Function
Tells the grid a row height has changed. To be used after calling rowNode.setRowHeight(newHeight).
function onRowHeightChanged(): void;
addAggFunc
Function
Add an aggregation function with the specified key.
function addAggFunc(
    key: string,
    aggFunc: IAggFunc
): void;

interface IAggFunc {
    (params: IAggFuncParams) : any
}
interface IAggFuncParams {
  // Values to aggregate 
  values: any[];
  // Column the aggregation function is working on 
  column: Column;
  // ColDef of the aggregation column 
  colDef: ColDef;
  // The parent RowNode, where the aggregation result will be shown 
  rowNode: RowNode;
  // data (if any) of the parent RowNode 
  data: any;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
addAggFuncs
Function
Add aggregations function with the specified keys.
function addAggFuncs(
    aggFuncs: { [key: string]: IAggFunc; }
): void;

interface IAggFunc {
    (params: IAggFuncParams) : any
}
interface IAggFuncParams {
  // Values to aggregate 
  values: any[];
  // Column the aggregation function is working on 
  column: Column;
  // ColDef of the aggregation column 
  colDef: ColDef;
  // The parent RowNode, where the aggregation result will be shown 
  rowNode: RowNode;
  // data (if any) of the parent RowNode 
  data: any;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
clearAggFuncs
Function
Clears all aggregation functions (including those provided by the grid).
function clearAggFuncs(): void;
hidePopupMenu
Function
Hides any visible context menu or column menu.
function hidePopupMenu(): void;
setEnableCellTextSelection
Function
Sets the enableCellTextSelection property. See Cell Text Selection.
function setEnableCellTextSelection(selectable: boolean): void;
isAnimationFrameQueueEmpty
Function
Returns true when there are no more animation frames left to process.
function isAnimationFrameQueueEmpty(): boolean;
refreshServerSideStore
Function
Refresh a server-side store. See Purging Groups.
function refreshServerSideStore(
    params: RefreshStoreParams
): void;

interface RefreshStoreParams {
  route?: string[];
  purge?: boolean;
}
getServerSideStoreState
Function
Returns info on all server side stores. See Store State.
function getServerSideStoreState(): ServerSideStoreState[];

interface ServerSideStoreState {
  type: ServerSideStoreType;
  route: string[];
  rowCount: number;
  lastRowIndexKnown?: boolean;
  info?: any;
  maxBlocksInCache?: number;
  cacheBlockSize?: number;
}
retryServerSideLoads
Function
Gets all failed server side loads to retry. See Retry Loads.
function retryServerSideLoads(): void;
setFillHandleDirection
Function
Sets the preferred direction for the selection fill handle. See Fill Handle.
function setFillHandleDirection(
    direction: 'x' | 'y' | 'xy'
): void;
setGridAriaProperty
Function
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.
function setGridAriaProperty(
    property: string,
    value: string | null
): void;