Angular Data GridGetting Values

Values are mapped into Cells using either field or valueGetter from the Column Definition.

Field Copy Link

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.

<ag-grid-angular
    [rowData]="rowData"
    [columnDefs]="columnDefs"
    /* other grid options ... */ />

this.rowData = [
    {
        athlete: 'Michael Phelps',
        medals: {
            gold: 8, silver: 1, bronze: 0
        }
    }
];

this.columnDefs = [
    // simple field attribute
    { field: 'athlete' },
    // using dot notation, a Header Name is usally needed
    { field: 'medals.gold', headerName: 'Gold' },
];

Value Getter Copy Link

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 Getters usually have manually provided Header Names as the grid cannot derive Header Names from Value Getters like it does with Fields.

this.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 }
];

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 Copy Link

See the Column Header Value Getters for an example of using headerValueGetter.