Each column in the grid is defined using a Column Definition (
ColDef). Columns are positioned in the
grid according to the order the
ColDefs 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, you can include them as children like so:
Groups are explained in more detail in the section Column Groups.
If you're using either Angular (
ag-grid-column) or React (
AgGridColumn) you additionally have
the option to declare your column definitions declaratively; please refer to the Angular
and React documentation for more information.
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 properties that all columns will inherit.
defaultColGroupDef:contains properties that all column groups will inherit.
columnTypes:specific column types containing properties that column definitions can inherit.
Default columns and column types can specify any of the column properties available on a column.
The following code snippet demonstrates these three properties:
When the grid creates a column it starts with the default column definition, then adds in anything from the column type, then finally adds in items from the specific column definition.
For example, the following is an outline of the steps used when creating 'Col C' shown above:
The following example demonstrates the different configuration properties in action.
Provided Column Types
Right Aligned and Numeric Columns
The grid provides a handy shortcut for aligning columns to the right.
Setting the column definition type to
rightAligned aligns the column header and contents to the right,
which makes the scanning of the data easier for the user.
numericColumnthat can be used to align the header and cell text to the right.
Each column generated by the grid is given a unique Column ID, which is used in parts of the Grid API.
If you are using the API and the columns IDs are a little complex (e.g. if two columns have the same
field, or if you are using
valueGetter instead of
field) then it is useful to
understand how columns IDs are generated.
If the user provides
colId in the column definition, then this is used, otherwise the
is used. If both
field exist then
colId gets preference. If neither
field exists then a number is assigned. Finally, the ID is ensured to be unique by
'_n' if necessary, where
n is the first positive number that allows uniqueness.
In the example below, columns are set up to demonstrate the different ways IDs are generated. Open the example in a new tab and observe the output in the dev console. Note the following:
Col 1 and Col 2 both use
colId. The grid appends
'_1'to Col 2 to make the ID unique.
Col 3 and Col 4 both use
field. The grid appends
'_1'to Col 4 to make the ID unique.
Col 5 and Col 6 have neither
fieldso the grid generates column IDs.