Results:
Loading...
Javascript Data GridJavascriptReact Data GridReactAngular Data GridAngularVue Data GridVue

Angular Data Grid: Grid Events

This is a list of the events that the grid raises.

Provide your event handler to the relevant Output property on the ag-grid-angular component. Note that the 'on' prefix is not part of the output name. 

<ag-grid-angular (cellClicked)="onCellClicked($event)">

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<TData>
) => void;

interface ToolPanelVisibleChangedEvent<TData = any, TContext = any> {
  source: string | undefined;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}
toolPanelSizeChanged
ToolPanelSizeChangedEvent
The tool panel size has been changed. 
onToolPanelSizeChanged = (
    event: ToolPanelSizeChangedEvent<TData>
) => void;

interface ToolPanelSizeChangedEvent<TData = any, TContext = any> {
  // Event identifier 
  type: 'toolPanelSizeChanged';
  // True if this is the first change to the Tool Panel size. 
  started: boolean;
  // True if this is the last change to the Tool Panel size. 
  ended: boolean;
  // New width of the ToolPanel component. 
  width: number;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
}

Clipboard

See Clipboard for more information.

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

interface PasteStartEvent<TData = any, TContext = any> {
  source: string;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}
pasteEnd
PasteEndEvent
Paste operation has ended. See Clipboard Events.
onPasteEnd = (
    event: PasteEndEvent<TData>
) => void;

interface PasteEndEvent<TData = any, TContext = any> {
  source: string;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

Columns

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

interface ColumnVisibleEvent<TData = any, TContext = any> {
  // 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;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}
columnPinned
ColumnPinnedEvent
A column, or group of columns, was pinned / unpinned. 
onColumnPinned = (
    event: ColumnPinnedEvent<TData>
) => void;

interface ColumnPinnedEvent<TData = any, TContext = any> {
  // Either 'left', 'right', or null (it not pinned) 
  pinned: ColumnPinnedType;
  // 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 grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

type ColumnPinnedType = 
      'left' 
    | 'right' 
    | boolean 
    | null 
    | undefined
columnResized
ColumnResizedEvent
A column was resized. 
onColumnResized = (
    event: ColumnResizedEvent<TData>
) => void;

interface ColumnResizedEvent<TData = any, TContext = any> {
  // 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;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}
columnMoved
ColumnMovedEvent
A column was moved. 
onColumnMoved = (
    event: ColumnMovedEvent<TData>
) => void;

interface ColumnMovedEvent<TData = any, TContext = any> {
  // The position the column was moved to 
  toIndex?: number;
  // `True` when the column has finished moving. 
  finished: 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;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}
columnValueChanged
ColumnValueChangedEvent
A value column was added or removed. 
onColumnValueChanged = (
    event: ColumnValueChangedEvent<TData>
) => void;

interface ColumnValueChangedEvent<TData = any, TContext = any> {
  // 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 grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}
columnPivotModeChanged
ColumnPivotModeChangedEvent
The pivot mode flag was changed. 
onColumnPivotModeChanged = (
    event: ColumnPivotModeChangedEvent<TData>
) => void;

interface ColumnPivotModeChangedEvent<TData = any, TContext = any> {
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}
columnPivotChanged
ColumnPivotChangedEvent
A pivot column was added, removed or order changed. 
onColumnPivotChanged = (
    event: ColumnPivotChangedEvent<TData>
) => void;

interface ColumnPivotChangedEvent<TData = any, TContext = any> {
  // 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 grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}
columnGroupOpened
ColumnGroupOpenedEvent
A column group was opened / closed. 
onColumnGroupOpened = (
    event: ColumnGroupOpenedEvent<TData>
) => void;

interface ColumnGroupOpenedEvent<TData = any, TContext = any> {
  columnGroup: ProvidedColumnGroup;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}
newColumnsLoaded
NewColumnsLoadedEvent
User set new columns. 
onNewColumnsLoaded = (
    event: NewColumnsLoadedEvent<TData>
) => void;

interface NewColumnsLoadedEvent<TData = any, TContext = any> {
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}
gridColumnsChanged
GridColumnsChangedEvent
The list of grid columns changed. 
onGridColumnsChanged = (
    event: GridColumnsChangedEvent<TData>
) => void;

interface GridColumnsChangedEvent<TData = any, TContext = any> {
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // 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<TData>
) => void;

interface DisplayedColumnsChangedEvent<TData = any, TContext = any> {
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // 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<TData>
) => void;

interface VirtualColumnsChangedEvent<TData = any, TContext = any> {
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}
columnEverythingChanged
ColumnEverythingChangedEvent
Shotgun - gets called when either a) new columns are set or b) columnApi.applyColumnState() is used, so everything has changed. 
onColumnEverythingChanged = (
    event: ColumnEverythingChangedEvent<TData>
) => void;

interface ColumnEverythingChangedEvent<TData = any, TContext = any> {
  source: string;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // 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<TData>
) => void;

interface ComponentStateChangedEvent<TData = any, TContext = any> {
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // 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) or if cell value has changed as a result of cut, paste, cell clear (pressing Delete key), fill handle, copy range down, undo and redo. 
onCellValueChanged = (
    event: CellValueChangedEvent<TData>
) => void;

interface CellValueChangedEvent<TData = any, TValue = any> {
  oldValue: any;
  newValue: any;
  source: string | undefined;
  column: Column;
  colDef: ColDef<TData>;
  // The value for the cell 
  value: TValue;
  // The user provided data for the row. 
  data: TData;
  // The row node. 
  node: IRowNode<TData>;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: RowPinnedType;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  // If the browser `event` is present the `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined
cellEditRequest
CellEditRequestEvent
Value has changed after editing. Only fires when readOnlyEdit=true. See Read Only Edit.
onCellEditRequest = (
    event: CellEditRequestEvent<TData>
) => void;

interface CellEditRequestEvent<TData = any, TValue = any> {
  oldValue: any;
  newValue: any;
  source: string | undefined;
  column: Column;
  colDef: ColDef<TData>;
  // The value for the cell 
  value: TValue;
  // The user provided data for the row. 
  data: TData;
  // The row node. 
  node: IRowNode<TData>;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: RowPinnedType;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  // If the browser `event` is present the `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined
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<TData>
) => void;

interface RowValueChangedEvent<TData = any, TContext = any> {
  // The user provided data for the row. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The row node. 
  node: IRowNode<TData>;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: RowPinnedType;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  // If the browser `event` is present the `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined
cellEditingStarted
CellEditingStartedEvent
Editing a cell has started. 
onCellEditingStarted = (
    event: CellEditingStartedEvent<TData>
) => void;

interface CellEditingStartedEvent<TData = any, TValue = any> {
  column: Column;
  colDef: ColDef<TData>;
  // The value for the cell 
  value: TValue;
  // The user provided data for the row. 
  data: TData;
  // The row node. 
  node: IRowNode<TData>;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: RowPinnedType;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  // If the browser `event` is present the `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined
cellEditingStopped
CellEditingStoppedEvent
Editing a cell has stopped. 
onCellEditingStopped = (
    event: CellEditingStoppedEvent<TData>
) => void;

interface CellEditingStoppedEvent<TData = any, TValue = any> {
  // The old value before editing 
  oldValue: any;
  // The new value after editing 
  newValue: any;
  // Property indicating if the value of the editor has changed 
  valueChanged: boolean;
  column: Column;
  colDef: ColDef<TData>;
  // The value for the cell 
  value: TValue;
  // The user provided data for the row. 
  data: TData;
  // The row node. 
  node: IRowNode<TData>;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: RowPinnedType;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  // If the browser `event` is present the `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined
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<TData>
) => void;

interface RowEditingStartedEvent<TData = any, TContext = any> {
  // The user provided data for the row. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The row node. 
  node: IRowNode<TData>;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: RowPinnedType;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  // If the browser `event` is present the `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined
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<TData>
) => void;

interface RowEditingStoppedEvent<TData = any, TContext = any> {
  // The user provided data for the row. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The row node. 
  node: IRowNode<TData>;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: RowPinnedType;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  // If the browser `event` is present the `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined
undoStarted
UndoStartedEvent
Undo operation has started. See Undo / Redo Events.
onUndoStarted = (
    event: UndoStartedEvent<TData>
) => void;

interface UndoStartedEvent<TData = any, TContext = any> {
  // Source of the event. `api` if via API method. `ui` if via keyboard shortcut. 
  source: 'api' | 'ui';
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}
undoEnded
UndoEndedEvent
Undo operation has ended. See Undo / Redo Events.
onUndoEnded = (
    event: UndoEndedEvent<TData>
) => void;

interface UndoEndedEvent<TData = any, TContext = any> {
  // Source of the event. `api` if via API method. `ui` if via keyboard shortcut. 
  source: 'api' | 'ui';
  // `true` if any undo operations were performed. 
  operationPerformed: boolean;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}
redoStarted
RedoStartedEvent
Redo operation has started. See Undo / Redo Events.
onRedoStarted = (
    event: RedoStartedEvent<TData>
) => void;

interface RedoStartedEvent<TData = any, TContext = any> {
  // Source of the event. `api` if via API method. `ui` if via keyboard shortcut. 
  source: 'api' | 'ui';
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}
redoEnded
RedoEndedEvent
Redo operation has ended. See Undo / Redo Events.
onRedoEnded = (
    event: RedoEndedEvent<TData>
) => void;

interface RedoEndedEvent<TData = any, TContext = any> {
  // Source of the event. `api` if via API method. `ui` if via keyboard shortcut. 
  source: 'api' | 'ui';
  // `true` if any redo operations were performed. 
  operationPerformed: boolean;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

Filtering

See Filtering for more information.

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

interface FilterOpenedEvent<TData = any, TContext = any> {
  // Column / OriginalColumnGroup that contains the filter 
  column: Column | ProvidedColumnGroup;
  // Source of the open request 
  source: FilterRequestSource;
  // Parent element of the filter 
  eGui: HTMLElement;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

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

interface FilterChangedEvent<TData = any, TContext = any> {
  // 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[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}
filterModified
FilterModifiedEvent
Filter was modified but not applied. Used when filters have 'Apply' buttons. 
onFilterModified = (
    event: FilterModifiedEvent<TData>
) => void;

interface FilterModifiedEvent<TData = any, TContext = any> {
  filterInstance: IFilterComp;
  column: Column;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

Integrated Charts

See Integrated Charts Events for more information.

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

interface ChartCreated<TData = any, TContext = any> {
  // 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;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
}
chartRangeSelectionChanged
ChartRangeSelectionChanged
The data range for the chart has been changed. 
onChartRangeSelectionChanged = (
    event: ChartRangeSelectionChanged<TData>
) => void;

interface ChartRangeSelectionChanged<TData = any, TContext = any> {
  // Will always be `chartRangeSelectionChanged`. 
  type: string;
  // Id of the effected chart. 
  chartId: string;
  // Same as `chartId`. 
  id: string;
  // New cellRange selected. 
  cellRange: CellRangeParams;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
}

interface CellRangeParams {
  // Start row index 
  rowStartIndex: number | null;
  // Pinned state of start row. Either 'top', 'bottom' or null 
  rowStartPinned?: RowPinnedType;
  // End row index 
  rowEndIndex: number | null;
  // Pinned state of end row. Either 'top', 'bottom' or null 
  rowEndPinned?: RowPinnedType;
  // 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)[];
}

type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined
chartOptionsChanged
ChartOptionsChanged
Formatting changes have been made by users through the Format Panel. 
onChartOptionsChanged = (
    event: ChartOptionsChanged<TData>
) => void;

interface ChartOptionsChanged<TData = any, TContext = any> {
  // 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;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
}

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<TData>
) => void;

interface ChartDestroyed<TData = any, TContext = any> {
  // Will always be `chartDestroyed`. 
  type: string;
  // Id of the effected chart. 
  chartId: string;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
}

Keyboard Navigation

See Keyboard Navigation for more information.

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

interface CellKeyDownEvent<TData = any, TValue = any> {
  column: Column;
  colDef: ColDef<TData>;
  // The value for the cell if available otherwise undefined. 
  value: TValue | undefined;
  // The user provided data for the row. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The row node. 
  node: IRowNode<TData>;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: RowPinnedType;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  // If the browser `event` is present the `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined


interface FullWidthCellKeyDownEvent<TData = any, TContext = any> {
  // The user provided data for the row. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The row node. 
  node: IRowNode<TData>;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: RowPinnedType;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  // If the browser `event` is present the `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}
cellKeyPress
CellKeyPressEvent | FullWidthCellKeyPressEvent
DOM event keyPress happened on a cell. See Keyboard Events.
onCellKeyPress = (
    event: CellKeyPressEvent<TData> | FullWidthCellKeyPressEvent<TData>
) => void;

interface CellKeyPressEvent<TData = any, TValue = any> {
  column: Column;
  colDef: ColDef<TData>;
  // The value for the cell if available otherwise undefined. 
  value: TValue | undefined;
  // The user provided data for the row. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The row node. 
  node: IRowNode<TData>;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: RowPinnedType;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  // If the browser `event` is present the `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined


interface FullWidthCellKeyPressEvent<TData = any, TContext = any> {
  // The user provided data for the row. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The row node. 
  node: IRowNode<TData>;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: RowPinnedType;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  // If the browser `event` is present the `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // 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<TData>
) => void;

interface GridReadyEvent<TData = any, TContext = any> {
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // 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<TData>
) => void;

interface FirstDataRenderedEvent<TData = any, TContext = any> {
  // Index of the first rendered row 
  firstRow: number;
  // Index of the last rendered row 
  lastRow: number;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}
gridSizeChanged
GridSizeChangedEvent
The size of the grid div has changed. In other words, the grid was resized. 
onGridSizeChanged = (
    event: GridSizeChangedEvent<TData>
) => void;

interface GridSizeChangedEvent<TData = any, TContext = any> {
  // The grid's DIV's clientWidth 
  clientWidth: number;
  // The grid's DIV's clientHeight 
  clientHeight: number;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}
modelUpdated
ModelUpdatedEvent
Displayed rows have changed. Triggered after sort, filter or tree expand / collapse events. 
onModelUpdated = (
    event: ModelUpdatedEvent<TData>
) => void;

interface ModelUpdatedEvent<TData = any, TContext = any> {
  // 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;
  // true if all we did is changed row height, data still the same, no need to clear the undo/redo stacks 
  keepUndoRedoStack?: boolean;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // 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<TData>
) => void;

interface VirtualRowRemovedEvent<TData = any, TContext = any> {
  // The user provided data for the row. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The row node. 
  node: IRowNode<TData>;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: RowPinnedType;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  // If the browser `event` is present the `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined
viewportChanged
ViewportChangedEvent
Which rows are rendered in the DOM has changed. 
onViewportChanged = (
    event: ViewportChangedEvent<TData>
) => void;

interface ViewportChangedEvent<TData = any, TContext = any> {
  // Index of the first rendered row 
  firstRow: number;
  // Index of the last rendered row 
  lastRow: number;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}
bodyScroll
BodyScrollEvent
The body was scrolled horizontally or vertically. 
onBodyScroll = (
    event: BodyScrollEvent<TData>
) => void;

interface BodyScrollEvent<TData = any, TContext = any> {
  direction: ScrollDirection;
  left: number;
  top: number;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // 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<TData>
) => void;

interface BodyScrollEndEvent<TData = any, TContext = any> {
  direction: ScrollDirection;
  left: number;
  top: number;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // 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<TData>
) => void;

interface DragStartedEvent<TData = any, TContext = any> {
  // Event identifier 
  type: 'dragStarted';
  // The DOM element that started the event. 
  target: HTMLElement;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
}
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<TData>
) => void;

interface DragStoppedEvent<TData = any, TContext = any> {
  // Event identifier 
  type: 'dragStopped';
  // The DOM element that started the event. 
  target: HTMLElement;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
}

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<TData>
) => void;

interface PaginationChangedEvent<TData = any, TContext = any> {
  // 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;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // 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<TData>
) => void;

interface RowDragEvent<TData = any, TContext = any> {
  // 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: IRowNode<TData>;
  // The list of nodes being dragged. 
  nodes: IRowNode<TData>[];
  // The underlying mouse move event associated with the drag. 
  event: MouseEvent;
  // The `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // 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?: IRowNode<TData>;
  // 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;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
}
rowDragMove
RowDragEvent
The mouse has moved while dragging. 
onRowDragMove = (
    event: RowDragEvent<TData>
) => void;

interface RowDragEvent<TData = any, TContext = any> {
  // 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: IRowNode<TData>;
  // The list of nodes being dragged. 
  nodes: IRowNode<TData>[];
  // The underlying mouse move event associated with the drag. 
  event: MouseEvent;
  // The `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // 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?: IRowNode<TData>;
  // 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;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
}
rowDragLeave
RowDragEvent
The mouse has left the grid while dragging. 
onRowDragLeave = (
    event: RowDragEvent<TData>
) => void;

interface RowDragEvent<TData = any, TContext = any> {
  // 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: IRowNode<TData>;
  // The list of nodes being dragged. 
  nodes: IRowNode<TData>[];
  // The underlying mouse move event associated with the drag. 
  event: MouseEvent;
  // The `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // 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?: IRowNode<TData>;
  // 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;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
}
rowDragEnd
RowDragEvent
The drag has finished over the grid. 
onRowDragEnd = (
    event: RowDragEvent<TData>
) => void;

interface RowDragEvent<TData = any, TContext = any> {
  // 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: IRowNode<TData>;
  // The list of nodes being dragged. 
  nodes: IRowNode<TData>[];
  // The underlying mouse move event associated with the drag. 
  event: MouseEvent;
  // The `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // 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?: IRowNode<TData>;
  // 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;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
}

Row Grouping

See Row Grouping for more information.

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

interface ColumnRowGroupChangedEvent<TData = any, TContext = any> {
  // 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 grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}
rowGroupOpened
RowGroupOpenedEvent
A row group was opened or closed. 
onRowGroupOpened = (
    event: RowGroupOpenedEvent<TData>
) => void;

interface RowGroupOpenedEvent<TData = any, TContext = any> {
  // True if the group is expanded. 
  expanded: boolean;
  // The user provided data for the row. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The row node. 
  node: IRowNode<TData>;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: RowPinnedType;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  // If the browser `event` is present the `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined
expandOrCollapseAll
ExpandCollapseAllEvent
Fired when calling either of the API methods expandAll() or collapseAll(). 
onExpandOrCollapseAll = (
    event: ExpandCollapseAllEvent<TData>
) => void;

interface ExpandCollapseAllEvent<TData = any, TContext = any> {
  source: string;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // 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<TData>
) => void;

interface PinnedRowDataChangedEvent<TData = any, TContext = any> {
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

RowModel: Client-Side

See Client-Side Row Model for more information.

rowDataUpdated
RowDataUpdatedEvent
The client has updated data for the grid by either a) setting new Row Data or b) Applying a Row Transaction. 
onRowDataUpdated = (
    event: RowDataUpdatedEvent<TData>
) => void;

interface RowDataUpdatedEvent<TData = any, TContext = any> {
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}
asyncTransactionsFlushed
AsyncTransactionsFlushed
Async transactions have been applied. Contains a list of all transaction results. 
onAsyncTransactionsFlushed = (
    event: AsyncTransactionsFlushed<TData>
) => void;

interface AsyncTransactionsFlushed<TData = any, TContext = any> {
  // 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<TData> | ServerSideTransactionResult)[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

interface RowNodeTransaction<TData = any> {
  // Row nodes added 
  add: IRowNode<TData>[];
  // Row nodes removed 
  remove: IRowNode<TData>[];
  // Row nodes updated 
  update: IRowNode<TData>[];
}

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

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<TData>
) => void;

interface CellClickedEvent<TData = any, TValue = any> {
  column: Column;
  colDef: ColDef<TData>;
  // The value for the cell if available otherwise undefined. 
  value: TValue | undefined;
  // The user provided data for the row. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The row node. 
  node: IRowNode<TData>;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: RowPinnedType;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  // If the browser `event` is present the `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined
cellDoubleClicked
CellDoubleClickedEvent
Cell is double clicked. 
onCellDoubleClicked = (
    event: CellDoubleClickedEvent<TData>
) => void;

interface CellDoubleClickedEvent<TData = any, TValue = any> {
  column: Column;
  colDef: ColDef<TData>;
  // The value for the cell if available otherwise undefined. 
  value: TValue | undefined;
  // The user provided data for the row. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The row node. 
  node: IRowNode<TData>;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: RowPinnedType;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  // If the browser `event` is present the `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined
cellFocused
CellFocusedEvent
Cell is focused. 
onCellFocused = (
    event: CellFocusedEvent<TData>
) => void;

interface CellFocusedEvent<TData = any, TContext = any> {
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
  // Whether browser focus is also set (false when editing) 
  forceBrowserFocus?: boolean;
  // When `forceBrowserFocus` is `true`, should scroll be prevented 
  preventScrollOnBrowserFocus?: boolean;
  floating?: string | null;
  // Row index of the focused cell 
  rowIndex: number | null;
  // Column of the focused cell 
  column: Column | string | null;
  // either 'top', 'bottom' or null / undefined (if not pinned) 
  rowPinned: RowPinnedType;
  // Whether the cell a full width cell or a regular cell 
  isFullWidthCell?: boolean;
}

type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined
cellMouseOver
CellMouseOverEvent
Mouse entered cell. 
onCellMouseOver = (
    event: CellMouseOverEvent<TData>
) => void;

interface CellMouseOverEvent<TData = any, TValue = any> {
  column: Column;
  colDef: ColDef<TData>;
  // The value for the cell if available otherwise undefined. 
  value: TValue | undefined;
  // The user provided data for the row. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The row node. 
  node: IRowNode<TData>;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: RowPinnedType;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  // If the browser `event` is present the `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined
cellMouseOut
CellMouseOutEvent
Mouse left cell. 
onCellMouseOut = (
    event: CellMouseOutEvent<TData>
) => void;

interface CellMouseOutEvent<TData = any, TValue = any> {
  column: Column;
  colDef: ColDef<TData>;
  // The value for the cell if available otherwise undefined. 
  value: TValue | undefined;
  // The user provided data for the row. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The row node. 
  node: IRowNode<TData>;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: RowPinnedType;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  // If the browser `event` is present the `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined
cellMouseDown
CellMouseDownEvent
Mouse down on cell. 
onCellMouseDown = (
    event: CellMouseDownEvent<TData>
) => void;

interface CellMouseDownEvent<TData = any, TValue = any> {
  column: Column;
  colDef: ColDef<TData>;
  // The value for the cell if available otherwise undefined. 
  value: TValue | undefined;
  // The user provided data for the row. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The row node. 
  node: IRowNode<TData>;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: RowPinnedType;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  // If the browser `event` is present the `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined
rowClicked
RowClickedEvent
Row is clicked. 
onRowClicked = (
    event: RowClickedEvent<TData>
) => void;

interface RowClickedEvent<TData = any, TContext = any> {
  // The user provided data for the row. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The row node. 
  node: IRowNode<TData>;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: RowPinnedType;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  // If the browser `event` is present the `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined
rowDoubleClicked
RowDoubleClickedEvent
Row is double clicked. 
onRowDoubleClicked = (
    event: RowDoubleClickedEvent<TData>
) => void;

interface RowDoubleClickedEvent<TData = any, TContext = any> {
  // The user provided data for the row. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The row node. 
  node: IRowNode<TData>;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: RowPinnedType;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  // If the browser `event` is present the `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined
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<TData>
) => void;

interface RowSelectedEvent<TData = any, TContext = any> {
  source: SelectionEventSourceType;
  // The user provided data for the row. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The row node. 
  node: IRowNode<TData>;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: RowPinnedType;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  // If the browser `event` is present the `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

type SelectionEventSourceType = 
      'api' 
    | 'apiSelectAll' 
    | 'apiSelectAllFiltered' 
    | 'apiSelectAllCurrentPage' 
    | 'checkboxSelected' 
    | 'rowClicked' 
    | 'rowDataChanged' 
    | 'rowGroupChanged' 
    | 'selectableChanged' 
    | 'spacePressed' 
    | 'uiSelectAll' 
    | 'uiSelectAllFiltered' 
    | 'uiSelectAllCurrentPage'


type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined
selectionChanged
SelectionChangedEvent
Row selection is changed. Use the grid API getSelectedNodes() or getSelectedRows() to get the new list of selected nodes / row data. 
onSelectionChanged = (
    event: SelectionChangedEvent<TData>
) => void;

interface SelectionChangedEvent<TData = any, TContext = any> {
  source: SelectionEventSourceType;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

type SelectionEventSourceType = 
      'api' 
    | 'apiSelectAll' 
    | 'apiSelectAllFiltered' 
    | 'apiSelectAllCurrentPage' 
    | 'checkboxSelected' 
    | 'rowClicked' 
    | 'rowDataChanged' 
    | 'rowGroupChanged' 
    | 'selectableChanged' 
    | 'spacePressed' 
    | 'uiSelectAll' 
    | 'uiSelectAllFiltered' 
    | 'uiSelectAllCurrentPage'
cellContextMenu
CellContextMenuEvent
Cell is right clicked. 
onCellContextMenu = (
    event: CellContextMenuEvent<TData>
) => void;

interface CellContextMenuEvent<TData = any, TValue = any> {
  column: Column;
  colDef: ColDef<TData>;
  // The value for the cell if available otherwise undefined. 
  value: TValue | undefined;
  // The user provided data for the row. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The row node. 
  node: IRowNode<TData>;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: RowPinnedType;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  // If the browser `event` is present the `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined
rangeSelectionChanged
RangeSelectionChangedEvent
A change to range selection has occurred. 
onRangeSelectionChanged = (
    event: RangeSelectionChangedEvent<TData>
) => void;

interface RangeSelectionChangedEvent<TData = any, TContext = any> {
  id?: string;
  // True for the first change event, otherwise false 
  started: boolean;
  // True for the last change event, otherwise false 
  finished: boolean;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // 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<TData>
) => void;

interface SortChangedEvent<TData = any, TContext = any> {
  // Source of the sort change. 
  source: string;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}