---
title: "Excel Export - Formulas"
enterprise: true
framework: vue
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/vue-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/vue-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.

```ts
<ag-grid-vue
    :columnDefs="columnDefs"
    :defaultExcelExportParams="defaultExcelExportParams"
    :excelStyles="excelStyles"
    /* other grid options ... */>
</ag-grid-vue>

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

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

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  CellStyleModule,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ExcelExportParams,
  ExcelStyle,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  ExcelExportModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  CellStyleModule,
  ClientSideRowModelModule,
  ExcelExportModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="container">
      <div>
        <button v-on:click="onBtExport()" style="margin-bottom: 5px; font-weight: bold">Export to Excel</button>
      </div>
      <div class="grid-wrapper">
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          :columnDefs="columnDefs"
          :defaultColDef="defaultColDef"
          :defaultExcelExportParams="defaultExcelExportParams"
          :excelStyles="excelStyles"
          :rowData="rowData"></ag-grid-vue>
        </div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<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 = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const defaultExcelExportParams = ref<ExcelExportParams>({
      processCellCallback: (params) => {
        const rowIndex = params.accumulatedRowIndex;
        const valueGetter = params.column.getColDef().valueGetter;
        return valueGetter
          ? `=CONCATENATE(A${rowIndex}, " ", B${rowIndex})`
          : params.value;
      },
    });
    const excelStyles = ref<ExcelStyle[]>([
      {
        id: "fullName",
        dataType: "Formula",
      },
    ]);
    const rowData = ref<any[] | null>([
      { 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" },
    ]);

    function onBtExport() {
      gridApi.value!.exportDataAsExcel();
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      defaultExcelExportParams,
      excelStyles,
      rowData,
      onGridReady,
      onBtExport,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

## 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.

```ts
<ag-grid-vue
    :columnDefs="columnDefs"
    :defaultExcelExportParams="defaultExcelExportParams"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    { field: 'firstName', headerName: 'First Name' },
    { field: 'lastName', headerName: 'Last Name' },
    {
        headerName: 'Full Name',
        valueGetter: params => {
            return `${params.data.firstName} ${params.data.lastName}`;
        }
    },
];
this.defaultExcelExportParams = {
    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;
    }
 };
```

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

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ExcelExportParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  ExcelExportModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ExcelExportModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="container">
      <div>
        <button v-on:click="onBtExport()" style="margin-bottom: 5px; font-weight: bold">Export to Excel</button>
      </div>
      <div class="grid-wrapper">
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          :columnDefs="columnDefs"
          :defaultColDef="defaultColDef"
          :defaultExcelExportParams="defaultExcelExportParams"
          :rowData="rowData"></ag-grid-vue>
        </div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "firstName" },
      { field: "lastName" },
      {
        headerName: "Full Name",
        valueGetter: (params) => {
          return `${params.data.firstName} ${params.data.lastName}`;
        },
      },
      { field: "age" },
      { field: "company" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const defaultExcelExportParams = ref<ExcelExportParams>({
      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 rowData = ref<any[] | null>([
      { 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" },
    ]);

    function onBtExport() {
      gridApi.value!.exportDataAsExcel();
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      defaultExcelExportParams,
      rowData,
      onGridReady,
      onBtExport,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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