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

# Excel Export - Data Types

Excel Exporter allows you to export values into different Excel data types.

## Strings, Number and Booleans

In order to correctly display cell values in the exported Excel file you need to set the appropriate formatting to use during the Excel export process. In the segment below, we're demonstrating different value formatting to export values into different Excel data types.

Note that:

- We define a list of Excel types/formats to export into in the `excelStyles` array. These styles include a **unique id**, and either a `dataType` or a `numberFormat`.
- In the grid column definitions we link to the corresponding types defined in the `excelStyles` array storing the export configuration we want to apply for the column values.

```jsx
const [columnDefs, setColumnDefs] = useState([
    { headerName: 'provided', field: 'rawValue' },
    { headerName: 'number', field: 'rawValue', cellClass: 'numberType' },
    { headerName: 'currency', field: 'rawValue', cellClass: 'currencyFormat' },
    { headerName: 'boolean', field: 'rawValue', cellClass: 'booleanType' },
    { headerName: 'Negative', field: 'negativeValue', cellClass: 'negativeInBrackets' },
    { headerName: 'string', field: 'rawValue', cellClass: 'stringType' },
    { headerName: 'Date', field: 'dateValue', cellClass: 'dateType', minWidth: 220 },
]);
const [rowData, setRowData] = useState([
    {
        rawValue: 1,
        negativeValue: -10,
        dateValue: '2009-04-20T00:00:00.000',
    },
]);
const excelStyles = useMemo(() => { 
	return [
        {
            id: 'numberType',
            numberFormat: {
                format: '0',
            },
        },
        {
            id: 'currencyFormat',
            numberFormat: {
                format: '#,##0.00 €',
            },
        },
        {
            id: 'negativeInBrackets',
            numberFormat: {
                format: '$[blue] #,##0;$ [red](#,##0)',
            },
        },
        {
            id: 'booleanType',
            dataType: 'Boolean',
        },
        {
            id: 'stringType',
            dataType: 'String',
        },
        {
            id: 'dateType',
            dataType: 'DateTime',
        },
    ];
}, []);
const popupParent = useMemo(() => { 
	return document.body;
}, []);

<AgGridReact
    columnDefs={columnDefs}
    rowData={rowData}
    excelStyles={excelStyles}
    popupParent={popupParent}
/>
```

The following example demonstrates how to use other data types for your export.

Note that:

- Boolean works by using `1` for `true`, `0` for `false`. All other values produce an error when exported to boolean.
- When you provide a `numberFormat`, the value gets exported as a number using the format provided. You can set the decimal places, format negative values differently and change the exported value color based on the value.
- When using dataType: 'DateTime', the date time format for Excel is `yyyy-mm-ddThh:MM:ss.mmm:`
- If you try to export a value that is not compatible with the underlying data type Excel will display an error when opening the file.
- When using `dataType: 'DateTime'` Excel doesn't format the resultant value, in this example it shows `39923`. You need to add the formatting inside Excel. You can see a better example of how to handle Date Formatting in the [Dates](https://www.ag-grid.com/react-data-grid/excel-export-data-types/#dates) section below.

#### Excel Data Types

```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,
  CsvExportModule,
  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,
  CsvExportModule,
  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[]>([
    {
      rawValue: 1,
      negativeValue: -10,
      dateValue: "2009-04-20T00:00:00.000",
    },
  ]);
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { headerName: "provided", field: "rawValue" },
    { headerName: "number", field: "rawValue", cellClass: "numberType" },
    { headerName: "currency", field: "rawValue", cellClass: "currencyFormat" },
    { headerName: "boolean", field: "rawValue", cellClass: "booleanType" },
    {
      headerName: "Negative",
      field: "negativeValue",
      cellClass: "negativeInBrackets",
    },
    { headerName: "string", field: "rawValue", cellClass: "stringType" },
    {
      headerName: "Date",
      field: "dateValue",
      cellClass: "dateType",
      minWidth: 220,
    },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 100,
    };
  }, []);
  const excelStyles = useMemo<ExcelStyle[]>(() => {
    return [
      {
        id: "numberType",
        numberFormat: {
          format: "0",
        },
      },
      {
        id: "currencyFormat",
        numberFormat: {
          format: "#,##0.00 €",
        },
      },
      {
        id: "negativeInBrackets",
        numberFormat: {
          format: "$[blue] #,##0;$ [red](#,##0)",
        },
      },
      {
        id: "booleanType",
        dataType: "Boolean",
      },
      {
        id: "stringType",
        dataType: "String",
      },
      {
        id: "dateType",
        dataType: "DateTime",
      },
    ];
  }, []);
  const popupParent = useMemo<HTMLElement | null>(() => {
    return document.body;
  }, []);

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

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="example-wrapper">
          <div className="example-header">
            <button onClick={onBtExport} style={{ fontWeight: "bold" }}>
              Export to Excel
            </button>
          </div>

          <div style={gridStyle}>
            <AgGridReact
              ref={gridRef}
              rowData={rowData}
              columnDefs={columnDefs}
              defaultColDef={defaultColDef}
              excelStyles={excelStyles}
              popupParent={popupParent}
            />
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

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

[Live example: Excel Data Types](https://www.ag-grid.com/examples/excel-export-data-types/excel-export-data-types/reactFunctionalTs)

## Dates

When exporting dates to Excel format, you should use an Excel Style with `dataType="DateTime"`. The DateTime format only accepts dates in ISO Format, so all date values need to be provided in the `yyyy-mm-ddThh:mm:ss` format.

If your date values are not in ISO format, please use the `processCellCallback` method to convert them. As demonstrated in example above, by default Excel displays these date values as numbers. To format these numbers like regular dates in Excel, please enter a numberFormat value containing the desired date value format in the Excel Style as shown below:

```jsx
const [columnDefs, setColumnDefs] = useState([
    {
        field: 'date',
        headerName: 'ISO Format',
        cellClass: 'dateISO'
    }
]);
const [rowData, setRowData] = useState([
    { date: '2020-05-30T10:01:00' },
    { date: '2015-04-21T16:30:00' },
    { date: '2010-02-19T12:02:00' },
    { date: '1995-10-04T03:27:00' }
]);
const excelStyles = useMemo(() => { 
	return [
        {
            id: 'dateISO',
            dataType: 'DateTime',
            numberFormat: {
                format: 'yyy-mm-ddThh:mm:ss'
            }
        }
    ];
}, []);

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

Note the following:

- There is only one date source in `ISO Format`.
- All columns apart from the `ISO Format` column use `Value Formatter` to change the date format.
- The `excelStyles` has a `numberFormat` for each date style (including the ISO Format), otherwise only a number would be displayed.

#### Excel Export - Styling Dates

```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,
  CsvExportModule,
  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,
  CsvExportModule,
  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[]>([
    { date: "2020-05-30T10:01:00" },
    { date: "2015-04-21T16:30:00" },
    { date: "2010-02-19T12:02:00" },
    { date: "1995-10-04T03:27:00" },
  ]);
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    {
      field: "date",
      headerName: "ISO Format",
      cellClass: "dateISO",
      minWidth: 150,
    },
    {
      field: "date",
      headerName: "dd/mm/yy",
      cellClass: "dateUK",
      valueFormatter: (params) => {
        const date = new Date(params.value);
        const day = date.getDate().toString().padStart(2, "0");
        const month = (date.getMonth() + 1).toString().padStart(2, "0");
        const year = date.getFullYear().toString().substring(2);
        return day + "/" + month + "/" + year;
      },
    },
    {
      field: "date",
      headerName: "mm/dd/yy",
      cellClass: "dateUS",
      valueFormatter: (params) => {
        const date = new Date(params.value);
        const day = date.getDate().toString().padStart(2, "0");
        const month = (date.getMonth() + 1).toString().padStart(2, "0");
        const year = date.getFullYear().toString().substring(2);
        return month + "/" + day + "/" + year;
      },
    },
    {
      field: "date",
      headerName: "dd/mm/yyy h:mm:ss AM/PM",
      cellClass: "dateLong",
      minWidth: 150,
      valueFormatter: (params) => {
        const date = new Date(params.value);
        const day = date.getDate().toString().padStart(2, "0");
        const month = (date.getMonth() + 1).toString().padStart(2, "0");
        const year = date.getFullYear().toString();
        const hourNum = date.getHours() % 12;
        const hour = (hourNum === 0 ? 12 : hourNum).toString().padStart(2, "0");
        const min = date.getMinutes().toString().padStart(2, "0");
        const sec = date.getSeconds().toString().padStart(2, "0");
        const amPM = date.getHours() < 12 ? "AM" : "PM";
        return (
          day +
          "/" +
          month +
          "/" +
          year +
          " " +
          hour +
          ":" +
          min +
          ":" +
          sec +
          " " +
          amPM
        );
      },
    },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 100,
    };
  }, []);
  const excelStyles = useMemo<ExcelStyle[]>(() => {
    return [
      {
        id: "dateISO",
        dataType: "DateTime",
        numberFormat: {
          format: "yyy-mm-ddThh:mm:ss",
        },
      },
      {
        id: "dateUK",
        dataType: "DateTime",
        numberFormat: {
          format: "dd/mm/yy",
        },
      },
      {
        id: "dateUS",
        dataType: "DateTime",
        numberFormat: {
          format: "mm/dd/yy",
        },
      },
      {
        id: "dateLong",
        dataType: "DateTime",
        numberFormat: {
          format: "dd/mm/yyy h:mm:ss AM/PM",
        },
      },
    ];
  }, []);

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

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="page-wrapper">
          <div>
            <button
              onClick={onBtnExportDataAsExcel}
              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}
                excelStyles={excelStyles}
              />
            </div>
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

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

[Live example: Excel Export - Styling Dates](https://www.ag-grid.com/examples/excel-export-data-types/excel-export-dates/reactFunctionalTs)