Javascript and AngularJS 1.x
The column api has methods for interacting with the columns of the grid. Using the column API, you have FULL control of how the columns are displayed. It has everything you need should you wish to build your own column management GUI (instead of what's provided in the tool panel).
gridOptions.columnApi.hideColumn('country', true);Below lists all the methods on the column API. At the bottom of this page there is an example. Note that when talking about columns, a Column Group refers to grouping of the columns in the header, a Column Pivot refers to grouping of the data when doing aggregation and grouping of rows.
Most of the methods below work with Columns, not colDef's. A Column is a grid internal representation for a column. When you pass a list of colDefs to the grid (via gridOptions.colDefs) the grid wraps each of these colDefs in a Column object. It is the Column object that contains the run-time information about the column. For example, if the column width changes, the actual column width is updated in the Column object, the colDef never has it's details changed. The fact that the colDef is never changed allows you to use the same colDef across many grids (probably only useful to a select few of you).
The grid API exposes functions that go beyond events and properties that you application can call. The grid needs to be initialised before the API can be accessed.
Javascript and AngularJS 1.x
Use columnApi placed inside gridOptions by the grid during initialisation.
AngularJS 2
Use columnApi placed inside gridOptions by the grid during initialisation. You can also use columnApi directly on the AngularJS 2 grid component.
Web Components
Use columnApi placed inside gridOptions by the grid during initialisation. You can also use columnApi directly on the DOM element.
| Function | Description |
|---|---|
| sizeColumnsToFit(width) | Get the columns to fit to a particular size. The gridApi.sizeColumnsToFit() uses this method and passes in the grid width. |
| hideColumn(colId, hide) | To show / hide a specific column, where colId = the id of the column you want to show / hide and hide = true to hide, false to show |
| hideColumns(colIds, hide) | To show / hide a list of columns. |
| columnGroupOpened(group, newValue) | Call this if you want to open or close a column group. |
| getColumnGroup(name) | Returns the column group with the given name. |
| getDisplayNameForCol(column) | Returns the display name for a col. 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. |
| getColumn(key) | Returns the column with the given 'key'. The key can either be the colId (a string) or the colDef (an object). |
| setState(columnState) | Sets the state of the columns. See example below. |
| getState() | Gets the state of the columns. See example below. |
| isPinning() | Returns true if pinning, otherwise false. |
| getVisibleColAfter(col) | 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 eg if implementing your own cell navigation. |
| getVisibleColBefore(col) | Same as getVisibleColAfter except gives col to the left. |
| setColumnVisible(column, visible) | Sets the visibility of a column. |
| getAllColumns() | Returns all the columns, regardless of visible or not. |
| getDisplayedColumns() | Returns all columns currently displayed (eg are visible and if in a group, the group is showing the columns). |
| moveColumn(fromIndex, toIndex) | Moves a column. The column is first removed at 'fromIndex'. It is then re-inserted at 'toIndex' using the new list (thus index locations will change to the right of of the column after the removal). |
| getPivotedColumns() | Returns the pivoted columns. Pivoted columns are used for row grouping. |
| addPivotColumn(column) | Removes a pivoted column. |
| removePivotColumn(column) | Removes a pivoted column. |
| movePivotColumn(fromIndex, toIndex) | Moves a pivot column. |
| setColumnAggFunction(column, aggFunc) | Sets the agg function for a column. Set to one of [min,max,sum]. |
| setColumnWidth(column, newWidth) | Sets the column width. |
| addValueColumn(column) | Adds a value column. |
| removeValueColumn(column) | Removes a value column |
| getValueColumns() | Returns the value columns. Value columns are used for row aggregation. |
| setPinnedColumnCount(count) | Sets the number of pinned columns. |
| getHeaderGroups() | Returns all the header groups. |
It is also possible to store the entire state of the columns and restore them again via the API. This includes visibility, width, pivots and values.
The methods above get and set the state. The result is a Javascript array object that can be converted to / from JSON. An example of what the JSON might look like is as follows:
[
{colId: "athlete", aggFunc: "sum", hide: false, pivotIndex: 0, width: 150},
{colId: "age", aggFunc: null, hide: true, pivotIndex: null, width: 90}
]
It is intended that the values in the json mimic the values in the column definitions. So if you want to re-apply the state to a set of column definitions as the default values, override the values of the same name in the corresponding column definition.
The values have the following meaning:
The example below shows hiding / showing columns as well as saving / restoring the entire state. The example also registers for column events, the result of which are printed to the console.