Cell Customization

The customizeCell function allows you to modify cell data and value formatting in exported worksheets. You can access and change the following attributes:

Font properties
Cell background
Cell values
Text alignment
Formatting properties

The customizeCell function also allows you to identify row types. For example, this demo changes the background color and font weight for cells with the "group" rowType.

You can specify the cell used as the start position for exported data. For this purpose, assign an object with the cell coordinates to the topLeftCell property.

Prev Demo

Next Demo

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

import React from 'react'; import DataGrid, { Column, Export, Summary, GroupPanel, Grouping, SortByGroupSummaryInfo, TotalItem, } from 'devextreme-react/data-grid'; import { Workbook } from 'exceljs'; import { saveAs } from 'file-saver-es'; // Our demo infrastructure requires us to use 'file-saver-es'. // We recommend that you use the official 'file-saver' package in your applications. import { exportDataGrid } from 'devextreme/excel_exporter'; import service from './data.js'; class App extends React.Component { constructor(props) { super(props); this.companies = service.getCompanies(); this.onExporting = this.onExporting.bind(this); } render() { return ( <div> <DataGrid id="gridContainer" dataSource={this.companies} keyExpr="ID" width="100%" showBorders={true} onExporting={this.onExporting}> <GroupPanel visible={true} /> <Grouping autoExpandAll={true} /> <SortByGroupSummaryInfo summaryItem="count" /> <Column dataField="Name" width={190} /> <Column dataField="Address" width={200} /> <Column dataField="City" /> <Column dataField="State" groupIndex={0} /> <Column dataField="Phone" format={this.phoneNumberFormat} /> <Column dataField="Website" caption="" alignment="center" width={100} cellRender={this.renderGridCell} /> <Export enabled={true} /> <Summary> <TotalItem column="Name" summaryType="count" displayFormat="Total count: {0} companies" /> </Summary> </DataGrid> </div> ); } renderGridCell(data) { return <a href={ data.text } target='_blank' rel='noopener noreferrer'>Website</a>; } phoneNumberFormat(value) { const USNumber = value.match(/(\d{3})(\d{3})(\d{4})/); return `(${USNumber[1]}) ${USNumber[2]}-${USNumber[3]}`; } onExporting(e) { const workbook = new Workbook(); const worksheet = workbook.addWorksheet('Companies'); worksheet.columns = [ { width: 5 }, { width: 30 }, { width: 25 }, { width: 15 }, { width: 25 }, { width: 40 }, ]; exportDataGrid({ component: e.component, worksheet, keepColumnWidths: false, topLeftCell: { row: 2, column: 2 }, customizeCell: ({ gridCell, excelCell }) => { if (gridCell.rowType === 'data') { if (gridCell.column.dataField === 'Phone') { excelCell.value = parseInt(gridCell.value, 10); excelCell.numFmt = '[<=9999999]###-####;(###) ###-####'; } if (gridCell.column.dataField === 'Website') { excelCell.value = { text: gridCell.value, hyperlink: gridCell.value }; excelCell.font = { color: { argb: 'FF0000FF' }, underline: true }; excelCell.alignment = { horizontal: 'left' }; } } if (gridCell.rowType === 'group') { excelCell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'BEDFE6' } }; } if (gridCell.rowType === 'totalFooter' && excelCell.value) { excelCell.font.italic = true; } }, }).then(() => { workbook.xlsx.writeBuffer().then((buffer) => { saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'Companies.xlsx'); }); }); } } export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app'), );

<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.js"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

#gridContainer { height: 436px; }