{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/react-data-grid/excel-export-data-types/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Excel Exporter allows you to export values into different Excel data types."}]},{"type":"element","tagName":"h2","properties":{"id":"strings-number-and-booleans","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#strings-number-and-booleans","ariaLabel":"strings number and booleans permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Strings, Number and Booleans"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"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."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"We define a list of Excel types/formats to export into in the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"excelStyles"}]},{"type":"text","value":" array. These styles include a "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"unique id"}]},{"type":"text","value":", and either a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"dataType"}]},{"type":"text","value":" or a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"numberFormat"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"In the grid column definitions we link to the corresponding types defined in the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"excelStyles"}]},{"type":"text","value":" array storing the export configuration we want to apply for the column values."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        { headerName: 'provided', field: 'rawValue' },\n        { headerName: 'number', field: 'rawValue', cellClass: 'numberType' },\n        { headerName: 'currency', field: 'rawValue', cellClass: 'currencyFormat' },\n        { headerName: 'boolean', field: 'rawValue', cellClass: 'booleanType' },\n        { headerName: 'Negative', field: 'negativeValue', cellClass: 'negativeInBrackets' },\n        { headerName: 'string', field: 'rawValue', cellClass: 'stringType' },\n        { headerName: 'Date', field: 'dateValue', cellClass: 'dateType', minWidth: 220 },\n    ], \n    rowData: [\n        {\n            rawValue: 1,\n            negativeValue: -10,\n            dateValue: '2009-04-20T00:00:00.000',\n        },\n    ],\n    excelStyles: [\n        {\n            id: 'numberType',\n            numberFormat: {\n                format: '0',\n            },\n        },\n        {\n            id: 'currencyFormat',\n            numberFormat: {\n                format: '#,##0.00 €',\n            },\n        },\n        {\n            id: 'negativeInBrackets',\n            numberFormat: {\n                format: '$[blue] #,##0;$ [red](#,##0)',\n            },\n        },\n        {\n            id: 'booleanType',\n            dataType: 'Boolean',\n        },\n        {\n            id: 'stringType',\n            dataType: 'String',\n        },\n        {\n            id: 'dateType',\n            dataType: 'DateTime',\n        },\n    ],\n    popupParent: document.body\n};\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates how to use other data types for your export. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Boolean works off using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"1"}]},{"type":"text","value":" for "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"0"}]},{"type":"text","value":" for "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"false"}]},{"type":"text","value":". All other values produce an error when exported to boolean."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When you provide a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"numberFormat"}]},{"type":"text","value":", 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."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When using dataType: 'DateTime', the date time format for Excel is "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"yyyy-mm-ddThh:MM:ss.mmm:"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"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."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"dataType: 'DateTime'"}]},{"type":"text","value":" Excel doesn't format the resultant value, in this example it shows "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"39923"}]},{"type":"text","value":". You need to add the formatting inside Excel. You can see a better example of how to handle Date Formatting in the "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/excel-export-styles/"},"children":[{"type":"text","value":"Excel Styles"}]},{"type":"text","value":" section."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Excel Data Types","name":"excel-export-data-types","type":"generated","options":"{ \"enterprise\": true,\"modules\": [\"clientside\", \"csv\", \"excel\", \"menu\"], \"exampleHeight\": 200 }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"dates","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#dates","ariaLabel":"dates permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Dates"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When exporting dates to Excel format, you should use an Excel Style with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"dataType=\"DateTime\""}]},{"type":"text","value":". The DateTime format only accepts dates in ISO Format, so all date values need to be provided in the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"yyyy-mm-ddThh:mm:ss"}]},{"type":"text","value":" format. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If your date values are not in ISO format, please use the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"processCellCallback"}]},{"type":"text","value":" 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:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {\n            field: 'date',\n            headerName: 'ISO Format',\n            cellClass: 'dateISO'\n        }\n    ], \n    rowData: [\n        { date: '2020-05-30T10:01:00' },\n        { date: '2015-04-21T16:30:00' },\n        { date: '2010-02-19T12:02:00' },\n        { date: '1995-10-04T03:27:00' }\n    ],\n    excelStyles: [\n        {\n            id: 'dateISO',\n            dataType: 'DateTime',\n            numberFormat: {\n                format: 'yyy-mm-ddThh:mm:ss'\n            }\n        }\n    ]\n};\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"There is only one date source in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ISO Format"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"All columns apart from the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ISO Format"}]},{"type":"text","value":" column use "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Value Formatter"}]},{"type":"text","value":" to change the date format."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"excelStyles"}]},{"type":"text","value":" has a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"numberFormat"}]},{"type":"text","value":" for each date style (including the ISO Format), otherwise only a number would be displayed."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Excel Export - Styling Dates","name":"excel-export-dates","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"csv\", \"excel\", \"menu\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"next-up","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#next-up","ariaLabel":"next up permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Next Up"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Continue to the next section: "},{"type":"element","tagName":"a","properties":{"href":"../excel-export-hyperlinks/"},"children":[{"type":"text","value":"Hyperlinks"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"Excel Export - Data Types","version":null,"enterprise":true,"description":null},"headings":[{"id":"strings-number-and-booleans","depth":2,"value":"Strings, Number and Booleans"},{"id":"dates","depth":2,"value":"Dates"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"react","srcPath":"/excel-export-data-types","pageName":"excel-export-data-types"}},
    "staticQueryHashes": ["1766026005","3577950178","699667431"]}