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.

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> 

Registering via Grid Options

Registering the event onto the grid component as shown above is the recommendey way. However additionally a callback can be put on the Grid Options, if you are using a Grid Options object. 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'),
}

List of Events

The following are all events emitted by the grid. If using TypeScript, you can reference the interface for each event.

Accessories

toolPanelVisibleChanged
ToolPanelVisibleChangedEvent
The tool panel was hidden or shown. Use api.isToolPanelShowing() to get status.
onToolPanelVisibleChanged = (
    event: ToolPanelVisibleChangedEvent
) => void;

interface ToolPanelVisibleChangedEvent {
  source: string | undefined;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}

Clipboard

See Clipboard for more information.

pasteStart
PasteStartEvent
Paste operation has started. See Clipboard Events.
onPasteStart = (event: PasteStartEvent) => void;

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

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

Columns

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

interface ColumnVisibleEvent {
  // True if column was set to visible, false if set to hide 
  visible?: boolean;
  // 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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
columnPinned
ColumnPinnedEvent
A column, or group of columns, was pinned / unpinned.
onColumnPinned = (
    event: ColumnPinnedEvent
) => void;

interface ColumnPinnedEvent {
  // Either 'left', 'right', or null (it not pinned) 
  pinned: string | null;
  // 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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
columnResized
ColumnResizedEvent
A column was resized.
onColumnResized = (
    event: ColumnResizedEvent
) => void;

interface ColumnResizedEvent {
  // Set to true for last event in a sequence of move events 
  finished: boolean;
  // Any columns resized due to flex 
  flexColumns: Column[] | null;
  // 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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
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 {
  // The position the column was moved to 
  toIndex?: number;
  // 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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
columnValueChanged
ColumnValueChangedEvent
A value column was added or removed.
onColumnValueChanged = (
    event: ColumnValueChangedEvent
) => void;

interface ColumnValueChangedEvent {
  // 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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
columnPivotModeChanged
ColumnPivotModeChangedEvent
The pivot mode flag was changed.
onColumnPivotModeChanged = (
    event: ColumnPivotModeChangedEvent
) => void;

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

interface ColumnPivotChangedEvent {
  // 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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
columnGroupOpened
ColumnGroupOpenedEvent
A column group was opened / closed.
onColumnGroupOpened = (
    event: ColumnGroupOpenedEvent
) => void;

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

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

interface GridColumnsChangedEvent {
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
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 {
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
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 {
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
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 {
  source: string;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}

Components

See Components for more information.

componentStateChanged
ComponentStateChangedEvent
Only used by Angular, React and VueJS AG Grid components (not used if doing plain JavaScript). 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 {
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}

Editing

See Cell Editing for more information.

cellValueChanged
CellValueChangedEvent
Value has changed after editing. This event will not fire if editing was cancelled (eg ESC was pressed).
onCellValueChanged = (
    event: CellValueChangedEvent
) => void;

interface CellValueChangedEvent {
  oldValue: any;
  newValue: any;
  source: string | undefined;
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
  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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
cellEditRequest
CellEditRequestEvent
Value has changed after editing. Only fires when doing Read Only Edits, ie readOnlyEdit=true. See Read Only Edits.
onCellEditRequest = (
    event: CellEditRequestEvent
) => void;

interface CellEditRequestEvent {
  oldValue: any;
  newValue: any;
  source: string | undefined;
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
  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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
rowValueChanged
RowValueChangedEvent
A cell's value within a row has changed. This event corresponds to Full Row Editing only. See Full Row Editing.
onRowValueChanged = (
    event: RowValueChangedEvent
) => void;

interface RowValueChangedEvent {
  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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
cellEditingStarted
CellEditingStartedEvent
Editing a cell has started.
onCellEditingStarted = (
    event: CellEditingStartedEvent
) => void;

interface CellEditingStartedEvent {
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
  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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
cellEditingStopped
CellEditingStoppedEvent
Editing a cell has stopped.
onCellEditingStopped = (
    event: CellEditingStoppedEvent
) => void;

interface CellEditingStoppedEvent {
  // The old value before editing 
  oldValue: any;
  // The new value after editing 
  newValue: any;
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
  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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
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. Only fires when doing Full Row Editing. See Full Row Editing.
onRowEditingStarted = (
    event: RowEditingStartedEvent
) => void;

interface RowEditingStartedEvent {
  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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
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. Only fires when doing Full Row Editing. See Full Row Editing.
onRowEditingStopped = (
    event: RowEditingStoppedEvent
) => void;

interface RowEditingStoppedEvent {
  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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}

Filtering

See Filtering for more information.

filterOpened
FilterOpenedEvent
Filter has been opened.
onFilterOpened = (
    event: FilterOpenedEvent
) => void;

interface FilterOpenedEvent {
  // Column / OriginalColumnGroup that contains the filter 
  column: Column | ProvidedColumnGroup;
  // Source of the open request 
  source: FilterRequestSource;
  // Parent element of the filter 
  eGui: HTMLElement;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}

type FilterRequestSource = 
      'COLUMN_MENU' 
    | 'TOOLBAR' 
    | 'NO_UI'
filterChanged
FilterChangedEvent
Filter has been modified and applied.
onFilterChanged = (
    event: FilterChangedEvent
) => void;

interface FilterChangedEvent {
  // True if the filter was changed as a result of data changing 
  afterDataChange?: boolean;
  // True if filter was changed via floating filter 
  afterFloatingFilter?: boolean;
  // Columns affected by the filter change. Array contents depend on the source of the event.
  // 
  // - Expect 1 element for UI-driven column filter changes.
  // - Expect 0-N elements (all affected columns) for calls to `gridOptions.api.setFilterModel()`.
  // - Expect 0-N elements (removed columns) for calls to `gridOptions.api.setColumnDefs()`.
  // - Expect 0 elements for quick-filters and calls to `gridOptions.api.onFilterChanged()`. 
  columns: Column[];
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
filterModified
FilterModifiedEvent
Filter was modified but not applied. Used when filters have 'Apply' buttons.
onFilterModified = (
    event: FilterModifiedEvent
) => void;

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

Integrated Charts

See Integrated Charts Events for more information.

chartCreated
ChartCreated
A chart has been created.
onChartCreated = (event: ChartCreated) => void;

interface ChartCreated {
  // Will always be `chartCreated`. 
  type: string;
  // Id of the created chart. This can later be used to reference the chart via api methods. 
  chartId: string;
  api: GridApi;
  columnApi: ColumnApi;
}
chartRangeSelectionChanged
ChartRangeSelectionChanged
The data range for the chart has been changed.
onChartRangeSelectionChanged = (
    event: ChartRangeSelectionChanged
) => void;

interface ChartRangeSelectionChanged {
  // Will always be `chartRangeSelectionChanged`. 
  type: string;
  // Id of the effected chart. 
  chartId: string;
  // Same as `chartId`. 
  id: string;
  // New cellRange selected. 
  cellRange: CellRangeParams;
  api: GridApi;
  columnApi: ColumnApi;
}

interface CellRangeParams {
  // Start row index 
  rowStartIndex: number | null;
  // Pinned state of start row. Either 'top', 'bottom' or null 
  rowStartPinned?: string | null;
  // End row index 
  rowEndIndex: number | null;
  // Pinned state of end row. Either 'top', 'bottom' or null 
  rowEndPinned?: string | null;
  // Starting column for range 
  columnStart?: string | Column;
  // End column for range 
  columnEnd?: string | Column;
  // Specify Columns to include instead of using `columnStart` and `columnEnd` 
  columns?: (string | Column)[];
}
chartOptionsChanged
ChartOptionsChanged
Formatting changes have been made by users through the Format Panel.
onChartOptionsChanged = (
    event: ChartOptionsChanged
) => void;

interface ChartOptionsChanged {
  // Will always be `chartOptionsChanged`. 
  type: string;
  // Id of the effected chart. 
  chartId: string;
  // ChartType 
  chartType: ChartType;
  // Chart theme name of currently selected theme. 
  chartThemeName: string;
  // Chart options. 
  chartOptions: AgChartThemeOverrides;
  api: GridApi;
  columnApi: ColumnApi;
}

type ChartType = 
      'column' 
    | 'groupedColumn' 
    | 'stackedColumn' 
    | 'normalizedColumn' 
    | 'bar' 
    | 'groupedBar' 
    | 'stackedBar' 
    | 'normalizedBar' 
    | 'line' 
    | 'scatter' 
    | 'bubble' 
    | 'pie' 
    | 'doughnut' 
    | 'area' 
    | 'stackedArea' 
    | 'normalizedArea' 
    | 'histogram' 
    | 'columnLineCombo' 
    | 'areaColumnCombo' 
    | 'customCombo'
chartDestroyed
ChartDestroyed
A chart has been destroyed.
onChartDestroyed = (event: ChartDestroyed) => void;

interface ChartDestroyed {
  // Will always be `chartDestroyed`. 
  type: string;
  // Id of the effected chart. 
  chartId: string;
  api: GridApi;
  columnApi: ColumnApi;
}

Keyboard Navigation

See Keyboard Navigation for more information.

cellKeyDown
CellKeyDownEvent | FullWidthCellKeyDownEvent
DOM event keyDown happened on a cell. See Keyboard Events.
onCellKeyDown = (
    event: CellKeyDownEvent | FullWidthCellKeyDownEvent
) => void;

interface CellKeyDownEvent {
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
  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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}

interface FullWidthCellKeyDownEvent {
  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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
cellKeyPress
CellKeyPressEvent | FullWidthCellKeyPressEvent
DOM event keyPress happened on a cell. See Keyboard Events.
onCellKeyPress = (
    event: CellKeyPressEvent | FullWidthCellKeyPressEvent
) => void;

interface CellKeyPressEvent {
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
  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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}

interface FullWidthCellKeyPressEvent {
  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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}

Miscellaneous

gridReady
GridReadyEvent
The grid has initialised and is ready for most api calls, but may not be fully rendered yet
onGridReady = (event: GridReadyEvent) => void;

interface GridReadyEvent {
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
firstDataRendered
FirstDataRenderedEvent
Fired the first time data is rendered into the grid. Use this event if you want to auto resize columns based on their contents
onFirstDataRendered = (
    event: FirstDataRenderedEvent
) => void;

interface FirstDataRenderedEvent {
  // Index of the first rendered row 
  firstRow: number;
  // Index of the last rendered row 
  lastRow: number;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
gridSizeChanged
GridSizeChangedEvent
The size of the grid div has changed. In other words, the grid was resized.
onGridSizeChanged = (
    event: GridSizeChangedEvent
) => void;

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

interface ModelUpdatedEvent {
  // 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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
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 {
  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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
viewportChanged
ViewportChangedEvent
Which rows are rendered in the DOM has changed.
onViewportChanged = (
    event: ViewportChangedEvent
) => void;

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

interface BodyScrollEvent {
  direction: ScrollDirection;
  left: number;
  top: number;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}

type ScrollDirection = 
      'horizontal' 
    | 'vertical'
bodyScrollEnd
BodyScrollEndEvent
Main body of the grid has stopped scrolling, either horizontally or vertically.
onBodyScrollEnd = (
    event: BodyScrollEndEvent
) => void;

interface BodyScrollEndEvent {
  direction: ScrollDirection;
  left: number;
  top: number;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}

type ScrollDirection = 
      'horizontal' 
    | 'vertical'
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;
  // The DOM element that started the event. 
  target: HTMLElement;
  api: GridApi;
  columnApi: ColumnApi;
}
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;
  // The DOM element that started the event. 
  target: HTMLElement;
  api: GridApi;
  columnApi: ColumnApi;
}

Pagination

See Row Pagination for more information.

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 {
  // 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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}

Row Drag and Drop

See Row Dragging for more information.

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: One of rowDragEnter, rowDragMove, rowDragEnd, rowDragLeave 
  type: string;
  // 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 underlying mouse move event associated with the drag. 
  event: MouseEvent;
  // Direction of the drag, either `'up'`, `'down'` or `null` (if mouse is moving horizontally and not vertically). 
  vDirection: string;
  // The row index the mouse is dragging over or -1 if over no row. 
  overIndex: number;
  // The row node the mouse is dragging over or undefined if over no row. 
  overNode?: RowNode;
  // The vertical pixel location the mouse is over, with `0` meaning the top of the first row.
  // This can be compared to the `rowNode.rowHeight` and `rowNode.rowTop` to work out the mouse position relative to rows.
  // The provided attributes `overIndex` and `overNode` means the `y` property is mostly redundant.
  // The `y` property can be handy if you want more information such as 'how close is the mouse to the top or bottom of the row?' 
  y: number;
  api: GridApi;
  columnApi: ColumnApi;
}
rowDragMove
RowDragEvent
The mouse has moved while dragging.
onRowDragMove = (event: RowDragEvent) => void;

interface RowDragEvent {
  // Event identifier: One of rowDragEnter, rowDragMove, rowDragEnd, rowDragLeave 
  type: string;
  // 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 underlying mouse move event associated with the drag. 
  event: MouseEvent;
  // Direction of the drag, either `'up'`, `'down'` or `null` (if mouse is moving horizontally and not vertically). 
  vDirection: string;
  // The row index the mouse is dragging over or -1 if over no row. 
  overIndex: number;
  // The row node the mouse is dragging over or undefined if over no row. 
  overNode?: RowNode;
  // The vertical pixel location the mouse is over, with `0` meaning the top of the first row.
  // This can be compared to the `rowNode.rowHeight` and `rowNode.rowTop` to work out the mouse position relative to rows.
  // The provided attributes `overIndex` and `overNode` means the `y` property is mostly redundant.
  // The `y` property can be handy if you want more information such as 'how close is the mouse to the top or bottom of the row?' 
  y: number;
  api: GridApi;
  columnApi: ColumnApi;
}
rowDragLeave
RowDragEvent
The mouse has left the grid while dragging.
onRowDragLeave = (event: RowDragEvent) => void;

interface RowDragEvent {
  // Event identifier: One of rowDragEnter, rowDragMove, rowDragEnd, rowDragLeave 
  type: string;
  // 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 underlying mouse move event associated with the drag. 
  event: MouseEvent;
  // Direction of the drag, either `'up'`, `'down'` or `null` (if mouse is moving horizontally and not vertically). 
  vDirection: string;
  // The row index the mouse is dragging over or -1 if over no row. 
  overIndex: number;
  // The row node the mouse is dragging over or undefined if over no row. 
  overNode?: RowNode;
  // The vertical pixel location the mouse is over, with `0` meaning the top of the first row.
  // This can be compared to the `rowNode.rowHeight` and `rowNode.rowTop` to work out the mouse position relative to rows.
  // The provided attributes `overIndex` and `overNode` means the `y` property is mostly redundant.
  // The `y` property can be handy if you want more information such as 'how close is the mouse to the top or bottom of the row?' 
  y: number;
  api: GridApi;
  columnApi: ColumnApi;
}
rowDragEnd
RowDragEvent
The drag has finished over the grid.
onRowDragEnd = (event: RowDragEvent) => void;

interface RowDragEvent {
  // Event identifier: One of rowDragEnter, rowDragMove, rowDragEnd, rowDragLeave 
  type: string;
  // 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 underlying mouse move event associated with the drag. 
  event: MouseEvent;
  // Direction of the drag, either `'up'`, `'down'` or `null` (if mouse is moving horizontally and not vertically). 
  vDirection: string;
  // The row index the mouse is dragging over or -1 if over no row. 
  overIndex: number;
  // The row node the mouse is dragging over or undefined if over no row. 
  overNode?: RowNode;
  // The vertical pixel location the mouse is over, with `0` meaning the top of the first row.
  // This can be compared to the `rowNode.rowHeight` and `rowNode.rowTop` to work out the mouse position relative to rows.
  // The provided attributes `overIndex` and `overNode` means the `y` property is mostly redundant.
  // The `y` property can be handy if you want more information such as 'how close is the mouse to the top or bottom of the row?' 
  y: number;
  api: GridApi;
  columnApi: ColumnApi;
}

Row Grouping

See Row Grouping for more information.

columnRowGroupChanged
ColumnRowGroupChangedEvent
A row group column was added or removed.
onColumnRowGroupChanged = (
    event: ColumnRowGroupChangedEvent
) => void;

interface ColumnRowGroupChangedEvent {
  // 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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
rowGroupOpened
RowGroupOpenedEvent
A row group was opened or closed.
onRowGroupOpened = (
    event: RowGroupOpenedEvent
) => void;

interface RowGroupOpenedEvent {
  // True if the group is expanded. 
  expanded: boolean;
  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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
expandOrCollapseAll
ExpandCollapseAllEvent
Fired when calling either of the API methods expandAll() or collapseAll().
onExpandOrCollapseAll = (
    event: ExpandCollapseAllEvent
) => void;

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

Row Pinning

See Row Pinning for more information.

pinnedRowDataChanged
PinnedRowDataChangedEvent
The client has set new pinned row data into the grid.
onPinnedRowDataChanged = (
    event: PinnedRowDataChangedEvent
) => void;

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

RowModel: Client-Side

See Client-Side Row Model for more information.

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 {
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
rowDataUpdated
RowDataUpdatedEvent
The client has updated data for the grid using api.applyTransaction(transaction) or by setting new Row Data and Row ID's are provided (as this results in a transaction underneath the hood).
onRowDataUpdated = (
    event: RowDataUpdatedEvent
) => void;

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

interface AsyncTransactionsFlushed {
  // Array of result objects. for SSRM it's always list of `ServerSideTransactionResult`.
  // For Client-Side Row Model it's a list of `RowNodeTransaction`. 
  results: (RowNodeTransaction | ServerSideTransactionResult)[];
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}

interface RowNodeTransaction {
  // Row nodes added 
  add: RowNode[];
  // Row nodes removed 
  remove: RowNode[];
  // Row nodes updated 
  update: RowNode[];
}

interface ServerSideTransactionResult {
  // The status of applying the transaction. 
  status: ServerSideTransactionResultStatus;
  // If rows were added, the newly created Row Nodes for those rows. 
  add?: RowNode[];
  // If rows were removed, the deleted Row Nodes. 
  remove?: RowNode[];
  // If rows were updated, the updated Row Nodes. 
  update?: RowNode[];
}

enum ServerSideTransactionResultStatus {
  // Transaction was successfully applied 
  Applied = 'Applied'
  // Store was not found, transaction not applied.
  // Either invalid route, or the parent row has not yet been expanded. 
  StoreNotFound = 'StoreNotFound'
  // Store is loading, transaction not applied. 
  StoreLoading = 'StoreLoading'
  // Store is loading (as max loads exceeded), transaction not applied. 
  StoreWaitingToLoad = 'StoreWaitingToLoad'
  // Store load attempt failed, transaction not applied. 
  StoreLoadingFailed = 'StoreLoadingFailed'
  // Store is type Partial, which doesn't accept transactions 
  StoreWrongType = 'StoreWrongType'
  // Transaction was cancelled, due to grid.
  // Callback isApplyServerSideTransaction() returning false 
  Cancelled = 'Cancelled'
}

Selection

See Selection Overview for more information.

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

interface CellClickedEvent {
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
  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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
cellDoubleClicked
CellDoubleClickedEvent
Cell is double clicked.
onCellDoubleClicked = (
    event: CellDoubleClickedEvent
) => void;

interface CellDoubleClickedEvent {
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
  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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
cellFocused
CellFocusedEvent
Cell is focused.
onCellFocused = (
    event: CellFocusedEvent
) => void;

interface CellFocusedEvent {
  // 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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
cellMouseOver
CellMouseOverEvent
Mouse entered cell.
onCellMouseOver = (
    event: CellMouseOverEvent
) => void;

interface CellMouseOverEvent {
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
  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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
cellMouseOut
CellMouseOutEvent
Mouse left cell.
onCellMouseOut = (
    event: CellMouseOutEvent
) => void;

interface CellMouseOutEvent {
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
  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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
cellMouseDown
CellMouseDownEvent
Mouse down on cell.
onCellMouseDown = (
    event: CellMouseDownEvent
) => void;

interface CellMouseDownEvent {
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
  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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
rowClicked
RowClickedEvent
Row is clicked.
onRowClicked = (event: RowClickedEvent) => void;

interface RowClickedEvent {
  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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
rowDoubleClicked
RowDoubleClickedEvent
Row is double clicked.
onRowDoubleClicked = (
    event: RowDoubleClickedEvent
) => void;

interface RowDoubleClickedEvent {
  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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
rowSelected
RowSelectedEvent
Row is selected or deselected. The event contains the node in question, so call the node's isSelected() method to see if it was just selected or deselected.
onRowSelected = (
    event: RowSelectedEvent
) => void;

interface RowSelectedEvent {
  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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
selectionChanged
SelectionChangedEvent
Row selection is changed. Use the grid API getSelectedNodes() to get the new list of selected nodes.
onSelectionChanged = (
    event: SelectionChangedEvent
) => void;

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

interface CellContextMenuEvent {
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
  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;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
rangeSelectionChanged
RangeSelectionChangedEvent
A change to range selection has occurred.
onRangeSelectionChanged = (
    event: RangeSelectionChangedEvent
) => void;

interface RangeSelectionChangedEvent {
  id?: string;
  // True for the first change event, otherwise false 
  started: boolean;
  // True for the last change event, otherwise false 
  finished: boolean;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}

Sorting

See Row Sorting for more information.

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

interface SortChangedEvent {
  // Source of the sort change. 
  source: string;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}