React Data Grid - 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.

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!

TS JS

Backend API

import React from 'react'; import DataGrid, { Column, Export, Summary, GroupPanel, Grouping, SortByGroupSummaryInfo, TotalItem, DataGridTypes, } from 'devextreme-react/data-grid'; import { Workbook } from 'exceljs'; import { saveAs } from 'file-saver-es'; import { exportDataGrid } from 'devextreme/excel_exporter'; import { companies } from './data.ts'; const onExporting = (e: DataGridTypes.ExportingEvent) => { 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'); }); }); }; const renderGridCell = (data: DataGridTypes.ColumnCellTemplateData) => <a href={ data.text } target='_blank' rel='noopener noreferrer'>Website</a>; const phoneNumberFormat = (value) => { const USNumber = value.match(/(\d{3})(\d{3})(\d{4})/); return `(${USNumber[1]}) ${USNumber[2]}-${USNumber[3]}`; }; const App = () => ( <div> <DataGrid id="gridContainer" dataSource={companies} keyExpr="ID" width="100%" showBorders={true} onExporting={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={phoneNumberFormat} /> <Column dataField="Website" alignment="center" width={100} cellRender={renderGridCell} /> <Export enabled={true} /> <Summary> <TotalItem column="Name" summaryType="count" displayFormat="Total count: {0} companies" /> </Summary> </DataGrid> </div> ); export default App;

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'; import { exportDataGrid } from 'devextreme/excel_exporter'; import { companies } from './data.js'; const 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'); }); }); }; const renderGridCell = (data) => ( <a href={data.text} target="_blank" rel="noopener noreferrer" > Website </a> ); const phoneNumberFormat = (value) => { const USNumber = value.match(/(\d{3})(\d{3})(\d{4})/); return `(${USNumber[1]}) ${USNumber[2]}-${USNumber[3]}`; }; const App = () => ( <div> <DataGrid id="gridContainer" dataSource={companies} keyExpr="ID" width="100%" showBorders={true} onExporting={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={phoneNumberFormat} /> <Column dataField="Website" alignment="center" width={100} cellRender={renderGridCell} /> <Export enabled={true} /> <Summary> <TotalItem column="Name" summaryType="count" displayFormat="Total count: {0} companies" /> </Summary> </DataGrid> </div> ); export default App;

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

export const companies = [{ ID: 1, Name: 'Super Mart of the West', Address: '702 SW 8th Street', City: 'Bentonville', State: 'Arkansas', Zipcode: 72716, Phone: '8005552797', Fax: '(800) 555-2171', Website: 'http://nowebsitesupermart.dx', }, { ID: 2, Name: 'Electronics Depot', Address: '2455 Paces Ferry Road NW', City: 'Atlanta', State: 'Georgia', Zipcode: 30339, Phone: '8005953232', Fax: '(800) 595-3231', Website: 'http://nowebsitedepot.dx', }, { ID: 3, Name: 'K&S Music', Address: '1000 Nicllet Mall', City: 'Minneapolis', State: 'Minnesota', Zipcode: 55403, Phone: '6123046073', Fax: '(612) 304-6074', Website: 'http://nowebsitemusic.dx', }, { ID: 4, Name: 'Tom\'s Club', Address: '999 Lake Drive', City: 'Issaquah', State: 'Washington', Zipcode: 98027, Phone: '8009552292', Fax: '(800) 955-2293', Website: 'http://nowebsitetomsclub.dx', }, { ID: 5, Name: 'E-Mart', Address: '3333 Beverly Rd', City: 'Hoffman Estates', State: 'Illinois', Zipcode: 60179, Phone: '8472862500', Fax: '(847) 286-2501', Website: 'http://nowebsiteemart.dx', }, { ID: 6, Name: 'Walters', Address: '200 Wilmot Rd', City: 'Deerfield', State: 'Illinois', Zipcode: 60015, Phone: '8479402500', Fax: '(847) 940-2501', Website: 'http://nowebsitewalters.dx', }, { ID: 7, Name: 'StereoShack', Address: '400 Commerce S', City: 'Fort Worth', State: 'Texas', Zipcode: 76102, Phone: '8178200741', Fax: '(817) 820-0742', Website: 'http://nowebsiteshack.dx', }, { ID: 8, Name: 'Circuit Town', Address: '2200 Kensington Court', City: 'Oak Brook', State: 'Illinois', Zipcode: 60523, Phone: '8009552929', Fax: '(800) 955-9392', Website: 'http://nowebsitecircuittown.dx', }, { ID: 9, Name: 'Premier Buy', Address: '7601 Penn Avenue South', City: 'Richfield', State: 'Minnesota', Zipcode: 55423, Phone: '6122911000', Fax: '(612) 291-2001', Website: 'http://nowebsitepremierbuy.dx', }, { ID: 10, Name: 'ElectrixMax', Address: '263 Shuman Blvd', City: 'Naperville', State: 'Illinois', Zipcode: 60563, Phone: '6304387800', Fax: '(630) 438-7801', Website: 'http://nowebsiteelectrixmax.dx', }, { ID: 11, Name: 'Video Emporium', Address: '1201 Elm Street', City: 'Dallas', State: 'Texas', Zipcode: 75270, Phone: '2148543000', Fax: '(214) 854-3001', Website: 'http://nowebsitevideoemporium.dx', }, { ID: 12, Name: 'Screen Shop', Address: '1000 Lowes Blvd', City: 'Mooresville', State: 'North Carolina', Zipcode: 28117, Phone: '8004456937', Fax: '(800) 445-6938', Website: 'http://nowebsitescreenshop.dx', }];

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

export const companies = [ { ID: 1, Name: 'Super Mart of the West', Address: '702 SW 8th Street', City: 'Bentonville', State: 'Arkansas', Zipcode: 72716, Phone: '8005552797', Fax: '(800) 555-2171', Website: 'http://nowebsitesupermart.dx', }, { ID: 2, Name: 'Electronics Depot', Address: '2455 Paces Ferry Road NW', City: 'Atlanta', State: 'Georgia', Zipcode: 30339, Phone: '8005953232', Fax: '(800) 595-3231', Website: 'http://nowebsitedepot.dx', }, { ID: 3, Name: 'K&S Music', Address: '1000 Nicllet Mall', City: 'Minneapolis', State: 'Minnesota', Zipcode: 55403, Phone: '6123046073', Fax: '(612) 304-6074', Website: 'http://nowebsitemusic.dx', }, { ID: 4, Name: "Tom's Club", Address: '999 Lake Drive', City: 'Issaquah', State: 'Washington', Zipcode: 98027, Phone: '8009552292', Fax: '(800) 955-2293', Website: 'http://nowebsitetomsclub.dx', }, { ID: 5, Name: 'E-Mart', Address: '3333 Beverly Rd', City: 'Hoffman Estates', State: 'Illinois', Zipcode: 60179, Phone: '8472862500', Fax: '(847) 286-2501', Website: 'http://nowebsiteemart.dx', }, { ID: 6, Name: 'Walters', Address: '200 Wilmot Rd', City: 'Deerfield', State: 'Illinois', Zipcode: 60015, Phone: '8479402500', Fax: '(847) 940-2501', Website: 'http://nowebsitewalters.dx', }, { ID: 7, Name: 'StereoShack', Address: '400 Commerce S', City: 'Fort Worth', State: 'Texas', Zipcode: 76102, Phone: '8178200741', Fax: '(817) 820-0742', Website: 'http://nowebsiteshack.dx', }, { ID: 8, Name: 'Circuit Town', Address: '2200 Kensington Court', City: 'Oak Brook', State: 'Illinois', Zipcode: 60523, Phone: '8009552929', Fax: '(800) 955-9392', Website: 'http://nowebsitecircuittown.dx', }, { ID: 9, Name: 'Premier Buy', Address: '7601 Penn Avenue South', City: 'Richfield', State: 'Minnesota', Zipcode: 55423, Phone: '6122911000', Fax: '(612) 291-2001', Website: 'http://nowebsitepremierbuy.dx', }, { ID: 10, Name: 'ElectrixMax', Address: '263 Shuman Blvd', City: 'Naperville', State: 'Illinois', Zipcode: 60563, Phone: '6304387800', Fax: '(630) 438-7801', Website: 'http://nowebsiteelectrixmax.dx', }, { ID: 11, Name: 'Video Emporium', Address: '1201 Elm Street', City: 'Dallas', State: 'Texas', Zipcode: 75270, Phone: '2148543000', Fax: '(214) 854-3001', Website: 'http://nowebsitevideoemporium.dx', }, { ID: 12, Name: 'Screen Shop', Address: '1000 Lowes Blvd', City: 'Mooresville', State: 'North Carolina', Zipcode: 28117, Phone: '8004456937', Fax: '(800) 445-6938', Website: 'http://nowebsitescreenshop.dx', }, ];

<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.2.3/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.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

#gridContainer { height: 436px; }