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

React Data Grid: Column API

Below are listed all the column API methods.

Column Keys

Some of the API methods take Column Key (named colKey) which has type Column | string. This means you can pass either a Column object (that you receive from calling one of the other methods) or you pass in the Column ID (which is a string). The Column ID is a property of the column definition. If you do not provide the Column ID, the grid will create one for you (first by trying to use the field if it is unique, otherwise it will generate an ID).

Column Groups

See Column Groups

getColumnGroup
Function
Returns the column group with the given name. See Column Groups.
function getColumnGroup(
    name: string,
    instanceId?: number
): ColumnGroup | null;
getProvidedColumnGroup
Function
Returns the provided column group with the given name. 
function getProvidedColumnGroup(name: string): ProvidedColumnGroup | null;
setColumnGroupOpened
Function
Call this if you want to open or close a column group. 
function setColumnGroupOpened(
    group: ProvidedColumnGroup | string,
    newValue: boolean
): void;

Columns

getColumn
Function
Returns the column with the given colKey, which can either be the colId (a string) or the colDef (an object). 
function getColumn(key: any): Column | null;
getColumns
Function
Returns all the columns, regardless of visible or not. 
function getColumns(): Column[] | null;
getAllGridColumns
Function
Returns all the grid columns, same as getColumns(), except a) it has the order of the columns that are presented in the grid b) it's after the 'pivot' step, so if pivoting, has the value columns for the pivot. 
function getAllGridColumns(): Column[];

Moving

See Column Moving

moveColumn
Function
Moves a column to toIndex. The column is first removed, then added at the toIndex location, thus index locations will change to the right of the column after the removal. 
function moveColumn(
    key: string | Column,
    toIndex: number
): void;
moveColumns
Function
Same as moveColumn but works on list. 
function moveColumns(
    columnsToMoveKeys: (string | Column)[],
    toIndex: number
): void;
moveColumnByIndex
Function
Same as moveColumn but works on index locations. 
function moveColumnByIndex(
    fromIndex: number,
    toIndex: number
): void;

Pinning

See Column Pinning

isPinning
Function
Returns true if pinning left or right, otherwise false. 
function isPinning(): boolean;
isPinningLeft
Function
Returns true if pinning left, otherwise false. 
function isPinningLeft(): boolean;
isPinningRight
Function
Returns true if pinning right, otherwise false. 
function isPinningRight(): boolean;
setColumnPinned
Function
Sets the column pinned / unpinned. Key can be the column ID, field, ColDef object or Column object. 
function setColumnPinned(
    key: string | Column,
    pinned: ColumnPinnedType
): void;

type ColumnPinnedType = 
      'left' 
    | 'right' 
    | boolean 
    | null 
    | undefined
setColumnsPinned
Function
Same as setColumnPinned, but provide a list of column keys. 
function setColumnsPinned(
    keys: (string | Column)[],
    pinned: ColumnPinnedType
): void;

type ColumnPinnedType = 
      'left' 
    | 'right' 
    | boolean 
    | null 
    | undefined

Pivoting

See Pivoting

isPivotMode
Function
Get the pivot mode. 
function isPivotMode(): boolean;
setPivotMode
Function
Set the pivot mode. 
function setPivotMode(pivotMode: boolean): void;
getPivotColumns
Function
Get the pivot columns. 
function getPivotColumns(): Column[];
setPivotColumns
Function
Set the pivot columns. 
function setPivotColumns(
    colKeys: (string | Column)[]
): void;
addPivotColumn
Function
Add a pivot column. 
function addPivotColumn(
    colKey: string | Column
): void;
addPivotColumns
Function
Same as addPivotColumn but provide a list of columns. 
function addPivotColumns(
    colKeys: (string | Column)[]
): void;
removePivotColumn
Function
Remove a pivot column. 
function removePivotColumn(
    colKey: string | Column
): void;
removePivotColumns
Function
Same as removePivotColumn but provide a list of columns. 
function removePivotColumns(
    colKeys: (string | Column)[]
): void;
getPivotResultColumn
Function
Returns the pivot result column for the given pivotKeys and valueColId. Useful to then call operations on the pivot column. 
function getPivotResultColumn(
    pivotKeys: string[],
    valueColKey: string | Column
): Column | null;
setPivotResultColumns
Function
Set the pivot result columns. 
function setPivotResultColumns(
    colDefs: (ColDef | ColGroupDef)[]
): void;
getPivotResultColumns
Function
Returns the grid's pivot result columns. See Columns vs Pivot Result Columns.
function getPivotResultColumns(): Column[] | null;

Row Grouping

See Row Grouping

getRowGroupColumns
Function
Get row group columns. 
function getRowGroupColumns(): Column[];
setRowGroupColumns
Function
Set the row group columns. 
function setRowGroupColumns(
    colKeys: (string | Column)[]
): void;
addRowGroupColumn
Function
Add a column to the row groups. 
function addRowGroupColumn(
    colKey: string | Column
): void;
addRowGroupColumns
Function
Same as addRowGroupColumn but provide a list of columns. 
function addRowGroupColumns(
    colKeys: (string | Column)[]
): void;
removeRowGroupColumn
Function
Remove a column from the row groups. 
function removeRowGroupColumn(
    colKey: string | Column
): void;
removeRowGroupColumns
Function
Same as removeRowGroupColumn but provide a list of columns. 
function removeRowGroupColumns(
    colKeys: (string | Column)[]
): void;
moveRowGroupColumn
Function
Move the column to a new position in the row grouping order. 
function moveRowGroupColumn(
    fromIndex: number,
    toIndex: number
): void;

Sizing

See Column Sizing

setColumnWidth
Function
Sets the column width on a single column. The finished flag gets included in the resulting event and not used internally by the grid. The finished flag is intended for dragging, where a dragging action will produce many columnWidth events, so the consumer of events knows when it receives the last event in a stream. The finished parameter is optional, and defaults to true. 
function setColumnWidth(
    key: string | Column,
    newWidth: number,
    finished: boolean = true,
    source?: ColumnEventType
): void;
setColumnWidths
Function
Sets the column widths on multiple columns. This method offers better performance than calling setColumnWidth multiple times. The finished flag gets included in the resulting event and not used internally by the grid. The finished flag is intended for dragging, where a dragging action will produce many columnWidth events, so the consumer of events knows when it receives the last event in a stream. The finished parameter is optional, and defaults to true. 
function setColumnWidths(
    columnWidths: { key: string | Column; newWidth: number; }[],
    finished: boolean = true,
    source?: ColumnEventType
): void;
sizeColumnsToFit
Function
Gets the grid to size the columns to the specified width in pixels, e.g. sizeColumnsToFit(900). To have the grid fit the columns to the grid's width, use the Grid API gridApi.sizeColumnsToFit() instead. 
function sizeColumnsToFit(gridWidth: number): void;
autoSizeColumn
Function
Auto-sizes a column based on its contents. 
function autoSizeColumn(
    key: string | Column,
    skipHeader?: boolean
): void;
autoSizeColumns
Function
Same as autoSizeColumn, but provide a list of column keys. 
function autoSizeColumns(
    keys: (string | Column)[],
    skipHeader?: boolean
): void;
autoSizeAllColumns
Function
Calls autoSizeColumns on all displayed columns. 
function autoSizeAllColumns(skipHeader?: boolean): void;

State

See Column State

getColumnState
Function
Gets the state of the columns. Typically used when saving column state. 
function getColumnState(): ColumnState[];

interface ColumnState {
  // ID of the column 
  colId: string;
  // True if the column is hidden 
  hide?: boolean | null;
  // Width of the column in pixels 
  width?: number;
  // Column's flex if flex is set 
  flex?: number | null;
  // Sort applied to the column 
  sort?: 'asc' | 'desc' | null;
  // The order of the sort, if sorting by many columns 
  sortIndex?: number | null;
  // The aggregation function applied 
  aggFunc?: string | IAggFunc | null;
  // True if pivot active 
  pivot?: boolean | null;
  // The order of the pivot, if pivoting by many columns 
  pivotIndex?: number | null;
  // Set if column is pinned 
  pinned?: ColumnPinnedType;
  // True if row group active 
  rowGroup?: boolean | null;
  // The order of the row group, if grouping by many columns 
  rowGroupIndex?: number | null;
}

type ColumnPinnedType = 
      'left' 
    | 'right' 
    | boolean 
    | null 
    | undefined
applyColumnState
Function
Applies the state of the columns from a previous state. Returns false if one or more columns could not be found. 
function applyColumnState(
    params: ApplyColumnStateParams
): boolean;

interface ApplyColumnStateParams {
  // The state from `getColumnState` 
  state?: ColumnState[];
  // Whether column order should be applied 
  applyOrder?: boolean;
  // State to apply to columns where state is missing for those columns 
  defaultState?: ColumnStateParams;
}

interface ColumnState {
  // ID of the column 
  colId: string;
  // True if the column is hidden 
  hide?: boolean | null;
  // Width of the column in pixels 
  width?: number;
  // Column's flex if flex is set 
  flex?: number | null;
  // Sort applied to the column 
  sort?: 'asc' | 'desc' | null;
  // The order of the sort, if sorting by many columns 
  sortIndex?: number | null;
  // The aggregation function applied 
  aggFunc?: string | IAggFunc | null;
  // True if pivot active 
  pivot?: boolean | null;
  // The order of the pivot, if pivoting by many columns 
  pivotIndex?: number | null;
  // Set if column is pinned 
  pinned?: ColumnPinnedType;
  // True if row group active 
  rowGroup?: boolean | null;
  // The order of the row group, if grouping by many columns 
  rowGroupIndex?: number | null;
}

type ColumnPinnedType = 
      'left' 
    | 'right' 
    | boolean 
    | null 
    | undefined


interface ColumnStateParams {
  // True if the column is hidden 
  hide?: boolean | null;
  // Width of the column in pixels 
  width?: number;
  // Column's flex if flex is set 
  flex?: number | null;
  // Sort applied to the column 
  sort?: 'asc' | 'desc' | null;
  // The order of the sort, if sorting by many columns 
  sortIndex?: number | null;
  // The aggregation function applied 
  aggFunc?: string | IAggFunc | null;
  // True if pivot active 
  pivot?: boolean | null;
  // The order of the pivot, if pivoting by many columns 
  pivotIndex?: number | null;
  // Set if column is pinned 
  pinned?: ColumnPinnedType;
  // True if row group active 
  rowGroup?: boolean | null;
  // The order of the row group, if grouping by many columns 
  rowGroupIndex?: number | null;
}
resetColumnState
Function
Sets the state back to match the originally provided column definitions. 
function resetColumnState(): void;
getColumnGroupState
Function
Gets the state of the column groups. Typically used when saving column group state. 
function getColumnGroupState(): { groupId: string, open: boolean }[];
setColumnGroupState
Function
Sets the state of the column group state from a previous state. 
function setColumnGroupState(
    stateItems: ({ groupId: string; open: boolean; })[]
): void;
resetColumnGroupState
Function
Sets the state back to match the originally provided column definitions. 
function resetColumnGroupState(): void;

Value Columns

Methods for management of value column aggregates (for aggregating when grouping or pivoting).

getValueColumns
Function
Get a list of the existing value columns. 
function getValueColumns(): Column[];
addValueColumn
Function
Add the given column to the set of existing value columns. 
function addValueColumn(
    colKey: (string | Column)
): void;
addValueColumns
Function
Like addValueColumn but add the given list of columns to the existing set of value columns. 
function addValueColumns(
    colKeys: (string | Column)[]
): void;
removeValueColumn
Function
Remove the given column from the existing set of value columns. 
function removeValueColumn(
    colKey: (string | Column)
): void;
removeValueColumns
Function
Like removeValueColumn but remove the given list of columns from the existing set of value columns. 
function removeValueColumns(
    colKeys: (string | Column)[]
): void;
setValueColumns
Function
Set the value columns to the provided list of columns. 
function setValueColumns(
    colKeys: (string | Column)[]
): void;
setColumnAggFunc
Function
Sets the agg function for a column. aggFunc can be one of the built-in aggregations or a custom aggregation by name or direct function. 
function setColumnAggFunc(
    key: string | Column,
    aggFunc: string | IAggFunc | null | undefined
): void;

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

Visibility and Display

setColumnVisible
Function
Sets the visibility of a column. Key can be the column ID or Column object. 
function setColumnVisible(
    key: string | Column,
    visible: boolean
): void;
setColumnsVisible
Function
Same as setColumnVisible, but provide a list of column keys. 
function setColumnsVisible(
    keys: (string | Column)[],
    visible: boolean
): void;
getDisplayNameForColumn
Function
Returns the display name for a column. Useful if you are doing your own header rendering and want the grid to work out if headerValueGetter is used, or if you are doing your own column management GUI, to know what to show as the column name. 
function getDisplayNameForColumn(
    column: Column,
    location: string | null
): string;
getDisplayNameForColumnGroup
Function
Returns the display name for a column group (when grouping columns). 
function getDisplayNameForColumnGroup(
    columnGroup: ColumnGroup,
    location: string | null
): string;
getDisplayedColAfter
Function
Returns the column to the right of the provided column, taking into consideration open / closed column groups and visible columns. This is useful if you need to know what column is beside yours e.g. if implementing your own cell navigation. 
function getDisplayedColAfter(col: Column): Column | null;
getDisplayedColBefore
Function
Same as getVisibleColAfter except gives column to the left. 
function getDisplayedColBefore(col: Column): Column | null;
getAllDisplayedVirtualColumns
Function
Same as getAllGridColumns(), except only returns rendered columns, i.e. columns that are not within the viewport and therefore not rendered, due to column virtualisation, are not displayed. 
function getAllDisplayedVirtualColumns(): Column[];
getAllDisplayedColumns
Function
Returns all columns currently displayed (e.g. are visible and if in a group, the group is showing the columns) for the pinned left, centre and pinned right portions of the grid. 
function getAllDisplayedColumns(): Column[];
getDisplayedCenterColumns
Function
Same as getAllDisplayedColumns but just for the center portion of the grid. 
function getDisplayedCenterColumns(): Column[];
getDisplayedLeftColumns
Function
Same as getAllDisplayedColumns but just for the pinned left portion of the grid. 
function getDisplayedLeftColumns(): Column[];
getDisplayedRightColumns
Function
Same as getAllDisplayedColumns but just for the pinned right portion of the grid. 
function getDisplayedRightColumns(): Column[];
getAllDisplayedColumnGroups
Function
Returns all 'root' column headers. If you are not grouping columns, these return the columns. If you are grouping, these return the top level groups - you can navigate down through each one to get the other lower level headers and finally the columns at the bottom. 
function getAllDisplayedColumnGroups(): IHeaderColumn[] | null;

interface IHeaderColumn {
  getUniqueId(): string;
  getActualWidth(): number;
  getMinWidth(): number | null | undefined;
  getLeft(): number | null;
  getOldLeft(): number | null;
  getDefinition(): AbstractColDef | null;
  getColumnGroupShow(): ColumnGroupShowType | undefined;
  getParent(): IHeaderColumn;
  isResizable(): boolean;
  setParent(parent: ColumnGroup | null): void;
  isEmptyGroup(): boolean;
  isMoving(): boolean;
  getPinned(): ColumnPinnedType;
  addEventListener(eventType: string, listener: EventListener, async?: boolean, options?: AddEventListenerOptions): void;
  removeEventListener(eventType: string, listener: EventListener, async?: boolean, options?: AddEventListenerOptions): void;
}

type ColumnGroupShowType = 'open' | 'closed'

type ColumnPinnedType = 
      'left' 
    | 'right' 
    | boolean 
    | null 
    | undefined
getCenterDisplayedColumnGroups
Function
Same as getAllDisplayedColumnGroups but just for the center portion of the grid. 
function getCenterDisplayedColumnGroups(): IHeaderColumn[];

interface IHeaderColumn {
  getUniqueId(): string;
  getActualWidth(): number;
  getMinWidth(): number | null | undefined;
  getLeft(): number | null;
  getOldLeft(): number | null;
  getDefinition(): AbstractColDef | null;
  getColumnGroupShow(): ColumnGroupShowType | undefined;
  getParent(): IHeaderColumn;
  isResizable(): boolean;
  setParent(parent: ColumnGroup | null): void;
  isEmptyGroup(): boolean;
  isMoving(): boolean;
  getPinned(): ColumnPinnedType;
  addEventListener(eventType: string, listener: EventListener, async?: boolean, options?: AddEventListenerOptions): void;
  removeEventListener(eventType: string, listener: EventListener, async?: boolean, options?: AddEventListenerOptions): void;
}

type ColumnGroupShowType = 'open' | 'closed'

type ColumnPinnedType = 
      'left' 
    | 'right' 
    | boolean 
    | null 
    | undefined
getLeftDisplayedColumnGroups
Function
Same as getAllDisplayedColumnGroups but just for the pinned left portion of the grid. 
function getLeftDisplayedColumnGroups(): IHeaderColumn[];

interface IHeaderColumn {
  getUniqueId(): string;
  getActualWidth(): number;
  getMinWidth(): number | null | undefined;
  getLeft(): number | null;
  getOldLeft(): number | null;
  getDefinition(): AbstractColDef | null;
  getColumnGroupShow(): ColumnGroupShowType | undefined;
  getParent(): IHeaderColumn;
  isResizable(): boolean;
  setParent(parent: ColumnGroup | null): void;
  isEmptyGroup(): boolean;
  isMoving(): boolean;
  getPinned(): ColumnPinnedType;
  addEventListener(eventType: string, listener: EventListener, async?: boolean, options?: AddEventListenerOptions): void;
  removeEventListener(eventType: string, listener: EventListener, async?: boolean, options?: AddEventListenerOptions): void;
}

type ColumnGroupShowType = 'open' | 'closed'

type ColumnPinnedType = 
      'left' 
    | 'right' 
    | boolean 
    | null 
    | undefined
getRightDisplayedColumnGroups
Function
Same as getAllDisplayedColumnGroups but just for the pinned right portion of the grid. 
function getRightDisplayedColumnGroups(): IHeaderColumn[];

interface IHeaderColumn {
  getUniqueId(): string;
  getActualWidth(): number;
  getMinWidth(): number | null | undefined;
  getLeft(): number | null;
  getOldLeft(): number | null;
  getDefinition(): AbstractColDef | null;
  getColumnGroupShow(): ColumnGroupShowType | undefined;
  getParent(): IHeaderColumn;
  isResizable(): boolean;
  setParent(parent: ColumnGroup | null): void;
  isEmptyGroup(): boolean;
  isMoving(): boolean;
  getPinned(): ColumnPinnedType;
  addEventListener(eventType: string, listener: EventListener, async?: boolean, options?: AddEventListenerOptions): void;
  removeEventListener(eventType: string, listener: EventListener, async?: boolean, options?: AddEventListenerOptions): void;
}

type ColumnGroupShowType = 'open' | 'closed'

type ColumnPinnedType = 
      'left' 
    | 'right' 
    | boolean 
    | null 
    | undefined