JavaScript Data Grid

Getting Values

javascript logo

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 }
],