Each column in the grid is defined using a Column Definition (ColDef
). Columns are positioned in the grid according to the order the Column Definitions are specified in the Grid Options.
const gridOptions = {
columnDefs: [
{ field: 'athlete' },
{ field: 'sport' },
{ field: 'age' }
],
// other grid options ...
}
See Column Properties for all available properties.
Column Defaults
Use defaultColDef
to set properties across ALL Columns.
const gridOptions = {
defaultColDef: {
width: 150,
cellStyle: { fontWeight: 'bold' },
},
// other grid options ...
}
Column Types
Use columnTypes
to define a set of Column properties to be applied together. The properties in a column type are applied to a Column by setting its type
property.
const gridOptions = {
// Define column types
columnTypes: {
currency: {
width: 150,
valueFormatter: CurrencyFormatter
},
shaded: {
cellClass: 'shaded-class'
}
},
columnDefs: [
{ field: 'productName'},
// uses properties from currency type
{ field: 'boughtPrice', type: 'currency'},
// uses properties from currency AND shaded types
{ field: 'soldPrice', type: ['currency', 'shaded'] },
],
// other grid options ...
}
Column Types work on Columns only and not Column Groups.
The below example shows Column Types.
Provided Column Types
The grid provides the Column Types rightAligned
and numericColumn
. Both of these types right align the header and cells contents by applying CSS classes ag-right-aligned-header
to Column Headers and ag-right-aligned-cell
to Cells.
const gridOptions = {
columnDefs: [
{ headerName: 'Column A', field: 'a' },
{ headerName: 'Column B', field: 'b', type: 'rightAligned' },
{ headerName: 'Column C', field: 'c', type: 'numericColumn' },
],
// other grid options ...
}
Column IDs
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 column 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 column IDs are generated.
If the user provides colId
in the column definition, then this is used, otherwise the field
is used. If both colId
and field
exist then colId
gets preference. If neither colId
nor field
exists then a number is assigned. Finally, the ID is ensured to be unique by appending '_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
colId
orfield
so the grid generates column IDs.