Each column in the grid is defined using a column definition. Columns are positioned in the grid according to the order the ColDef's are specified in the grid options. The following example shows a simple grid with 3 columns defined:
See Column Properties for a list of all properties that can be applied to a column.
If you want the columns to be grouped, then you include them as groups like the following:
Groups are explained in more detail in the section Column Groups.
Custom Column Types
In addition to the above, the grid provides additional ways to help simplify and avoid duplication of column definitions. This is done through the following:
- defaultColDef: contains column properties all columns will inherit.
- defaultColGroupDef: contains column group properties all column groups will inherit.
- columnTypes: specific column types containing properties that column definitions can inherit.
The following code snippet shows these three properties configures:
When the grid creates a column it starts with the default column, then adds in anything from the column type, then finally adds in items from the column definition.
For example, the following is an outline of the steps used when creating 'Col C' shown above:
The following examples demonstrates this configuration.
Provided Column Types
The grid provides a handy shortcut for formatting numeric columns.
Setting the column definition type to
numericColumn aligns the column header and contents to the right,
which makes the scanning of the data easier for the user.
Updating Column Definitions
After the grid has been initialised it may be necessary to update the column definition. It is important to understand that when a column is created it is assigned a copy of the column definition defined in the GridOptions. For this reason it is necessary to obtain the column definition directly from the column.
The following example shows how to update a column header name after the grid has been initialised. As we want to update
the header name immediately we explicitly invoke
refreshHeader() via the Grid API.
Saving and Restoring Column State
It is possible to save and subsequently restore the column state via the Column API. Examples of state include column visibility, width, row groups and values.
This is primarily achieved using the following methods:
columnApi.getColumnState(): Returns the state of a particular column.
columnApi.setColumnState(state): To set the state of a particular column.
The column state used by the above methods is an array of objects that mimic the colDef's which can be converted to and from JSON. An example is shown below:
The values have the following meaning:
colId: The ID of the column. See column definitions for explanation of column ID
aggFunc: If this column is a value column, this field specifies the aggregation function. If the column is not a value column, this field is null.
hide: True if the column is hidden, otherwise false.
rowGroupIndex: The index of the row group. If the column is not grouped, this field is null. If multiple columns are used to group, this index provides the order of the grouping.
width: The width of the column. If the column was resized, this reflects the new value.
pinned: The pinned state of the column. Can be either
Column API Example
This section illustrates how to store and restore column state using the Column API.
- hiding / showing columns as well as saving / restoring the entire state
- registering for column events, the result of which are printed to the console.