Differences between valuegetter, valueparser and valueformatter - Ag-grid

Question

I am trying to understand what is the correct usecase for ag-grid's valuegetter vs valueformatter vs valueparser ?

https://www.ag-grid.com/javascript-grid-value-getters/

https://www.ag-grid.com/javascript-grid-value-formatters/

https://www.ag-grid.com/javascript-grid-value-parsers/

Versicolor

Answer 1

Value getter should be used when you want to have custom logic when sourcing data for your ag grid field.
Let's say you have 2 separate fields displaying First Name and Last Name and you want to have a derived field to show full name, you would use a valueGetter for this new field to concatenate First Name and Last Name
As per docs -

A Value Getter is a function that gets called allowing values to be pulled from literally anywhere, including executing any expressions you wish along the way

Example -

   {
    headerName: 'Name',
    colId: 'name',
    valueGetter: function(params) {
      return params.data.First_Name + " " + params.data.Second_Name;
    },
  },

Note that valueGetter gets called instead of colDef.field if you have a valueGetter defined

Value formatter should be used when you want to format your data for display. This will not affect the underlying data.
A classic use case is when you want to round numbers for a numeric field.

Example :

{
    headerName: 'Price',
    colId: 'price',
    valueFormatter: function (params) {return params.value.toFixed(2) ;}
 },

Value parser should be used when editing cells. It is the inverse of ValueFormatter, it lets you format your data before you set the value for the cell.

As per docs -

After editing cells in the grid you have the opportunity to parse the value before inserting it into your data

A typical use case would be if your number is displayed with commas, you would want to parse it to remove commas when you edit it and setting data to your row.

Important things to note
- As of today, the column filters in ag-grid are driven off colDef.field or valueGetter. So if you define valueFormatter for a column, do not expect formatted values to show up in column filters (for set filter). Using valueGetter would make sure column filters match with the displayed data.

Discussant

If only the documentation was this good. Thanks! – Ptolemaist

The situation (for v28 at least) is more complicated than what your "Important things to note" suggests. When using server-side row model (SSRM) I have managed to use both valueGettter and valueFormatter in a set-filtered column definition with no problem. But you may have, in that context, also provide a second valueFormatter for the filter itself (in addition to the one for column data). That second valueFormatter is supplied with different values. E.g. in a numeric column, the filter valueFormatter will be supplied with the value as a string. Documentation is very poor. – Wellnigh

Answer 2

This diagram from the docs shows the flow between the valueGetter, valueFormatter and cellRenderer.

Note that when copying or exporting values from the grid they will be pre valueFormatter.

Serge