AG Grid
Results:
Loading...
Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

Vue Data Grid: Grid Events

This is a list of the events that the grid raises. You can register callbacks for these events through the GridOptions interface.

The name of the callback is constructed by prefixing the event name with on. For example, the callback for the cellClicked event is gridOptions.onCellClicked.

 const gridOptions = {
     // Add event handlers
     onCellClicked: (event: CellClickedEvent) => console.log('Cell was clicked'),
 }

Alternatively provide your event handler to the relevant event callback on the ag-grid-vue component.

onCellClicked = (params) => console.log('Cell was clicked');

<ag-grid-vue @cell-clicked="onCellClicked"> </ag-grid-vue>

TypeScript users can take advantage of the events' interfaces. You can construct the interface name by suffixing the event name with Event. For example, the cellClicked event uses the interface CellClickedEvent.

Selection

cellClicked
CellClickedEvent
Cell is clicked.
onCellClicked = (
    event: CellClickedEvent
) => void;

interface CellClickedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  node: RowNode;
  // The user provided data for the row 
  data: any;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: string | null;
  // The context as provided on `gridOptions.context` 
  context: any;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
}
cellDoubleClicked
CellDoubleClickedEvent
Cell is double clicked.
onCellDoubleClicked = (
    event: CellDoubleClickedEvent
) => void;

interface CellDoubleClickedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  node: RowNode;
  // The user provided data for the row 
  data: any;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: string | null;
  // The context as provided on `gridOptions.context` 
  context: any;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
}
cellFocused
CellFocusedEvent
Cell is focused.
onCellFocused = (
    event: CellFocusedEvent
) => void;

interface CellFocusedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  // Row index of the focused cell 
  rowIndex: number | null;
  // Column of the focused cell 
  column: Column | null;
  // either 'top', 'bottom' or null / undefined (if not pinned) 
  rowPinned?: string | null;
  // Whether the cell a full width cell or a regular cell 
  isFullWidthCell: boolean;
  // Whether browser focus is also set (false when editing) 
  forceBrowserFocus?: boolean;
  floating: string | null;
}
cellMouseOver
CellMouseOverEvent
Mouse entered cell.
onCellMouseOver = (
    event: CellMouseOverEvent
) => void;

interface CellMouseOverEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  node: RowNode;
  // The user provided data for the row 
  data: any;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: string | null;
  // The context as provided on `gridOptions.context` 
  context: any;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
}
cellMouseOut
CellMouseOutEvent
Mouse left cell.
onCellMouseOut = (
    event: CellMouseOutEvent
) => void;

interface CellMouseOutEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  node: RowNode;
  // The user provided data for the row 
  data: any;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: string | null;
  // The context as provided on `gridOptions.context` 
  context: any;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
}
cellMouseDown
CellMouseDownEvent
Mouse down on cell.
onCellMouseDown = (
    event: CellMouseDownEvent
) => void;

interface CellMouseDownEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  node: RowNode;
  // The user provided data for the row 
  data: any;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: string | null;
  // The context as provided on `gridOptions.context` 
  context: any;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
}
rowClicked
RowClickedEvent
Row is clicked.
onRowClicked = (event: RowClickedEvent) => void;

interface RowClickedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  node: RowNode;
  // The user provided data for the row 
  data: any;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: string | null;
  // The context as provided on `gridOptions.context` 
  context: any;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
}
rowDoubleClicked
RowDoubleClickedEvent
Row is double clicked.
onRowDoubleClicked = (
    event: RowDoubleClickedEvent
) => void;

interface RowDoubleClickedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  node: RowNode;
  // The user provided data for the row 
  data: any;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: string | null;
  // The context as provided on `gridOptions.context` 
  context: any;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
}
rowSelected
RowSelectedEvent
Row is selected or deselected.
onRowSelected = (
    event: RowSelectedEvent
) => void;

interface RowSelectedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  node: RowNode;
  // The user provided data for the row 
  data: any;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: string | null;
  // The context as provided on `gridOptions.context` 
  context: any;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
}
selectionChanged
SelectionChangedEvent
Row selection is changed. Use the grid API to get the new row selected.
onSelectionChanged = (
    event: SelectionChangedEvent
) => void;

interface SelectionChangedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
}
cellContextMenu
CellContextMenuEvent
Cell is right clicked.
onCellContextMenu = (
    event: CellContextMenuEvent
) => void;

interface CellContextMenuEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  node: RowNode;
  // The user provided data for the row 
  data: any;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: string | null;
  // The context as provided on `gridOptions.context` 
  context: any;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
}
rangeSelectionChanged
RangeSelectionChangedEvent
A change to range selection has occurred.
onRangeSelectionChanged = (
    event: RangeSelectionChangedEvent
) => void;

interface RangeSelectionChangedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  id?: string;
  finished: boolean;
  started: boolean;
}

Editing

cellValueChanged
CellValueChangedEvent
Value has changed after editing.
onCellValueChanged = (
    event: CellValueChangedEvent
) => void;

interface CellValueChangedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  node: RowNode;
  // The user provided data for the row 
  data: any;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: string | null;
  // The context as provided on `gridOptions.context` 
  context: any;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
  oldValue: any;
  newValue: any;
  source: string | undefined;
}
rowValueChanged
RowValueChangedEvent
A cell's value within a row has changed. This event corresponds to Full Row Editing only.
onRowValueChanged = (
    event: RowValueChangedEvent
) => void;

interface RowValueChangedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  node: RowNode;
  // The user provided data for the row 
  data: any;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: string | null;
  // The context as provided on `gridOptions.context` 
  context: any;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
}
cellEditingStarted
CellEditingStartedEvent
Editing a cell has started.
onCellEditingStarted = (
    event: CellEditingStartedEvent
) => void;

interface CellEditingStartedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  node: RowNode;
  // The user provided data for the row 
  data: any;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: string | null;
  // The context as provided on `gridOptions.context` 
  context: any;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
}
cellEditingStopped
CellEditingStoppedEvent
Editing a cell has stopped.
onCellEditingStopped = (
    event: CellEditingStoppedEvent
) => void;

interface CellEditingStoppedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  node: RowNode;
  // The user provided data for the row 
  data: any;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: string | null;
  // The context as provided on `gridOptions.context` 
  context: any;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
  // The old value before editing 
  oldValue: any;
  // The new value after editing 
  newValue: any;
}
rowEditingStarted
RowEditingStartedEvent
Editing a row has started (when row editing is enabled). When row editing, this event will be fired once and cellEditingStarted will be fired for each individual cell. This event corresponds to Full Row Editing only.
onRowEditingStarted = (
    event: RowEditingStartedEvent
) => void;

interface RowEditingStartedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  node: RowNode;
  // The user provided data for the row 
  data: any;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: string | null;
  // The context as provided on `gridOptions.context` 
  context: any;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
}
rowEditingStopped
RowEditingStoppedEvent
Editing a row has stopped (when row editing is enabled). When row editing, this event will be fired once and cellEditingStopped will be fired for each individual cell. This event corresponds to Full Row Editing only.
onRowEditingStopped = (
    event: RowEditingStoppedEvent
) => void;

interface RowEditingStoppedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  node: RowNode;
  // The user provided data for the row 
  data: any;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: string | null;
  // The context as provided on `gridOptions.context` 
  context: any;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
}
pasteStart
PasteStartEvent
Paste operation has started. See Clipboard Events.
onPasteStart = (event: PasteStartEvent) => void;

interface PasteStartEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  source: string;
}
pasteEnd
PasteEndEvent
Paste operation has ended. See Clipboard Events.
onPasteEnd = (event: PasteEndEvent) => void;

interface PasteEndEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  source: string;
}

Sort and Filter

sortChanged
SortChangedEvent
Sort has changed. The grid also listens for this and updates the model.
onSortChanged = (
    event: SortChangedEvent
) => void;

interface SortChangedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
}
filterOpened
FilterOpenedEvent
Filter has been opened.
onFilterOpened = (
    event: FilterOpenedEvent
) => void;

interface FilterOpenedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  // Column / OriginalColumnGroup that contains the filter 
  column: Column | OriginalColumnGroup;
  // Source of the open request 
  source: FilterRequestSource;
  // Parent element of the filter 
  eGui: HTMLElement;
}
filterChanged
FilterChangedEvent
Filter has been modified and applied.
onFilterChanged = (
    event: FilterChangedEvent
) => void;

interface FilterChangedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  // True if the filter was changed as a result of data changing 
  afterDataChange?: boolean;
  // True if filter was changed via floating filter 
  afterFloatingFilter?: boolean;
}
filterModified
FilterModifiedEvent
Filter was modified but not applied. Used when filters have 'Apply' buttons.
onFilterModified = (
    event: FilterModifiedEvent
) => void;

interface FilterModifiedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  filterInstance: IFilterComp;
  column: Column;
}

Row Drag and Drop

rowDragEnter
RowDragEvent
A drag has started, or dragging was already started and the mouse has re-entered the grid having previously left the grid.
onRowDragEnter = (event: RowDragEvent) => void;

interface RowDragEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  // The row node getting dragged. Also the node that started the drag when multi-row dragging. 
  node: RowNode;
  // The list of nodes being dragged. 
  nodes: RowNode[];
  // The vertical pixel location the mouse is over. 
  y: number;
  // Direction of the drag, either 'up', 'down' or null. 
  vDirection: string;
  // The underlying mouse move event associated with the drag. 
  event: MouseEvent;
  // The row index the mouse is dragging over. 
  overIndex: number;
  // The row node the mouse is dragging over. 
  overNode: RowNode;
}
rowDragMove
RowDragEvent
The mouse has moved while dragging.
onRowDragMove = (event: RowDragEvent) => void;

interface RowDragEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  // The row node getting dragged. Also the node that started the drag when multi-row dragging. 
  node: RowNode;
  // The list of nodes being dragged. 
  nodes: RowNode[];
  // The vertical pixel location the mouse is over. 
  y: number;
  // Direction of the drag, either 'up', 'down' or null. 
  vDirection: string;
  // The underlying mouse move event associated with the drag. 
  event: MouseEvent;
  // The row index the mouse is dragging over. 
  overIndex: number;
  // The row node the mouse is dragging over. 
  overNode: RowNode;
}
rowDragLeave
RowDragEvent
The mouse has left the grid while dragging.
onRowDragLeave = (event: RowDragEvent) => void;

interface RowDragEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  // The row node getting dragged. Also the node that started the drag when multi-row dragging. 
  node: RowNode;
  // The list of nodes being dragged. 
  nodes: RowNode[];
  // The vertical pixel location the mouse is over. 
  y: number;
  // Direction of the drag, either 'up', 'down' or null. 
  vDirection: string;
  // The underlying mouse move event associated with the drag. 
  event: MouseEvent;
  // The row index the mouse is dragging over. 
  overIndex: number;
  // The row node the mouse is dragging over. 
  overNode: RowNode;
}
rowDragEnd
RowDragEvent
The drag has finished over the grid.
onRowDragEnd = (event: RowDragEvent) => void;

interface RowDragEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  // The row node getting dragged. Also the node that started the drag when multi-row dragging. 
  node: RowNode;
  // The list of nodes being dragged. 
  nodes: RowNode[];
  // The vertical pixel location the mouse is over. 
  y: number;
  // Direction of the drag, either 'up', 'down' or null. 
  vDirection: string;
  // The underlying mouse move event associated with the drag. 
  event: MouseEvent;
  // The row index the mouse is dragging over. 
  overIndex: number;
  // The row node the mouse is dragging over. 
  overNode: RowNode;
}

Columns

columnVisible
ColumnVisibleEvent
A column, or group of columns, was hidden / shown.
onColumnVisible = (
    event: ColumnVisibleEvent
) => void;

interface ColumnVisibleEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  // The impacted column, only set if action was on one column 
  column: Column | null;
  // List of all impacted columns 
  columns: Column[] | null;
  // String describing where the event is coming from 
  source: ColumnEventType;
  // True if column was set to visible, false if set to hide 
  visible?: boolean;
}
columnPinned
ColumnPinnedEvent
A column, or group of columns, was pinned / unpinned.
onColumnPinned = (
    event: ColumnPinnedEvent
) => void;

interface ColumnPinnedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  // The impacted column, only set if action was on one column 
  column: Column | null;
  // List of all impacted columns 
  columns: Column[] | null;
  // String describing where the event is coming from 
  source: ColumnEventType;
  // Either 'left', 'right', or null (it not pinned) 
  pinned: string | null;
}
columnResized
ColumnResizedEvent
A column was resized.
onColumnResized = (
    event: ColumnResizedEvent
) => void;

interface ColumnResizedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  // The impacted column, only set if action was on one column 
  column: Column | null;
  // List of all impacted columns 
  columns: Column[] | null;
  // String describing where the event is coming from 
  source: ColumnEventType;
  // Set to true for last event in a sequence of move events 
  finished: boolean;
  // Any columns resized due to flex 
  flexColumns: Column[] | null;
}
columnMoved
ColumnMovedEvent
A column was moved. To find out when the column move is finished you can use the dragStopped event below.
onColumnMoved = (
    event: ColumnMovedEvent
) => void;

interface ColumnMovedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  // The impacted column, only set if action was on one column 
  column: Column | null;
  // List of all impacted columns 
  columns: Column[] | null;
  // String describing where the event is coming from 
  source: ColumnEventType;
  // The position the column was moved to 
  toIndex?: number;
}
columnRowGroupChanged
ColumnRowGroupChangedEvent
A row group column was added or removed.
onColumnRowGroupChanged = (
    event: ColumnRowGroupChangedEvent
) => void;

interface ColumnRowGroupChangedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  // The impacted column, only set if action was on one column 
  column: Column | null;
  // List of all impacted columns 
  columns: Column[] | null;
  // String describing where the event is coming from 
  source: ColumnEventType;
}
columnValueChanged
ColumnValueChangedEvent
A value column was added or removed.
onColumnValueChanged = (
    event: ColumnValueChangedEvent
) => void;

interface ColumnValueChangedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  // The impacted column, only set if action was on one column 
  column: Column | null;
  // List of all impacted columns 
  columns: Column[] | null;
  // String describing where the event is coming from 
  source: ColumnEventType;
}
columnPivotModeChanged
ColumnPivotModeChangedEvent
The pivot mode flag was changed.
onColumnPivotModeChanged = (
    event: ColumnPivotModeChangedEvent
) => void;

interface ColumnPivotModeChangedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
}
columnPivotChanged
ColumnPivotChangedEvent
A pivot column was added, removed or order changed.
onColumnPivotChanged = (
    event: ColumnPivotChangedEvent
) => void;

interface ColumnPivotChangedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  // The impacted column, only set if action was on one column 
  column: Column | null;
  // List of all impacted columns 
  columns: Column[] | null;
  // String describing where the event is coming from 
  source: ColumnEventType;
}
columnGroupOpened
ColumnGroupOpenedEvent
A column group was opened / closed.
onColumnGroupOpened = (
    event: ColumnGroupOpenedEvent
) => void;

interface ColumnGroupOpenedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  columnGroup: OriginalColumnGroup;
}
newColumnsLoaded
NewColumnsLoadedEvent
User set new columns.
onNewColumnsLoaded = (
    event: NewColumnsLoadedEvent
) => void;

interface NewColumnsLoadedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
}
gridColumnsChanged
GridColumnsChangedEvent
The list of grid columns changed.
onGridColumnsChanged = (
    event: GridColumnsChangedEvent
) => void;

interface GridColumnsChangedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
}
displayedColumnsChanged
DisplayedColumnsChangedEvent
The list of displayed columns changed. This can result from columns open / close, column move, pivot, group, etc.
onDisplayedColumnsChanged = (
    event: DisplayedColumnsChangedEvent
) => void;

interface DisplayedColumnsChangedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
}
virtualColumnsChanged
VirtualColumnsChangedEvent
The list of rendered columns changed (only columns in the visible scrolled viewport are rendered by default).
onVirtualColumnsChanged = (
    event: VirtualColumnsChangedEvent
) => void;

interface VirtualColumnsChangedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
}
columnEverythingChanged
ColumnEverythingChangedEvent
Shotgun - gets called when either a) new columns are set or b) columnApi.setState() is used, so everything has changed.
onColumnEverythingChanged = (
    event: ColumnEverythingChangedEvent
) => void;

interface ColumnEverythingChangedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  source: string;
}

Miscellaneous

gridReady
GridReadyEvent
The grid has initialised. Use this event if, for example, you need to use the grid's API to fix the columns to size.
onGridReady = (event: GridReadyEvent) => void;

interface GridReadyEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
}
gridSizeChanged
GridSizeChangedEvent
The size of the grid div has changed. In other words, the grid was resized.
onGridSizeChanged = (
    event: GridSizeChangedEvent
) => void;

interface GridSizeChangedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  // The grid's DIV's clientWidth 
  clientWidth: number;
  // The grid's DIV's clientHeight 
  clientHeight: number;
}
modelUpdated
ModelUpdatedEvent
Displayed rows have changed. Triggered after sort, filter or tree expand / collapse events.
onModelUpdated = (
    event: ModelUpdatedEvent
) => void;

interface ModelUpdatedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  // If true, the grid will try and animate the rows to the new positions 
  animate: boolean | undefined;
  // If true, the grid has new data loaded, eg user called setRowData(), otherwise
  // it's the same data but sorted or filtered, in which case this is true, and rows
  // can animate around (eg rowNode id 24 is the same row node as last time). 
  keepRenderedRows: boolean | undefined;
  // If true, then this update was a result of setRowData() getting called. This
  // gets the grid to scroll to the top again. 
  newData: boolean | undefined;
  // True when pagination and a new page is navigated to. 
  newPage: boolean;
}
firstDataRendered
FirstDataRenderedEvent
Fired the first time data is rendered into the grid.
onFirstDataRendered = (
    event: FirstDataRenderedEvent
) => void;

interface FirstDataRenderedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  // Index of the first rendered row 
  firstRow: number;
  // Index of the last rendered row 
  lastRow: number;
}
rowGroupOpened
RowGroupOpenedEvent
A row group was opened or closed.
onRowGroupOpened = (
    event: RowGroupOpenedEvent
) => void;

interface RowGroupOpenedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  node: RowNode;
  // The user provided data for the row 
  data: any;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: string | null;
  // The context as provided on `gridOptions.context` 
  context: any;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  // True if the group is expanded. 
  expanded: boolean;
}
expandOrCollapseAll
ExpandCollapseAllEvent
Fired when calling either of the API methods expandAll() or collapseAll().
onExpandOrCollapseAll = (
    event: ExpandCollapseAllEvent
) => void;

interface ExpandCollapseAllEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  source: string;
}
paginationChanged
PaginationChangedEvent

Triggered every time the paging state changes. Some of the most common scenarios for this event to be triggered are:

  • The page size changes
  • The current shown page is changed
  • New data is loaded onto the grid
onPaginationChanged = (
    event: PaginationChangedEvent
) => void;

interface PaginationChangedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  // True if rows were animated to new position 
  animate?: boolean;
  // True if rows were kept (otherwise complete redraw) 
  keepRenderedRows?: boolean;
  // True if data was new (i.e user set new data) 
  newData?: boolean;
  // True if user went to a new page 
  newPage: boolean;
}
pinnedRowDataChanged
PinnedRowDataChangedEvent
The client has set new pinned row data into the grid.
onPinnedRowDataChanged = (
    event: PinnedRowDataChangedEvent
) => void;

interface PinnedRowDataChangedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
}
virtualRowRemoved
VirtualRowRemovedEvent
A row was removed from the DOM, for any reason. Use to clean up resources (if any) used by the row.
onVirtualRowRemoved = (
    event: VirtualRowRemovedEvent
) => void;

interface VirtualRowRemovedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  node: RowNode;
  // The user provided data for the row 
  data: any;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: string | null;
  // The context as provided on `gridOptions.context` 
  context: any;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
}
viewportChanged
ViewportChangedEvent
Which rows are rendered in the DOM has changed.
onViewportChanged = (
    event: ViewportChangedEvent
) => void;

interface ViewportChangedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  // Index of the first rendered row 
  firstRow: number;
  // Index of the last rendered row 
  lastRow: number;
}
bodyScroll
BodyScrollEvent
The body was scrolled horizontally or vertically.
onBodyScroll = (event: BodyScrollEvent) => void;

interface BodyScrollEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  direction: ScrollDirection;
  left: number;
  top: number;
}
dragStarted
DragStartedEvent
When dragging starts. This could be any action that uses the grid's Drag and Drop service, e.g. Column Moving, Column Resizing, Range Selection, Fill Handle, etc.
onDragStarted = (
    event: DragStartedEvent
) => void;

interface DragStartedEvent {
  // One of {'cell','row','headerCell','toolPanel'} 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  // The DOM element that started the event. 
  target: HTMLElement;
}
dragStopped
DragStoppedEvent
When dragging stops. This could be any action that uses the grid's Drag and Drop service, e.g. Column Moving, Column Resizing, Range Selection, Fill Handle, etc.
onDragStopped = (
    event: DragStoppedEvent
) => void;

interface DragStoppedEvent {
  // One of {'cell','row','headerCell','toolPanel'} 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  // The DOM element that started the event. 
  target: HTMLElement;
}
rowDataChanged
RowDataChangedEvent
The client has set new data into the grid using api.setRowData() or by changing the rowData bound property.
onRowDataChanged = (
    event: RowDataChangedEvent
) => void;

interface RowDataChangedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
}
rowDataUpdated
RowDataUpdatedEvent
The client has updated data for the grid using api.applyTransaction(transaction) or by changing the rowData bound property with immutableData=true.
onRowDataUpdated = (
    event: RowDataUpdatedEvent
) => void;

interface RowDataUpdatedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
}
toolPanelVisibleChanged
ToolPanelVisibleChangedEvent
The tool panel was hidden or shown. Use api.isToolPanelShowing() to get status.
onToolPanelVisibleChanged = (
    event: ToolPanelVisibleChangedEvent
) => void;

interface ToolPanelVisibleChangedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  source: string | undefined;
}
componentStateChanged
ComponentStateChangedEvent
Only used by React, Angular and VueJS AG Grid components (not used if doing plain JavaScript or Angular 1.x). If the grid receives changes due to bound properties, this event fires after the grid has finished processing the change.
onComponentStateChanged = (
    event: ComponentStateChangedEvent
) => void;

interface ComponentStateChangedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
}
asyncTransactionsFlushed
AsyncTransactionsFlushed
Async transactions have been applied. Contains a list of all transaction results.
onAsyncTransactionsFlushed = (
    event: AsyncTransactionsFlushed
) => void;

interface AsyncTransactionsFlushed {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  results: (RowNodeTransaction | ServerSideTransactionResult)[];
}
cellKeyDown
CellKeyDownEvent | FullWidthCellKeyDownEvent
DOM event keyDown happened on a cell. See Keyboard Events.
onCellKeyDown = (
    event: CellKeyDownEvent | FullWidthCellKeyDownEvent
) => void;

interface CellKeyDownEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  node: RowNode;
  // The user provided data for the row 
  data: any;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: string | null;
  // The context as provided on `gridOptions.context` 
  context: any;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
}
interface FullWidthCellKeyDownEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  node: RowNode;
  // The user provided data for the row 
  data: any;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: string | null;
  // The context as provided on `gridOptions.context` 
  context: any;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
}
cellKeyPress
CellKeyPressEvent | FullWidthCellKeyPressEvent
DOM event keyPress happened on a cell. See Keyboard Events.
onCellKeyPress = (
    event: CellKeyPressEvent | FullWidthCellKeyPressEvent
) => void;

interface CellKeyPressEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  node: RowNode;
  // The user provided data for the row 
  data: any;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: string | null;
  // The context as provided on `gridOptions.context` 
  context: any;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
}
interface FullWidthCellKeyPressEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  node: RowNode;
  // The user provided data for the row 
  data: any;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: string | null;
  // The context as provided on `gridOptions.context` 
  context: any;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
}