---
product: "AG Grid"
title: "Text Formatting"
description: "Use a Value Formatter to provide text formatting of values."
framework: react
version: "36.2.0"
related:
    - title: "Getting Values"
      url: "https://www.ag-grid.com/archive/36.2.0/react-data-grid/value-getters/"
    - title: "Cell Components"
      url: "https://www.ag-grid.com/archive/36.2.0/react-data-grid/component-cell-renderer/"
    - title: "Cell Data Types"
      url: "https://www.ag-grid.com/archive/36.2.0/react-data-grid/cell-data-types/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# Text Formatting

Use a Value Formatter to provide text formatting of values.

In the example below:

- Column `Raw Value` displays the value of the `a` field of the row data.
- Column `Currency Amount (£)` uses a `currencyFormatter` to display the value as a currency.
- Column `Bracketed Value` uses a `bracketsFormatter` to display the value inside brackets.

#### Value Formatters

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import "./styles.css";
import {
  CellStyleModule,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  ModuleRegistry,
  ValueFormatterParams,
  enableDevValidations,
} from "ag-grid-community";

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

const modules = [CellStyleModule, ClientSideRowModelModule];

function bracketsFormatter(params: ValueFormatterParams) {
  return "(" + params.value + ")";
}

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

function formatNumber(number: number) {
  return Math.floor(number).toLocaleString();
}

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 GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<any[]>(createRowData());
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { headerName: "Raw Value", field: "a" },
    {
      headerName: "Currency Amount (£)",
      field: "a",
      valueFormatter: currencyFormatter,
    },
    {
      headerName: "Bracketed Value",
      field: "a",
      valueFormatter: bracketsFormatter,
    },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      cellClass: "number-cell",
    };
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact
            rowData={rowData}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

[Live example: Value Formatters](https://www.ag-grid.com/archive/36.2.0/examples/value-formatters/value-formatters/reactFunctionalTs/)

```jsx
const [columnDefs, setColumnDefs] = useState([
    // simple currency formatter
    { field: 'price', valueFormatter: params => params.value == null ? '' : '$' + params.value },
    // simple UPPER CASE formatter
    { field: 'code', valueFormatter: params => params.value?.toUpperCase() ?? '' }
]);

<AgGridReact columnDefs={columnDefs} />
```

## Value Formatter Definition

Below shows the column definition properties for value formatters.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `valueFormatter` | `string \| ValueFormatterFunc` |  |  |  |

Please note the Value Formatter params won't always have `data` and `node` supplied, e.g. the params supplied to the Value Formatter in the [Set Filter](https://www.ag-grid.com/archive/36.2.0/react-data-grid/filter-set/).

As a result favour formatter implementations that rely upon the 'value' argument instead, as this will lead to better reuse of your Value Formatters.

> **Note**
>
> If using [Cell Data Types](https://www.ag-grid.com/archive/36.2.0/react-data-grid/cell-data-types/), value formatters are set by default to handle the display of each of the different data types.
>
> `params.value` may also be `null` or `undefined`, e.g. for group rows or rows whose data has not loaded. Value Formatters must handle this themselves. See [TypeScript Generics](https://www.ag-grid.com/archive/36.2.0/react-data-grid/typescript-generics/) for how typing `TValue` surfaces these cases at compile time.

If you want more than text formatting, e.g. you need Buttons in the Cell, then use a [Cell Component](https://www.ag-grid.com/archive/36.2.0/react-data-grid/component-cell-renderer/).

## Formatting for Export

By default, the grid uses the value formatter when performing other grid operations that need values in string format.

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

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `useValueFormatterForExport` | `boolean` |  |  |  |

Using the value formatter for export applies to the following features:

- [Copy/Cut](https://www.ag-grid.com/archive/36.2.0/react-data-grid/clipboard/#processing-pasted-data)
- [Fill Handle](https://www.ag-grid.com/archive/36.2.0/react-data-grid/cell-selection-fill-handle/)
- [Copy Range Down](https://www.ag-grid.com/archive/36.2.0/react-data-grid/cell-selection/#copy-cell-range-down)
- [CSV Export](https://www.ag-grid.com/archive/36.2.0/react-data-grid/csv-export/)
- [Excel Export](https://www.ag-grid.com/archive/36.2.0/react-data-grid/excel-export-customising-content/)
- [PDF Export](https://www.ag-grid.com/archive/36.2.0/react-data-grid/pdf-export-customising-content/)

Using a value formatter for export is normally used in conjunction with [Using a Value Parser for Import](https://www.ag-grid.com/archive/36.2.0/react-data-grid/value-parsers/#use-value-parser-for-import), where a [Value Parser](https://www.ag-grid.com/archive/36.2.0/react-data-grid/value-parsers/) is defined that does the reverse of the value formatter.

The following example demonstrates the default behaviour using the value formatter for export with each of the supported features mentioned above.

#### Use Value Formatter for Export

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  ModuleRegistry,
  TextEditorModule,
  ValueFormatterParams,
  ValueParserParams,
  enableDevValidations,
} from "ag-grid-community";
import {
  CellSelectionModule,
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
  ExcelExportModule,
  PdfExportModule,
} from "ag-grid-enterprise";

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

const modules = [
  TextEditorModule,
  ClientSideRowModelModule,
  ClipboardModule,
  ExcelExportModule,
  PdfExportModule,
  ColumnMenuModule,
  ContextMenuModule,
  CellSelectionModule,
];

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 GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<any[]>(createRowData());
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    {
      headerName: "£A",
      field: "a",
      valueFormatter: currencyFormatter,
      valueParser: currencyParser,
    },
    {
      headerName: "£B",
      field: "b",
      valueFormatter: currencyFormatter,
      valueParser: currencyParser,
    },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      cellDataType: false,
      editable: true,
    };
  }, []);
  const cellSelection = useMemo<boolean | CellSelectionOptions>(() => {
    return {
      handle: {
        mode: "fill",
      },
    };
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact
            rowData={rowData}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            cellSelection={cellSelection}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

[Live example: Use Value Formatter for Export](https://www.ag-grid.com/archive/36.2.0/examples/value-formatters/use-value-formatter-for-export/reactFunctionalTs/)

Note that if any of the following conditions are true, then `useValueFormatterForExport` is ignored for that feature and the value will be either the original value or that set in the custom handler:

- If `processCellForClipboard` is provided when using copy/cut.
- If `fillOperation` is provided when using fill handle.
- If `processCellForClipboard` is provided when using copy range down.
- If `processCellCallback` is provided when using CSV export.
- If `processCellCallback` or [Excel Data Types](https://www.ag-grid.com/archive/36.2.0/react-data-grid/excel-export-data-types/) are provided when using Excel export.
- If the underlying value is a number when using Excel export. To export formatted number values to Excel, please use the [Excel Data Type](https://www.ag-grid.com/archive/36.2.0/react-data-grid/excel-export-data-types/#strings-number-and-booleans) feature.
- If `processCellCallback` is provided when using PDF export.