---
title: "Parsing Values"
framework: javascript
version: "36.1.0"
---

# Parsing Values

After editing cells in the grid you have the opportunity to parse the value before inserting it into your data. This is done using Value Parsers.

> **Note**
>
> If using [Cell Data Types](https://www.ag-grid.com/javascript-data-grid/cell-data-types/) (which are enabled by default), Value Parsers are automatically set to handle the conversion of each of the basic data types - e.g. `number`, `date`, `boolean`. In this scenario, Value Parsers only need to be defined for object data types, or if the default behaviour needs to be overridden.
>
> The example below assumes Cell Data Types are disabled.

## Value Parser

For example suppose you are editing a number using a text editor. The result will be a `string`, however you will probably want to store the result as a `number`. Use a Value Parser to convert the `string` to a `number`.

```js
const gridOptions = {
    columnDefs: [
        {
            // name is a string, so don't need to convert
            field: 'name',
            editable: true,
        },
        {
            // age is a number, so want to convert from string to number
            field: 'age',
            editable: true,
            valueParser: params => Number(params.newValue)
        }
    ],

    // other grid options ...
}
```

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `valueParser` | `string \| ValueParserFunc` |  |  | Function or [expression](https://www.ag-grid.com/javascript-data-grid/cell-expressions/#column-definition-expressions). Parses the value for saving. |

The return value of a value parser should be the result of the parse, i.e. return the value you want stored in the data.

Below shows an example using value parsers. The following can be noted:

- All columns are editable. After any edit, the console prints the new data for that row.
- Column 'Name' is a string column. No parser is needed.
- Column 'Bad Number' is bad because after an edit, the value is stored as a string in the data, whereas the data value should be number type.
- Column 'Good Number' is good because after an edit, the value is converted to a number using the value parser.

#### Value Parsers

```ts
import {
  CellValueChangedEvent,
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  TextEditorModule,
  ValueParserParams,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { getData } from "./data";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([TextEditorModule, ClientSideRowModelModule]);

let gridApi: GridApi;

const gridOptions: GridOptions = {
  columnDefs: [
    { headerName: "Name", field: "simple" },
    { headerName: "Bad Number", field: "numberBad" },
    {
      headerName: "Good Number",
      field: "numberGood",
      valueParser: numberParser,
    },
  ],
  defaultColDef: {
    flex: 1,
    editable: true,
    cellDataType: false,
  },
  rowData: getData(),
  onCellValueChanged: onCellValueChanged,
};

function onCellValueChanged(event: CellValueChangedEvent) {
  console.log("data after changes is: ", event.data);
}

function numberParser(params: ValueParserParams) {
  return Number(params.newValue);
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
```

[Live example: Value Parsers](https://www.ag-grid.com/examples/value-parsers/example-parsers/typescript)

## Use Value Parser for Import

By default, the grid uses the value parser when performing other grid operations that can update values.

This behaviour can be prevented by setting the column definition property `useValueParserForImport = false` (note this does not apply to editing).

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `useValueParserForImport` | `boolean` |  | `true` | By default, values are parsed using the column's `valueParser` when importing data to the grid. This applies to clipboard operations and the fill handle. Set to `false` to prevent values from being parsed for these operations. Regardless of this option, if custom handling is provided for the import operation, the value parser will not be used. |

Using the value parser for import applies to the following features:

- [Paste](https://www.ag-grid.com/javascript-data-grid/clipboard/#processing-pasted-data)
- [Fill Handle](https://www.ag-grid.com/javascript-data-grid/cell-selection-fill-handle/)
- [Copy Range Down](https://www.ag-grid.com/javascript-data-grid/cell-selection/#copy-cell-range-down)

Using a value parser for import is normally used in conjunction with [Using a Value Formatter for Export](https://www.ag-grid.com/javascript-data-grid/value-formatters/#formatting-for-export), where a [Value Formatter](https://www.ag-grid.com/javascript-data-grid/value-formatters/) is defined that does the reverse of the value parser.

The following example demonstrates using the value parser for import with each of the supported features mentioned above.

#### Use Value Parser for Import

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  TextEditorModule,
  ValueFormatterParams,
  ValueParserParams,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, ClipboardModule } from "ag-grid-enterprise";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextEditorModule,
  ClientSideRowModelModule,
  ClipboardModule,
  CellSelectionModule,
]);

let gridApi: GridApi;

const gridOptions: GridOptions = {
  columnDefs: [
    {
      headerName: "£A",
      field: "a",
      valueFormatter: currencyFormatter,
      valueParser: currencyParser,
    },
    {
      headerName: "£B",
      field: "b",
      valueFormatter: currencyFormatter,
      valueParser: currencyParser,
    },
  ],
  defaultColDef: {
    cellDataType: false,
    editable: true,
  },
  rowData: createRowData(),
  cellSelection: {
    handle: {
      mode: "fill",
    },
  },
};

function currencyFormatter(params: ValueFormatterParams) {
  return params.value == null ? "" : "£" + params.value;
}

function currencyParser(params: ValueParserParams) {
  let value = params.newValue;
  if (value == null || value === "") {
    return null;
  }
  value = String(value);

  if (value.startsWith("£")) {
    value = value.slice(1);
  }
  return parseFloat(value);
}

function createRowData() {
  const rowData = [];

  for (let i = 0; i < 100; i++) {
    rowData.push({
      a: Math.floor(((i + 2) * 173456) % 10000),
      b: Math.floor(((i + 7) * 373456) % 10000),
    });
  }

  return rowData;
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
```

[Live example: Use Value Parser for Import](https://www.ag-grid.com/examples/value-parsers/use-value-parser-for-import/typescript)

Note that if you are providing your own custom handling for the following features, then `useValueParserForImport` is ignored and the value will be either the original value or that set in the custom handler:

- If `processCellFromClipboard` is provided when using paste.
- If `fillOperation` is provided when using fill handle.
- If `processCellFromClipboard` is provided when using copy range down.