Column

A Column object represents a column in the grid. The Column will contain a reference to the column definition your application provided as well as other column runtime information. The column contains methods and emits events.

Column Methods

  • getId() / getColId() / getUniqueId(): Returns the unique ID for the column.
  • getParent(): Returns the parent column group, if column grouping is active.
  • getColDef() / getDefinition(): Returns the column definition for this column. The column definition will be the result of merging the application provided column definition with any provided defaults (eg defaultColDef grid option, or column types).
  • getUserProvidedColDef(): Returns the column definition provided by the application. This may not be correct, as items can be superseded by default column options. However it's useful for comparison, eg to know which application column definition matches that column.
  • isPrimary(): Returns true if column is a primary column, false if secondary. Secondary columns are used for pivoting.
  • isFilterAllowed(): Returns true if column filtering is allowed.
  • isFilterActive(): Returns true if filter is active on the column.
  • getSort(): If sorting is active, returns the sort direction eg 'asc' or 'desc'.
  • getAggFunc(): If aggregation is set for the column, returns the aggregation function.
  • getActualWidth(): Returns the current with of the column. If the column is resized, the actual width is the new size.
  • isRowGroupActive(): Returns true if row group is currently active for this column.
  • isPivotActive(): Returns true if pivot is currently active for this column.
  • isValueActive(): Returns true if value (aggregation) is currently active for this column.
  • addEventListener() / removeEventListener(): Add / remove event listener to the column.

Events on Column

Columns emit the following events:

  • filterActiveChanged: The filter active value has changed.
  • sortChanged: The sort value has changed.
  • leftChanged: The left position has changed (eg column has moved).
  • widthChanged: The width value has changed.
  • visibleChanged: The visibility value has changed.
  • menuVisibleChanged: The column menu was show / hidden.
  • columnRowGroupChanged: The row group value has changed.
  • columnPivotChanged: The pivot value has changed.
  • columnValueChanged: The 'value' value has changed.
  • movingChanged: The column has started / finished moving (ie user is dragging the column to a new location).

All events fired by the column are synchronous (events are normally asynchronous). The grid is also listening on these events internally. What that means is when you receive an event, the grid may still have some work to do (eg if sort has changed, the grid UI may still have to do the sorting). It best you do not call any grid API functions while receiving events from the column (as the grid is still processing), instead put your logic into a timeout and call the grid in another VM turn.

When adding event listeners to a column, they will stay with the column until the column is destroyed. Columns are destroyed when you add new columns to the grid. Column objects are NOT destroyed when the columns is removed form the DOM (eg column virtuslisation removes the column due to horizontal scrolling, or the column is made 'not visible' via the column API).

If you add listeners to columns in customer header components, be sure to remove the listener when the header component is destroyed.

// add visibility listener to 'country' column let listener = function(event) { console.log('Column visibility changed', event); }; let column = columnApi.getColumn('country'); column.addEventListener('visibleChanged', listener); // sometime later, remove the listener column.removeEventListener('visibleChanged', listener);