Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

React Data Grid: Value Setters

After editing a cell, the grid normally inserts the new value into your data using the column definition field attribute. If it's not possible to use a field attribute, you can provide a Value Setter instead.

A Value Setter is the inverse of a Value Getter. Where the value getter allows getting values from your data using a function rather than a field, the value setter allows you to set values into your data using a function rather than specifying a field.

valueSetter
string | ValueSetterFunc
Function or expression. Sets the value into your data for saving. Return true if the data changed.
valueSetter: string | ValueSetterFunc;

interface ValueSetterFunc {
    (params: ValueSetterParams) : boolean
}

interface ValueSetterParams {
  // The value before the change 
  oldValue: any;
  // The value after the change 
  newValue: any;
  // Row node for the given row 
  node: RowNode | null;
  // Data associated with the node 
  data: any;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}

A value setter should return true if the value was updated successfully and false if the value was not updated (including if the value was not changed). When you return true, the grid knows it must refresh the cell.

The following is an example of how you would configure a column using the field attribute and then follows how the same can be done using value getters and value setters.

const valueGetter = params => {
    return params.data.name;
};
const valueSetter = params => {
    params.data.name = params.newValue;
    return true;
};

<AgGridReact>
    {/* Option 1: using field */}
    <AgGridColumn field="name" />
    {/* Options 2: using valueGetter and valueSetter - value getter used to get data */}
    <AgGridColumn valueGetter={valueGetter} valueSetter={valueSetter} />
</AgGridReact>

Example: Value Setter

The example below demonstrates value setters working alongside value getters (value setters are typically only used alongside value getters). Note the following:

  • All columns are editable. After an edit, the example prints the updated row data to the console to show the impact of the edit.
  • Column A uses field for both getting and setting the value. This is the simple case for comparison.
  • Column B uses valueGetter and valueSetter instead of field for getting and setting the value. This allows the value to be parsed into the correct type before being saved.
  • Column Name uses valueGetter to combine the value from the two attributes firstName and lastName and valueSetter is used to break the value up into the two same attributes.
  • Column C.X and C.Y use valueGetter to get the value from an embedded object. They then use valueSetter to set the value into the embedded object while also making sure the correct structure exists (this structure creation would not happen if using field).