Search

JavaScript Data GridGetting Values

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 }
],
valueGetter
string | ValueGetterFunc
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.

headerValueGetter
string | HeaderValueGetterFunc
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.