Expand All

  Getting Started



  Row Models




  Third Party


Github stars make projects look great. Please help, donate a star, it's free.
Read about ag-Grid's Partnership with webpack.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

Value Getters

The default way to get a value from a cell is provide a field value to the grid. However that may not always be possible. If you need more control over how a value is calculated, then use Value Getters.

A value getter is either a function or an expression for getting the value for a cell. The result of the value getter is then forwarded to the cell renderer for rendering. Thus it is possible to have a value getter for example calculating a total of columns, and then a cell renderer for rendering currency, that renders decoupled from how the value is generated.

The parameters provided to valueGetters are as follows:

  • data: The row (from the rowData array, where value was taken) been rendered.
  • node: The node to be rendered.
  • colDef: The colDef in question, as provided through the gridOptions.
  • api: The API for the grid.
  • context: The grid context.
  • getValue(): A function, give it a column field name, and it returns the value for that column. Useful for chaining value getters.

The parameters to the value getter are similar to that of cellRenderers except with the following interesting differences:
a) No value - as it's the valueGetters responsibiliy to create the value).
b) No rowIndex - as the value should exist outside the concept of rendering to a particular row - for example, the valueGetter could be called for a row that is not being rendered.

Value Getter Functions

Value getter functions are similar to value renderers in their operation, in that you provide the value getter function as a function attached to the column definition.

The example below uses a valueGetter function for calculating the 'Age Now' column.

Value Getter Expressions

Value getter expressions work in the same was as functions, except you pass an expression. The expression has access to the same attributes as the function which are:

  • ctx: maps context
  • node: maps node
  • data: maps data
  • colDef: maps colDef
  • api: maps api
  • getValue: maps getValue
The example below uses a valueGetter expression to calculate the Total Medals column.

Header Value Getters

Headers can also have values that change or are dependent on some extra data. For example, you might have a column that has the name of the current calendar month, and changes depending on what month the report is looking at.

As with cell valueGetters, a headerValueGetter can be a function or an expression. It is provided with the parameters:

  • column: The column, or null if it's a column group.
  • columnGroup: The column group, or null if it's a column.
  • location: Where the name will be used, one of {csv, clipboard, toolPanel, columnDrop, header}.
  • colDef: The column definition.
  • ctx: Grid context.
  • api: Grid API.
The only item not normal in the parameters is as follows:
  1. Only one of column or columnGroup will be present, depending on whether it's a column or a column group.
  2. 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 Tool Panel Example for an example of headerValueGetter.

If you want to update the columns (say after a change in the data which requires a new column name) then get the grid to update by calling api.refreshHeader().