Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

JavaScript 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).

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;
getAllColumns
Function
Returns all the columns, regardless of visible or not.
function getAllColumns(): Column[] | null;
getAllGridColumns
Function
Returns all the grid columns, same as getAllColumns(), except a) it has the order of the columns that are presented in the grid and b) it's after the 'pivot' step, so if pivoting, has the value columns for the pivot.
function getAllGridColumns(): Column[];

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?: string | 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?: boolean | string | 'left' | 'right' | null;
  // True if row group active 
  rowGroup?: boolean | null;
  // The order of the row group, if grouping by many columns 
  rowGroupIndex?: number | null;
}
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?: ColumnState;
}
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;

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;
setColumnGroupOpened
Function
Call this if you want to open or close a column group.
function setColumnGroupOpened(
    group: OriginalColumnGroup | string,
    newValue: boolean
): 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;

type ColumnEventType = 
      "sizeColumnsToFit" 
    | "autosizeColumns" 
    | "alignedGridChanged" 
    | "filterChanged" 
    | "filterDestroyed" 
    | "gridOptionsChanged" 
    | "gridInitializing" 
    | "toolPanelDragAndDrop" 
    | "toolPanelUi" 
    | "uiColumnMoved" 
    | "uiColumnResized" 
    | "uiColumnDragged" 
    | "uiColumnExpanded" 
    | "uiColumnSorted" 
    | "contextMenu" 
    | "columnMenu" 
    | "rowModelUpdated" 
    | "api" 
    | "flex" 
    | "pivotChart"
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;

type ColumnEventType = 
      "sizeColumnsToFit" 
    | "autosizeColumns" 
    | "alignedGridChanged" 
    | "filterChanged" 
    | "filterDestroyed" 
    | "gridOptionsChanged" 
    | "gridInitializing" 
    | "toolPanelDragAndDrop" 
    | "toolPanelUi" 
    | "uiColumnMoved" 
    | "uiColumnResized" 
    | "uiColumnDragged" 
    | "uiColumnExpanded" 
    | "uiColumnSorted" 
    | "contextMenu" 
    | "columnMenu" 
    | "rowModelUpdated" 
    | "api" 
    | "flex" 
    | "pivotChart"
sizeColumnsToFit
Function
Gets the grid to size the columns to the specified width in pixels, e.g. sizeColumnsToFix(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;

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: string
): void;
setColumnsPinned
Function
Same as setColumnPinned, but provide a list of column keys.
function setColumnsPinned(
    keys: (string | Column)[],
    pinned: string
): void;

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
): 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[];
getDisplayedCenterColumns
getDisplayedLeftColumns
getDisplayedRightColumns
getAllDisplayedColumns
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.
Returns: Column[]
getLeftDisplayedColumnGroups
getCenterDisplayedColumnGroups
getRightDisplayedColumnGroups
getAllDisplayedColumnGroups
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.
Returns: ColumnGroupChild[]

Value Columns

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

getValueColumns
Function
Get value columns.
function getValueColumns(): Column[];
addValueColumn
Function
Add a value column.
function addValueColumn(
    colKey: (string | Column)
): void;
addValueColumns
Function
Same as addValueColumn but provide a list.
function addValueColumns(
    colKeys: (string | Column)[]
): void;
removeValueColumn
Function
Remove a value column.
function removeValueColumn(
    colKey: (string | Column)
): void;
removeValueColumns
Function
Same as removeValueColumns but provide a list.
function removeValueColumns(
    colKeys: (string | Column)[]
): void;
setColumnAggFunc
Function
Sets the agg function for a column. aggFunc can be one of 'min' | 'max' | 'sum'.
function setColumnAggFunc(
    key: string | Column,
    aggFunc: string
): void;

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;

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;
getSecondaryPivotColumn
Function
Returns the pivot column for the given pivotKeys and valueColId. Useful to then call operations on the pivot column.
function getSecondaryPivotColumn(
    pivotKeys: string[],
    valueColKey: string | Column
): Column | null;
getPrimaryColumns
Function
Returns the grid's primary columns. See Primary vs Secondary Columns.
function getPrimaryColumns(): Column[] | null;
getSecondaryColumns
Function
Returns the grid's secondary columns.
function getSecondaryColumns(): Column[] | null;