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

React Data Grid: Column Object

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

getColId
Function
Returns the unique ID for the column. Equivalent: getId, getUniqueId 
getColId = () => string;
getColDef
Function
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 (e.g. defaultColDef grid option, or column types. Equivalent: getDefinition 
getColDef = () => ColDef;
getUserProvidedColDef
Function
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. 
getUserProvidedColDef = () => ColDef | null;
getParent
Function
Returns the parent column group, if column grouping is active. 
getParent = () => ColumnGroup;
isFilterAllowed
Function
Returns true if column filtering is allowed. 
isFilterAllowed = () => boolean;
isFilterActive
Function
Returns true if filter is active on the column. 
isFilterActive = () => boolean;
getSort
Function
If sorting is active, returns the sort direction e.g. 'asc' or 'desc'. 
getSort = () => SortDirection | undefined;

type SortDirection = 
      'asc' 
    | 'desc' 
    | null
getAggFunc
Function
If aggregation is set for the column, returns the aggregation function. 
getAggFunc = () => string | IAggFunc | null | undefined;

interface IAggFunc<TData = any, TValue = any> {
    (params: IAggFuncParams<TData, TValue>) : any
}

interface IAggFuncParams<TData = any, TValue = any> {
  // Values to aggregate 
  values: TValue[];
  // Column the aggregation function is working on 
  column: Column;
  // ColDef of the aggregation column 
  colDef: ColDef<TData>;
  // The parent RowNode, where the aggregation result will be shown 
  rowNode: IRowNode<TData>;
  // data (if any) of the parent RowNode 
  data: TData;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
getActualWidth
Function
Returns the current width of the column. If the column is resized, the actual width is the new size. 
getActualWidth = () => number;
isRowGroupActive
Function
Returns true if row group is currently active for this column. 
isRowGroupActive = () => boolean;
isPivotActive
Function
Returns true if pivot is currently active for this column. 
isPivotActive = () => boolean;
isValueActive
Function
Returns true if value (aggregation) is currently active for this column. 
isValueActive = () => boolean;
isPrimary
Function
Returns true if column is a primary column, false if secondary. Secondary columns are used for pivoting. 
isPrimary = () => boolean;
addEventListener
Function
Add an event listener to the column. 
addEventListener = (
    eventType: ColumnEventName,
    listener: Function
) => void;

type ColumnEventName = 
      'movingChanged' 
    | 'leftChanged' 
    | 'widthChanged' 
    | 'lastLeftPinnedChanged' 
    | 'firstRightPinnedChanged' 
    | 'visibleChanged' 
    | 'filterChanged' 
    | 'filterActiveChanged' 
    | 'sortChanged' 
    | 'colDefChanged' 
    | 'menuVisibleChanged' 
    | 'columnRowGroupChanged' 
    | 'columnPivotChanged' 
    | 'columnValueChanged'
removeEventListener
Function
Remove event listener from the column. 
removeEventListener = (
    eventType: ColumnEventName,
    listener: Function
) => void;

type ColumnEventName = 
      'movingChanged' 
    | 'leftChanged' 
    | 'widthChanged' 
    | 'lastLeftPinnedChanged' 
    | 'firstRightPinnedChanged' 
    | 'visibleChanged' 
    | 'filterChanged' 
    | 'filterActiveChanged' 
    | 'sortChanged' 
    | 'colDefChanged' 
    | 'menuVisibleChanged' 
    | 'columnRowGroupChanged' 
    | 'columnPivotChanged' 
    | 'columnValueChanged'

Events on Column

Columns emit the following events:

filterActiveChanged
ColumnEvent
The filter active value has changed.
filterActiveChanged = (event: ColumnEvent) => void;

interface ColumnEvent<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;
}
sortChanged
ColumnEvent
The sort value has changed.
sortChanged = (event: ColumnEvent) => void;

interface ColumnEvent<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;
}
leftChanged
ColumnEvent
The left position has changed (e.g. column has moved).
leftChanged = (event: ColumnEvent) => void;

interface ColumnEvent<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;
}
movingChanged
ColumnEvent
The column has started / finished moving (i.e. user is dragging the column to a new location).
movingChanged = (event: ColumnEvent) => void;

interface ColumnEvent<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;
}
widthChanged
ColumnEvent
The width value has changed.
widthChanged = (event: ColumnEvent) => void;

interface ColumnEvent<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;
}
visibleChanged
ColumnEvent
The visibility value has changed.
visibleChanged = (event: ColumnEvent) => void;

interface ColumnEvent<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;
}
menuVisibleChanged
ColumnEvent
The column menu was shown / hidden.
menuVisibleChanged = (event: ColumnEvent) => void;

interface ColumnEvent<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;
}
columnRowGroupChanged
ColumnEvent
The row group value has changed.
columnRowGroupChanged = (event: ColumnEvent) => void;

interface ColumnEvent<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;
}
columnPivotChanged
ColumnEvent
The pivot value has changed.
columnPivotChanged = (event: ColumnEvent) => void;

interface ColumnEvent<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;
}
columnValueChanged
ColumnEvent
The 'value' value has changed.
columnValueChanged = (event: ColumnEvent) => void;

interface ColumnEvent<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;
}

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

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 from the DOM (e.g. column virtualisation removes the column due to horizontal scrolling, or the column is made invisible via the column API).

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

// add visibility listener to 'country' column
const listener = event => console.log('Column visibility changed', event);

const column = columnApi.getColumn('country');
column.addEventListener('visibleChanged', listener);

// sometime later, remove the listener
column.removeEventListener('visibleChanged', listener);