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.

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;

Rendering and Styling

getRowClass
Function
Callback version of property rowClass. Function should return a string or an array of strings.
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. Function should return an object of CSS values.
getRowStyle = (params: RowClassParams) => { [cssProperty: string]: string; };

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;
}
getRowHeight
Function
Callback version of property rowHeight. Function should return a positive number of pixels, or return null/undefined to use the default 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.
isFullWidthCell = (rowNode: RowNode) => boolean;

Sort and Filter

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

Row Grouping and Pivoting

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 {
  rowNode: RowNode;
  rowGroupColumn: Column;
  level: number;
  field: string;
  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;

Popup / Menus

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

interface GetContextMenuItemsParams {
  defaultItems: string[] | undefined;
  column: Column;
  node: RowNode;
  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;
  // 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

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[][];
}

Keyboard Navigation

See Keyboard Navigation

navigateToNextHeader
Function
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;
}

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
Function
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;
}

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
Function
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;
}

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;
}
tabToNextCell
Function
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;
}

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;
}

Pagination

See Row Pagination

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 Model: Server-Side

Callbacks for Server-Side Row Model only.

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 {
  level: number;
  parentRowNode?: RowNode;
  rowGroupColumns: Column[];
  pivotColumns: Column[];
  pivotMode: boolean;
}

interface ServerSideStoreParams {
  storeType?: ServerSideStoreType;
  maxBlocksInCache?: number;
  cacheBlockSize?: number;
}
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 {
  transaction: ServerSideTransaction;
  parentNode: RowNode;
  storeInfo: any;
}
isServerSideGroup
Function
(SSRM Tree Data) Allows specifying which rows are expandable.
isServerSideGroup = (dataItem: any) => boolean;
getServerSideGroupKey
Function
(SSRM Tree Data) Allows specifying group keys.
getServerSideGroupKey = (dataItem: any) => string;

Charts

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'

Miscellaneous

getDocument
Function
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;