Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

Vue Data Grid: Grid Callbacks

All of these grid callbacks are available through the GridOptions interface.

Accessories

getContextMenuItems
Function
For customising the context menu. See Context Menu.
getContextMenuItems = (
    params: GetContextMenuItemsParams
) => (string | MenuItemDef)[];

interface GetContextMenuItemsParams {
  // Names of the items that would be provided by default. 
  defaultItems: string[] | undefined;
  // The column, if a cell was clicked, otherwise null. 
  column: Column | null;
  // The row node, if a cell was clicked, otherwise null. 
  node: RowNode | null;
  // The value, if a cell was clicked, otherwise null. 
  value: any;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}

interface MenuItemDef {
  // Name of the menu item 
  name: string;
  // It the item should be enabled / disabled 
  disabled?: boolean;
  // Shortcut (just display text, saying the shortcut here does nothing) 
  shortcut?: string;
  // Function that gets executed when item is chosen 
  action?: () => void;
  // Set to true to provide a check beside the option 
  checked?: boolean;
  // The icon to display, either a DOM element or HTML string 
  icon?: HTMLElement | string;
  // If this item is a sub menu, contains a list of menu item definitions 
  subMenu?: (MenuItemDef | string)[] | IComponent<any>;
  // CSS classes to apply to the menu item 
  cssClasses?: string[];
  // Tooltip for the menu item 
  tooltip?: string;
}
getMainMenuItems
Function
For customising the main 'column header' menu. See Column Menu.
getMainMenuItems = (
    params: GetMainMenuItemsParams
) => (string | MenuItemDef)[];

interface GetMainMenuItemsParams {
  // The column that was clicked 
  column: Column;
  // List of the items that would be displayed by default 
  defaultItems: string[];
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}

interface MenuItemDef {
  // Name of the menu item 
  name: string;
  // It the item should be enabled / disabled 
  disabled?: boolean;
  // Shortcut (just display text, saying the shortcut here does nothing) 
  shortcut?: string;
  // Function that gets executed when item is chosen 
  action?: () => void;
  // Set to true to provide a check beside the option 
  checked?: boolean;
  // The icon to display, either a DOM element or HTML string 
  icon?: HTMLElement | string;
  // If this item is a sub menu, contains a list of menu item definitions 
  subMenu?: (MenuItemDef | string)[] | IComponent<any>;
  // CSS classes to apply to the menu item 
  cssClasses?: string[];
  // Tooltip for the menu item 
  tooltip?: string;
}
postProcessPopup
Function
Allows user to process popups after they are created. Applications can use this if they want to, for example, reposition the popup.
postProcessPopup = (
    params: PostProcessPopupParams
) => void;

interface PostProcessPopupParams {
  // If popup is for a column, this gives the Column 
  column?: Column | null;
  // If popup is for a row, this gives the RowNode 
  rowNode?: RowNode | null;
  // The popup we are showing 
  ePopup: HTMLElement;
  // The different types are:
  // 'contextMenu', 'columnMenu', 'aggFuncSelect', 'popupCellEditor' 
  type: string;
  // If the popup is as a result of a button click (eg menu button),
  // this is the component that the user clicked 
  eventSource?: HTMLElement | null;
  // If the popup is as a result of a click or touch,
  // this is the event - eg user showing context menu 
  mouseEvent?: MouseEvent | Touch | null;
}

Clipboard

See Clipboard for more information.

processCellForClipboard
Function
Allows you to process cells for the clipboard. Handy if for example you have Date objects that need to have a particular format if importing into Excel.
processCellForClipboard = (
    params: ProcessCellForExportParams
) => any;

interface ProcessCellForExportParams {
  value: any;
  accumulatedRowIndex?: number;
  node?: RowNode | null;
  column: Column;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
  type: string;
}
processHeaderForClipboard
Function
Allows you to process header values for the clipboard.
processHeaderForClipboard = (
    params: ProcessHeaderForExportParams
) => any;

interface ProcessHeaderForExportParams {
  column: Column;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
processCellFromClipboard
Function
Allows you to process cells from the clipboard. Handy if for example you have number fields, and want to block non-numbers from getting into the grid.
processCellFromClipboard = (
    params: ProcessCellForExportParams
) => any;

interface ProcessCellForExportParams {
  value: any;
  accumulatedRowIndex?: number;
  node?: RowNode | null;
  column: Column;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
  type: string;
}
sendToClipboard
Function
Allows you to get the data that would otherwise go to the clipboard. To be used when you want to control the 'copy to clipboard' operation yourself.
sendToClipboard = (
    params: SendToClipboardParams
) => void;

interface SendToClipboardParams {
  data: string;
}
processDataFromClipboard
Function
Allows complete control of the paste operation, including cancelling the operation (so nothing happens) or replacing the data with other data.
processDataFromClipboard = (
    params: ProcessDataFromClipboardParams
) => string[][] | null;

interface ProcessDataFromClipboardParams {
  // 2D array of all cells from the clipboard 
  data: string[][];
}

Filtering

See Filtering for more information.

isExternalFilterPresent
Function
Grid calls this method to know if an external filter is present. See External Filter.
isExternalFilterPresent = () => boolean;
doesExternalFilterPass
Function
Should return true if external filter passes, otherwise false. See External Filter.
doesExternalFilterPass = (node: RowNode) => boolean;

Integrated Charts

See Integrated Charts for more information.

getChartToolbarItems
Function
Callback to be used to customise the chart toolbar items. See Configuring Toolbar Items.
getChartToolbarItems = (
    params: GetChartToolbarItemsParams
) => ChartMenuOptions[];

interface GetChartToolbarItemsParams {
  defaultItems?: ChartMenuOptions[];
  api: GridApi;
  columnApi: ColumnApi;
}

type ChartMenuOptions = 
      'chartSettings' 
    | 'chartData' 
    | 'chartFormat' 
    | 'chartLink' 
    | 'chartUnlink' 
    | 'chartDownload'
createChartContainer
Function
Callback to enable displaying the chart in an alternative chart container. See Configuring Toolbar Items.
createChartContainer = (params: ChartRef) => void;

interface ChartRef {
  // The id of the created chart. 
  chartId: string;
  // The chart instance that is produced by AG Charts which can be used to interact with the chart directly. 
  chart: any;
  // The chart DOM element, which the application is responsible for placing into the DOM. 
  chartElement: HTMLElement;
  // The application is responsible for calling this when the chart is no longer needed. 
  destroyChart: () => void;
}

Keyboard Navigation

See Keyboard Navigation for more information.

navigateToNextHeader
Allows overriding the default behaviour for when user hits navigation (arrow) key when a header is focused.
navigateToNextHeader = (
    params: NavigateToNextHeaderParams
) => HeaderPosition;

interface NavigateToNextHeaderParams {
  // The key for the arrow key pressed,
  // left = 'ArrowLeft', up = 'ArrowUp', right = 'ArrowRight', down = 'ArrowDown' 
  key: string;
  // The header that currently has focus 
  previousHeaderPosition: HeaderPosition | null;
  // The header the grid would normally pick as the next header for this navigation 
  nextHeaderPosition: HeaderPosition | null;
  // The number of header rows present in the grid 
  headerRowCount: number;
  event: KeyboardEvent;
  api: GridApi;
  columnApi: ColumnApi;
}

interface HeaderPosition {
  // A number from 0 to n, where n is the last header row the grid is rendering 
  headerRowIndex: number;
  // The grid column or column group 
  column: Column | ColumnGroup;
}
tabToNextHeader
Allows overriding the default behaviour for when user hits Tab key when a header is focused.
tabToNextHeader = (
    params: TabToNextHeaderParams
) => HeaderPosition;

interface TabToNextHeaderParams {
  // True if the Shift key is also down 
  backwards: boolean;
  // The header that currently has focus 
  previousHeaderPosition: HeaderPosition | null;
  // The header the grid would normally pick as the next header for this navigation 
  nextHeaderPosition: HeaderPosition | null;
  // The number of header rows present in the grid 
  headerRowCount: number;
  api: GridApi;
  columnApi: ColumnApi;
}

interface HeaderPosition {
  // A number from 0 to n, where n is the last header row the grid is rendering 
  headerRowIndex: number;
  // The grid column or column group 
  column: Column | ColumnGroup;
}
navigateToNextCell
Allows overriding the default behaviour for when user hits navigation (arrow) key when a cell is focused.
navigateToNextCell = (
    params: NavigateToNextCellParams
) => CellPosition;

interface NavigateToNextCellParams {
  // The keycode for the arrow key pressed:
  // left = 37, up = 38, right = 39, down = 40 
  key: number;
  // The cell that currently has focus 
  previousCellPosition: CellPosition;
  // The cell the grid would normally pick as the next cell for navigation 
  nextCellPosition: CellPosition | null;
  event: KeyboardEvent | null;
  api: GridApi;
  columnApi: ColumnApi;
}

interface CellPosition {
  // The grid column 
  column: Column;
  // 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 null (for not pinned) 
  rowPinned: string | null;
}
tabToNextCell
Allows overriding the default behaviour for when user hits Tab key when a cell is focused.
tabToNextCell = (
    params: TabToNextCellParams
) => CellPosition;

interface TabToNextCellParams {
  // True if the Shift key is also down 
  backwards: boolean;
  // True if the current cell is editing
  // (you may want to skip cells that are not editable, as the grid will enter the next cell in editing mode also if tabbing) 
  editing: boolean;
  // The cell that currently has focus 
  previousCellPosition: CellPosition;
  // The cell the grid would normally pick as the next cell for navigation. 
  nextCellPosition: CellPosition | null;
  api: GridApi;
  columnApi: ColumnApi;
}

interface CellPosition {
  // The grid column 
  column: Column;
  // 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 null (for not pinned) 
  rowPinned: string | null;
}
suppressKeyboardEvent
Function
Suppress the grid taking action for the relevant keyboard event when a cell is focused. See Suppress Keyboard Events.
suppressKeyboardEvent = (
    params: SuppressKeyboardEventParams
) => boolean;

interface SuppressKeyboardEventParams {
  // The keyboard event the grid received 
  event: KeyboardEvent;
  // Whether the cell is editing or not 
  editing: boolean;
  // Row node for the given row 
  node: RowNode;
  // Data associated with the node 
  data: any;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}

Localisation

See Localisation for more information.

localeTextFunc
Function
A callback for localising text within the grid.
localeTextFunc = (
    key: string,
    defaultValue: string
) => string;

Miscellaneous

getDocument
Allows overriding what document is used. Currently used by Drag and Drop (may extend to other places in the future). Use this when you want the grid to use a different document than the one available on the global scope. This can happen if docking out components (something which Electron supports)
getDocument = () => Document;

Pagination

See Row Pagination for more information.

paginationNumberFormatter
Function
Allows user to format the numbers in the pagination panel, i.e. 'row count' and 'page number' labels. This is for pagination panel only, to format numbers inside the grid's cells (i.e. your data), then use valueFormatter in the column definitions.
paginationNumberFormatter = (
    params: PaginationNumberFormatterParams
) => string;

interface PaginationNumberFormatterParams {
  value: number;
}

Row Grouping and Pivoting

See Pivot and Aggregation for more information

groupRowAggNodes
Function
Callback for grouping. See Row Grouping.
groupRowAggNodes = (nodes: RowNode[]) => any;
isGroupOpenByDefault
Function
(Client-side Row Model only) Allows groups to be open by default.
isGroupOpenByDefault = (
    params: IsGroupOpenByDefaultParams
) => boolean;

interface IsGroupOpenByDefaultParams {
  // The row node being considered. 
  rowNode: RowNode;
  // The Column for which this row is grouping. 
  rowGroupColumn: Column;
  // Same as `rowNode.level` - what level the group is at, e.g. 0 for top level, 1 for second etc 
  level: number;
  // Same as `rowNode.field` - the field we are grouping on, e.g. 'country' 
  field: string;
  // Same as `rowNode.key`, the value of this group, e.g. 'Ireland' 
  key: string;
}
defaultGroupOrderComparator
Function
Allows default sorting of groups. See Default Group Order.
defaultGroupOrderComparator = (
    nodeA: RowNode,
    nodeB: RowNode
) => number;
processSecondaryColDef
Function
Callback to be used with pivoting, to allow changing the second column definition.
processSecondaryColDef = (colDef: ColDef) => void;
processSecondaryColGroupDef
Function
Callback to be used with pivoting, to allow changing the second column group definition.
processSecondaryColGroupDef = (
    colGroupDef: ColGroupDef
) => void;
getDataPath
Function
Callback to be used when working with Tree Data when treeData = true. See Tree Data.
getDataPath = (data: any) => string[];

RowModel: Server-Side

See Server-Side Row Model for more information.

getChildCount
Function
Allows setting the child count for a group row.
getChildCount = (dataItem: any) => number;
getServerSideStoreParams
Function
Allows providing different params for different levels of grouping.
getServerSideStoreParams = (
    params: GetServerSideStoreParamsParams
) => ServerSideStoreParams;

interface GetServerSideStoreParamsParams {
  // The level of the store. Top level is 0. 
  level: number;
  // The Row Node for the group that got expanded, or undefined if top level (ie no parent) 
  parentRowNode?: RowNode;
  // Active Row Group Columns, if any. 
  rowGroupColumns: Column[];
  // Active Pivot Columns, if any. 
  pivotColumns: Column[];
  // true if pivot mode is active. 
  pivotMode: boolean;
}

interface ServerSideStoreParams {
  // What store type to use.
  // If missing, then defaults to grid option `serverSideStoreType`. 
  storeType?: ServerSideStoreType;
  // For Partial Store only.
  // How many blocks to keep in cache.
  // If missing, defaults to grid options `maxBlocksInCache`. 
  maxBlocksInCache?: number;
  // For Partial Store only.
  // Cache block size.
  // If missing, defaults to grid options `cacheBlockSize`. 
  cacheBlockSize?: number;
}

type ServerSideStoreType = 'full' | 'partial'
isServerSideGroupOpenByDefault
Function
Allows groups to be open by default.
isServerSideGroupOpenByDefault = (
    params: IsServerSideGroupOpenByDefaultParams
) => boolean;

interface IsServerSideGroupOpenByDefaultParams {
  data: any;
  rowNode: RowNode;
}
isApplyServerSideTransaction
Function
Allows cancelling transactions.
isApplyServerSideTransaction = (
    params: IsApplyServerSideTransactionParams
) => boolean;

interface IsApplyServerSideTransactionParams {
  // The transaction getting applied. 
  transaction: ServerSideTransaction;
  // The parent RowNode, if transaction is applied to a group. 
  parentNode: RowNode;
  storeInfo: any;
}
isServerSideGroup
Function
SSRM Tree Data: Allows specifying which rows are expandable. See SSRM Tree Data.
isServerSideGroup = (dataItem: any) => boolean;
getServerSideGroupKey
Function
SSRM Tree Data: Allows specifying group keys. See SSRM Tree Data.
getServerSideGroupKey = (dataItem: any) => string;

Rows

getBusinessKeyForNode
Function
Return a business key for the node. If implemented, each row in the DOM will have an attribute row-id='abc' where abc is what you return as the business key. This is useful for automated testing, as it provides a way for your tool to identify rows based on unique business keys.
getBusinessKeyForNode = (node: RowNode) => string;
getRowNodeId
Function
Allows you to set the ID for a particular row node based on the data. Useful for selection and server side sorting and filtering for paging and virtual pagination.
getRowNodeId = (data: any) => string;
processRowPostCreate
Function
Allows you to process rows after they are created, so you can do final adding of custom attributes etc.
processRowPostCreate = (
    params: ProcessRowParams
) => void;

interface ProcessRowParams {
  eRow: HTMLElement;
  ePinnedLeftRow: HTMLElement;
  ePinnedRightRow: HTMLElement;
  rowIndex: number;
  node: RowNode;
  api: GridApi;
  columnApi: ColumnApi;
  addRenderedRowListener: (eventType: string, listener: Function) => void;
  // The context as provided on `gridOptions.context` 
  context: any;
}
isRowSelectable
Function
Callback to be used to determine which rows are selectable. By default rows are selectable, so return false to make a row un-selectable. See Specify Selectable Rows.
isRowSelectable = (node: RowNode) => boolean;
isRowMaster
Function
Callback to be used with Master Detail to determine if a row should be a master row. If false is returned no detail row will exist for this row.
isRowMaster = (dataItem: any) => boolean;
fillOperation
Function
Callback to fill values instead of simply copying values or increasing number values using linear progression.
fillOperation = (
    params: FillOperationParams
) => any;

interface FillOperationParams {
  // The mouse event for the fill operation. 
  event: MouseEvent;
  // The values that have been processed by the fill operation. 
  values: any[];
  // The RowNode of the current cell being changed. 
  rowNode: RowNode;
  // The Column of the current cell being changed. 
  column: Column;
  // The values that were present before processing started. 
  initialValues: any[];
  // The index of the current processed value. 
  currentIndex: number;
  // The value of the cell being currently processed by the Fill Operation. 
  currentCellValue: any;
  // The direction of the Fill Operation. 
  direction: 'up' | 'down' | 'left' | 'right';
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}

Sorting

See Row Sorting for more information.

postSort
Function
Callback to perform additional sorting after the grid has sorted the rows. See Post Sort.
postSort = (nodes: RowNode[]) => void;

Styling

getRowClass
Function
Callback version of property rowClass to set class(es) for each row individually. Function should return either a string (class name), array of strings (array of class names) or undefined for no class. See Row Class.
getRowClass = (params: RowClassParams) => string | string[] | undefined;

interface RowClassParams {
  // The data associated with this row from rowData 
  data: any;
  // The RowNode associated with this row 
  node: RowNode;
  // The index of the row 
  rowIndex: number;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
getRowStyle
Function
Callback version of property rowStyle to set style for each row individually. Function should return an object of CSS values. See Row Style.
getRowStyle = (params: RowClassParams) => RowStyle;

interface RowClassParams {
  // The data associated with this row from rowData 
  data: any;
  // The RowNode associated with this row 
  node: RowNode;
  // The index of the row 
  rowIndex: number;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}

interface RowStyle {
  [cssProperty: string]: string | number;
}
getRowHeight
Function
Callback version of property rowHeight to set height for each row individually. Function should return a positive number of pixels, or return null/undefined to use the default row height. See Row Height.
getRowHeight = (
    params: RowHeightParams
) => number | undefined | null;

interface RowHeightParams {
  data: any;
  node: RowNode;
  api: GridApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
isFullWidthCell
Function
Tells the grid if this row should be rendered as full width. See Full Width Rows.
isFullWidthCell = (rowNode: RowNode) => boolean;