Column Events

Reference for column-related events in AG Grid

Column events are fired in response to column operations such as resizing, moving, sorting, and visibility changes.

Overview

Listen to column events using GridOptions callbacks:

const gridOptions = {
  onColumnResized: (event) => {
    console.log('Column resized:', event.column.getId());
  },
  onColumnMoved: (event) => {
    console.log('Column moved to index:', event.toIndex);
  }
};

Column Visibility

columnVisible · ColumnVisibleEvent<TData, TContext>

Fired when a column’s visibility is changed.

Event Properties:

• column: The impacted column (or null if multiple)
• columns: List of all impacted columns
• visible: true if column was set to visible, false if hidden, undefined if mixed
• source: String describing where the event is coming from

onColumnVisible: (event) => {
  const colIds = event.columns.map(col => col.getId());
  console.log('Columns visibility changed:', colIds, event.visible);
}

Column Sizing

columnResized · ColumnResizedEvent<TData, TContext>

Fired when a column is resized.

Event Properties:

• column: The impacted column (or null if multiple)
• columns: List of all impacted columns
• finished: Set to true for last event in a sequence of resize events
• flexColumns: Any columns resized due to flex
• source: String describing where the event is coming from

onColumnResized: (event) => {
  if (event.finished) {
    console.log('Resize finished:', event.column.getId());
    console.log('New width:', event.column.getActualWidth());
  }
}

Column Movement

columnMoved · ColumnMovedEvent<TData, TContext>

Fired when a column is moved (reordered).

Event Properties:

• column: The impacted column (or null if multiple)
• columns: List of all impacted columns
• toIndex: The position the column was moved to
• finished: true when the column has finished moving
• source: String describing where the event is coming from

onColumnMoved: (event) => {
  if (event.finished) {
    console.log('Column moved to:', event.toIndex);
  }
}

Column Pinning

columnPinned · ColumnPinnedEvent<TData, TContext>

Fired when a column is pinned or unpinned.

Event Properties:

• column: The impacted column (or null if multiple)
• columns: List of all impacted columns
• pinned: Either 'left', 'right', or null (if not pinned)
• source: String describing where the event is coming from

onColumnPinned: (event) => {
  console.log('Column pinned:', event.pinned);
}

Column Groups

columnGroupOpened · ColumnGroupOpenedEvent<TData, TContext>

Fired when a column group is opened or closed.

Event Properties:

• columnGroup: The column group that was opened/closed
• columnGroups: All column groups affected

onColumnGroupOpened: (event) => {
  const group = event.columnGroup;
  console.log('Group', group.getGroupId(), 'is now', group.isExpanded() ? 'open' : 'closed');
}

expandOrCollapseAll · ExpandOrCollapseAllEvent<TData, TContext>

Fired when all column groups are expanded or collapsed.

Event Properties:

• source: String describing where the event is coming from

onExpandOrCollapseAll: (event) => {
  console.log('All groups toggled, source:', event.source);
}

Column State

displayedColumnsChanged · DisplayedColumnsChangedEvent<TData, TContext>

Fired when the displayed columns change (e.g., due to column grouping, pivoting, or visibility).

Event Properties:

• source: String describing where the event is coming from

onDisplayedColumnsChanged: (event) => {
  const visibleCols = event.api.getAllDisplayedColumns();
  console.log('Visible columns:', visibleCols.length);
}

virtualColumnsChanged · VirtualColumnsChangedEvent<TData, TContext>

Fired when the columns in the viewport change due to horizontal scrolling (column virtualization).

Event Properties:

• afterScroll: True if triggered by scrolling

onVirtualColumnsChanged: (event) => {
  console.log('Virtual columns changed');
}

gridColumnsChanged · GridColumnsChangedEvent<TData, TContext>

Fired when the grid columns are changed (e.g., after pivoting).

onGridColumnsChanged: (event) => {
  console.log('Grid columns structure changed');
}

newColumnsLoaded · NewColumnsLoadedEvent<TData, TContext>

Fired when new columns are loaded via api.setColumnDefs().

Event Properties:

• source: String describing where the event is coming from

onNewColumnsLoaded: (event) => {
  console.log('New column definitions loaded');
}

Column Header Events

columnHeaderClicked · ColumnHeaderClickedEvent<TData, TContext>

Fired when a column header (or column group header) is clicked.

Event Properties:

• column: Column or column-group related to the header that triggered the event

onColumnHeaderClicked: (event) => {
  console.log('Header clicked:', event.column.getId());
}

columnHeaderContextMenu · ColumnHeaderContextMenuEvent<TData, TContext>

Fired when a column header (or column group header) is right-clicked.

Event Properties:

• column: Column or column-group related to the header that triggered the event

onColumnHeaderContextMenu: (event) => {
  console.log('Header right-clicked:', event.column.getId());
  event.event.preventDefault(); // Prevent browser context menu
}

columnHeaderMouseOver · ColumnHeaderMouseOverEvent<TData, TContext>

Fired when the mouse enters a column header.

Event Properties:

• column: Column or column-group related to the header that triggered the event

onColumnHeaderMouseOver: (event) => {
  console.log('Mouse over header:', event.column.getId());
}

columnHeaderMouseLeave · ColumnHeaderMouseLeaveEvent<TData, TContext>

Fired when the mouse leaves a column header.

Event Properties:

• column: Column or column-group related to the header that triggered the event

onColumnHeaderMouseLeave: (event) => {
  console.log('Mouse left header:', event.column.getId());
}

Pivot & Aggregation

columnPivotModeChanged · ColumnPivotModeChangedEvent<TData, TContext>

Fired when pivot mode is enabled or disabled.

Module: PivotModule

onColumnPivotModeChanged: (event) => {
  console.log('Pivot mode changed');
}

columnPivotChanged · ColumnPivotChangedEvent<TData, TContext>

Fired when the pivot columns are changed.

Event Properties:

• column: The impacted column (or null if multiple)
• columns: List of all impacted columns
• source: String describing where the event is coming from

Module: PivotModule

onColumnPivotChanged: (event) => {
  console.log('Pivot columns changed');
}

columnRowGroupChanged · ColumnRowGroupChangedEvent<TData, TContext>

Fired when the row group columns are changed.

Event Properties:

• column: The impacted column (or null if multiple)
• columns: List of all impacted columns
• source: String describing where the event is coming from

Module: RowGroupingModule

onColumnRowGroupChanged: (event) => {
  console.log('Row group columns changed');
}

columnValueChanged · ColumnValueChangedEvent<TData, TContext>

Fired when the value columns (used for aggregation) are changed.

Event Properties:

• column: The impacted column (or null if multiple)
• columns: List of all impacted columns
• source: String describing where the event is coming from

Module: RowGroupingModule / PivotModule

onColumnValueChanged: (event) => {
  console.log('Value columns changed');
}

Menu Events

columnMenuVisibleChanged · ColumnMenuVisibleChangedEvent<TData, TContext>

Fired when the column menu is opened or closed.

Event Properties:

• visible: True if now visible; false if now hidden
• switchingTab: True if switching between tabs (legacy menu only)
• key: Currently displayed menu/tab
• column: Column the menu is opened for (or null)
• columnGroup: Column group the menu is opened for (if applicable)

onColumnMenuVisibleChanged: (event) => {
  if (event.visible) {
    console.log('Column menu opened for:', event.column?.getId());
  }
}

Related APIs

Grid Events

Grid-level events

Row Events

Row interaction events

Column API

Programmatic column control