Values are mapped into Cells using either field
or valueGetter
from the Column Definition.
Field
The Column Definition field
property maps values from the row data object to the Column's Cells.
The field supports dot notation (e.g. medals.gold
) to access properties of complex objects.
const gridOptions = {
rowData: [
{
athlete: 'Michael Phelps',
medals: {
gold: 8, silver: 1, bronze: 0
}
}
],
columnDefs: [
// simple field attribute
{ field: 'athlete' },
// using dot notation, a Header Name is usally needed
{ field: 'medals.gold', headerName: 'Gold' },
],
// other grid options ...
}
Value Getter
A Value Getter is a function that gets called for each row to return the Cell Value for a Column. Typically column cell values are loaded using a field
, and then a valueGetter
is used when retrieving the value requires custom logic. Columns with Value Getter's usually have manually provided Header Name's as the grid cannot derive Header Names from Value Getters like it does with Fields.
columnDefs: [
// achieves the same as using 'athlete' for the field
{ headerName: 'Athlete', valueGetter: p => p.data.athlete },
// using valueGetter to combine 3 values into 1
{ headerName: 'Total Medals', valueGetter: p => p.data.bronze + p.data.silver + p.data.gold }
],
Function or expression. Gets the value from your data for display. |
All valueGetters must be pure functions. That means, given the same state of your data, it should consistently return the same result. This is important as the grid will only call your valueGetter once during a redraw, even though the value may be used multiple times. For example, the value will be used to display the cell value, however it can additionally be used to provide values to an aggregation function when grouping.
The example below demonstrates valueGetter
. The following can be noted from the demo:
Columns A and B are simple columns using
field
Value Getters are used in all subsequent columns as follows:
- Column 'ID #' prints the row number, taken from the Row Node.
- Column 'A+B' adds A and B.
- Column 'A * 1000' multiplies A by 1000.
- Column 'B * 137' multiplies B by 137.
- Column 'Random' doesn't take any value from the data, rather it returns a random value.
- Column 'Chain' takes the value 'A+B' and works on it further, thus chaining value getters.
- Column 'Const' returns back the same value for each column.
Header Value Getters
Use headerValueGetter
instead of colDef.headerName
to provide column header names dynamically.
Function or expression. Gets the value for display in the header. |
The parameters for headerValueGetter
differ from standard valueGetter
as follows:
- Only one of column or columnGroup will be present, depending on whether it's a column or a column group.
- Parameter
location
allows you to have different column names depending on where the column is appearing, eg you might want to have a different name when the column is in the column drop zone or the toolbar.
See the Column Tool Panel Example for an example of headerValueGetter
used in different locations, where you can change the header name depending on where the name appears.