Columns are configured using Column Definitions, manipulated with Column State and referenced using IDs or the Column Object.
Defining Columns
Each column in the grid is defined using a Column Definition, which is a JavaScript key-value object consisting of Column Options. An array of these objects can be passed to the columnDefs
Grid Option and the grid will create matching columns.
const gridOptions = {
columnDefs: [
{ field: 'athlete' },
{ field: 'sport' },
{ field: 'age' }
],
// other grid options ...
}
Columns can be also be configured under Column Groups, which present the columns under shared headers. These can be configured by adding a level of nesting to the column definition.
const gridOptions = {
columnDefs: [
{ field: 'athlete' },
{
headerName: 'Stats',
children: [
{ field: 'sport' },
{ field: 'age' }
]
}
],
// other grid options ...
}
Referencing Columns
Columns can be updated via the colDefs
grid option when a sufficient ID has been provided, or manipulated via the API with a Column Object.
Column IDs
Every column in the grid needs a unique ID. If this is not provided, one will be generated.
This can be provided via the colId
Column Option. If this is omitted, the grid will try to use the field
Column Option. If neither of these is provided, the grid will generate a numeric column ID. Where the provided colId
or field
is not unique, the grid will append _n
where necessary (n
being 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.
Column Objects
Every column displayed in the grid is represented by a Column Object which has attributes, methods and events for interacting with the specific column e.g. column.isVisible()
.
Columns can be accessed via Grid API methods, and provided as parameters from some Grid Events.
The Column Reference displays a list of functions available on the Column Object.
It is also possible to listen for Column Events by attaching an Event Listener.
Updating Columns
Columns can be controlled by updating the column state, or updating the column definition.
Column State should be used when restoring a users grid, for example saving and restoring column widths.
Update Column Definitions to modify properties that the user cannot control, and as such are not supported by Column State. Whilst column definitions can be used to change stateful properties, this can cause additional side effects.