---
title: "Excel Export - Formulas"
enterprise: true
framework: react
version: "36.1.0"
---

# Excel Export - Formulas

Excel Export allows you to include Excel Formulas in the exported file. You can use formulas to translate any column Value Getters logic, so the column values are correctly computed locally in Excel.

> **Note**
>
> If you are using [Formulas](https://www.ag-grid.com/react-data-grid/formulas/) feature, formula expressions are exported into Excel automatically and you don't need to use the approach explained in this page. The following approach doesn’t take advantage of the Grid’s internal parser and relies on Excel for formula evaluation.

## Exporting formulas

There are two ways to include formulas as part of the exported Excel file.

1. Set `dataType='Formula'` in the [Excel Styles](https://www.ag-grid.com/react-data-grid/excel-export-styles/) for a column.
2. Set `autoConvertFormulas=true` in the Excel export parameters to be used across all columns.

## Formula Data Type

When a cell is exported with `dataType='Formula'`, the cell content will be automatically converted to an Excel formula. It is your responsibility to ensure the value in the grid cell is a valid Excel formula.

```jsx
const [columnDefs, setColumnDefs] = useState([
    { field: 'firstName', headerName: 'First Name' },
    { field: 'lastName', headerName: 'Last Name' },
    {
        headerName: 'Full Name',
        cellClass: 'fullName',
        valueGetter: params => {
            return `${params.data.firstName} ${params.data.lastName}`;
        }
    },
]);
const defaultExcelExportParams = useMemo(() => { 
	return {
        processCellCallback: params => {
            const rowIndex = params.accumulatedRowIndex;
            const valueGetter = params.column.getColDef().valueGetter;
            return !!valueGetter ? `=CONCATENATE(A${rowIndex}, " ", B${rowIndex})` : params.value;
        }
     };
}, []);
const excelStyles = useMemo(() => { 
	return [
        {
            id: 'fullName',
            dataType: 'Formula'
        }
    ];
}, []);

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

Note the following:

- The `Full Name` column uses a `valueGetter` to combine `First Name` and `Last Name`.
- The `processCellCallback` creates a formula that has a similar function of the `valueGetter`.
- The exported Excel Sheet will have the `Full Name` column computed using a formula that uses the `First Name` and `Last Name` columns as inputs.

#### Excel Export - Formula DataType

```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,
  ExcelExportParams,
  ExcelStyle,
  GridApi,
  GridOptions,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  ExcelExportModule,
} from "ag-grid-enterprise";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [
  CellStyleModule,
  ClientSideRowModelModule,
  ExcelExportModule,
  ColumnMenuModule,
  ContextMenuModule,
];

const GridExample = () => {
  const gridRef = useRef<AgGridReact>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<any[]>([
    { firstName: "Mair", lastName: "Inworth", age: 23, company: "Rhyzio" },
    { firstName: "Clair", lastName: "Cockland", age: 38, company: "Vitz" },
    { firstName: "Sonni", lastName: "Jellings", age: 24, company: "Kimia" },
    { firstName: "Kit", lastName: "Clarage", age: 27, company: "Skynoodle" },
    { firstName: "Tod", lastName: "de Mendoza", age: 29, company: "Teklist" },
    { firstName: "Herold", lastName: "Pelman", age: 23, company: "Divavu" },
    { firstName: "Paula", lastName: "Gleave", age: 37, company: "Demimbu" },
    {
      firstName: "Kendrick",
      lastName: "Clayill",
      age: 26,
      company: "Brainlounge",
    },
    {
      firstName: "Korrie",
      lastName: "Blowing",
      age: 32,
      company: "Twitternation",
    },
    { firstName: "Ferrell", lastName: "Towhey", age: 40, company: "Nlounge" },
    { firstName: "Anders", lastName: "Negri", age: 30, company: "Flipstorm" },
    { firstName: "Douglas", lastName: "Dalmon", age: 25, company: "Feedbug" },
    { firstName: "Roxanna", lastName: "Schukraft", age: 26, company: "Skinte" },
    { firstName: "Seumas", lastName: "Pouck", age: 34, company: "Aimbu" },
    { firstName: "Launce", lastName: "Welldrake", age: 25, company: "Twinte" },
    { firstName: "Siegfried", lastName: "Grady", age: 34, company: "Vimbo" },
    { firstName: "Vinson", lastName: "Hyams", age: 20, company: "Tanoodle" },
    { firstName: "Cayla", lastName: "Duckerin", age: 21, company: "Livepath" },
    { firstName: "Luigi", lastName: "Rive", age: 25, company: "Quatz" },
    { firstName: "Carolyn", lastName: "Blouet", age: 29, company: "Eamia" },
  ]);
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "firstName" },
    { field: "lastName" },
    {
      headerName: "Full Name",
      colId: "fullName",
      cellClass: "fullName", // references excel style
      valueGetter: (params) => {
        return `${params.data.firstName} ${params.data.lastName}`;
      },
    },
    { field: "age" },
    { field: "company" },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 100,
    };
  }, []);
  const defaultExcelExportParams = useMemo<ExcelExportParams>(() => {
    return {
      processCellCallback: (params) => {
        const rowIndex = params.accumulatedRowIndex;
        const valueGetter = params.column.getColDef().valueGetter;
        return valueGetter
          ? `=CONCATENATE(A${rowIndex}, " ", B${rowIndex})`
          : params.value;
      },
    };
  }, []);
  const excelStyles = useMemo<ExcelStyle[]>(() => {
    return [
      {
        id: "fullName",
        dataType: "Formula",
      },
    ];
  }, []);

  const onBtExport = useCallback(() => {
    gridRef.current!.api.exportDataAsExcel();
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="container">
          <div>
            <button
              onClick={onBtExport}
              style={{ marginBottom: "5px", fontWeight: "bold" }}
            >
              Export to Excel
            </button>
          </div>
          <div className="grid-wrapper">
            <div style={gridStyle}>
              <AgGridReact
                ref={gridRef}
                rowData={rowData}
                columnDefs={columnDefs}
                defaultColDef={defaultColDef}
                defaultExcelExportParams={defaultExcelExportParams}
                excelStyles={excelStyles}
              />
            </div>
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

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

[Live example: Excel Export - Formula DataType](https://www.ag-grid.com/examples/excel-export-formulas/excel-export-formula-data-type/reactFunctionalTs)

## Auto Convert Formulas

When `autoConvertFormulas=true` is set, the Excel Export will automatically convert any cell with a value that starts with '=' into a formula. As you wouldn't normally display the formula text in the grid (instead, you will display its results), you can provide the Excel formula text in the call to `processCellCallback`, implementing the logic used to compute the cell value in the column's `valueGetter`. This substitution of `valueGetter` logic for an Excel formula in the exported Excel file is shown in the code segment and sample below.

```jsx
const [columnDefs, setColumnDefs] = useState([
    { field: 'firstName', headerName: 'First Name' },
    { field: 'lastName', headerName: 'Last Name' },
    {
        headerName: 'Full Name',
        valueGetter: params => {
            return `${params.data.firstName} ${params.data.lastName}`;
        }
    },
]);
const defaultExcelExportParams = useMemo(() => { 
	return {
        autoConvertFormulas: true, // instead of dataType='Formula'
        processCellCallback: params => {
            const rowIndex = params.accumulatedRowIndex;
            const valueGetter = params.column.getColDef().valueGetter;
            return !!valueGetter ? `=CONCATENATE(A${rowIndex}, " ", B${rowIndex})` : params.value;
        }
     };
}, []);

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

Note the following:

- The `Full Name` column uses a `valueGetter` to combine `First Name` and `Last Name`.
- The `processCellCallback` code will be executed for all cells exported to Excel. This code will create an Excel formula for any cell with a `valueGetter`. In our sample there's only one such column (Full Name), and we output the corresponding formula (CONCATENATE) into the Excel exported file. This way the exported Excel file will have cells in the `Full Name` column be computed based on the values of `First Name` and `Last Name`.
- As `autoConvertFormulas=true` there is no need to declare `dataType='Formula'`

#### Excel Export - Auto Convert Formulas

```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 {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ExcelExportParams,
  GridApi,
  GridOptions,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  ExcelExportModule,
} from "ag-grid-enterprise";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [
  ClientSideRowModelModule,
  ExcelExportModule,
  ColumnMenuModule,
  ContextMenuModule,
];

const GridExample = () => {
  const gridRef = useRef<AgGridReact>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<any[]>([
    { firstName: "Mair", lastName: "Inworth", age: 23, company: "Rhyzio" },
    { firstName: "Clair", lastName: "Cockland", age: 38, company: "Vitz" },
    { firstName: "Sonni", lastName: "Jellings", age: 24, company: "Kimia" },
    { firstName: "Kit", lastName: "Clarage", age: 27, company: "Skynoodle" },
    { firstName: "Tod", lastName: "de Mendoza", age: 29, company: "Teklist" },
    { firstName: "Herold", lastName: "Pelman", age: 23, company: "Divavu" },
    { firstName: "Paula", lastName: "Gleave", age: 37, company: "Demimbu" },
    {
      firstName: "Kendrick",
      lastName: "Clayill",
      age: 26,
      company: "Brainlounge",
    },
    {
      firstName: "Korrie",
      lastName: "Blowing",
      age: 32,
      company: "Twitternation",
    },
    { firstName: "Ferrell", lastName: "Towhey", age: 40, company: "Nlounge" },
    { firstName: "Anders", lastName: "Negri", age: 30, company: "Flipstorm" },
    { firstName: "Douglas", lastName: "Dalmon", age: 25, company: "Feedbug" },
    { firstName: "Roxanna", lastName: "Schukraft", age: 26, company: "Skinte" },
    { firstName: "Seumas", lastName: "Pouck", age: 34, company: "Aimbu" },
    { firstName: "Launce", lastName: "Welldrake", age: 25, company: "Twinte" },
    { firstName: "Siegfried", lastName: "Grady", age: 34, company: "Vimbo" },
    { firstName: "Vinson", lastName: "Hyams", age: 20, company: "Tanoodle" },
    { firstName: "Cayla", lastName: "Duckerin", age: 21, company: "Livepath" },
    { firstName: "Luigi", lastName: "Rive", age: 25, company: "Quatz" },
    { firstName: "Carolyn", lastName: "Blouet", age: 29, company: "Eamia" },
  ]);
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "firstName" },
    { field: "lastName" },
    {
      headerName: "Full Name",
      valueGetter: (params) => {
        return `${params.data.firstName} ${params.data.lastName}`;
      },
    },
    { field: "age" },
    { field: "company" },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 100,
    };
  }, []);
  const defaultExcelExportParams = useMemo<ExcelExportParams>(() => {
    return {
      autoConvertFormulas: true, // instead of dataType='Formula'
      processCellCallback: (params) => {
        const rowIndex = params.accumulatedRowIndex;
        const valueGetter = params.column.getColDef().valueGetter;
        return valueGetter
          ? `=CONCATENATE(A${rowIndex}, " ", B${rowIndex})`
          : params.value;
      },
    };
  }, []);

  const onBtExport = useCallback(() => {
    gridRef.current!.api.exportDataAsExcel();
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="container">
          <div>
            <button
              onClick={onBtExport}
              style={{ marginBottom: "5px", fontWeight: "bold" }}
            >
              Export to Excel
            </button>
          </div>
          <div className="grid-wrapper">
            <div style={gridStyle}>
              <AgGridReact
                ref={gridRef}
                rowData={rowData}
                columnDefs={columnDefs}
                defaultColDef={defaultColDef}
                defaultExcelExportParams={defaultExcelExportParams}
              />
            </div>
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

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

[Live example: Excel Export - Auto Convert Formulas](https://www.ag-grid.com/examples/excel-export-formulas/excel-export-auto-convert-formulas/reactFunctionalTs)