Your search did not match any results.
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:

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.

Copy to CodeSandBox
Apply
Reset
<dx-data-grid id="gridContainer" [dataSource]="companies" [showBorders]="true" (onExporting)="onExporting($event)"> <dxo-group-panel [visible]="true"></dxo-group-panel> <dxo-grouping [autoExpandAll]="true"></dxo-grouping> <dxo-export [enabled]="true"></dxo-export> <dxi-sort-by-group-summary-info summaryItem="count"></dxi-sort-by-group-summary-info> <dxi-column dataField="Name" [width]="190"></dxi-column> <dxi-column dataField="Address" [width]="200"></dxi-column> <dxi-column dataField="City"></dxi-column> <dxi-column dataField="State" [groupIndex]="0"></dxi-column> <dxi-column dataField="Phone" [format]="phoneNumberFormat"></dxi-column> <dxi-column dataField="Website" caption="" alignment="center" [width]="100" cellTemplate="cellTemplate"></dxi-column> <div *dxTemplate="let cell of 'cellTemplate'"> <a href="{{ cell.text }}" target="_blank">Website</a> </div> <dxo-summary> <dxi-total-item column="Name" summaryType="count" displayFormat="Total count: {0} companies"></dxi-total-item> </dxo-summary> </dx-data-grid>
import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxDataGridModule } from 'devextreme-angular'; import { Service, Company } from './app.service'; import { exportDataGrid } from 'devextreme/excel_exporter'; import ExcelJS from 'exceljs'; import saveAs from 'file-saver'; /* // Use this import for codeSandBox import * as ExcelJS from "exceljs/dist/exceljs.min.js"; import * as FileSaver from "file-saver"; */ if(!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], providers: [Service] }) export class AppComponent { companies: Company[]; constructor(private service: Service) { this.companies = service.getCompanies(); } onExporting(e) { const workbook = new ExcelJS.Workbook(); const worksheet = workbook.addWorksheet('Companies'); // https://github.com/exceljs/exceljs#columns worksheet.columns = [ { width: 5 }, { width: 30 }, { width: 25 }, { width: 15 }, { width: 25 }, { width: 40 } ]; exportDataGrid({ component: e.component, worksheet: worksheet, keepColumnWidths: false, topLeftCell: { row: 2, column: 2 }, customizeCell: function(options) { const { gridCell, excelCell } = options; if(gridCell.rowType === "data") { if(gridCell.column.dataField === 'Phone') { excelCell.value = parseInt(gridCell.value); // https://github.com/exceljs/exceljs#number-formats excelCell.numFmt = '[<=9999999]###-####;(###) ###-####'; } if(gridCell.column.dataField === 'Website') { // https://github.com/exceljs/exceljs#hyperlink-value excelCell.value = { text: gridCell.value, hyperlink: gridCell.value }; // https://github.com/exceljs/exceljs#fonts excelCell.font = { color: { argb: 'FF0000FF' }, underline: true }; // https://github.com/exceljs/exceljs#alignment excelCell.alignment = { horizontal: 'left' }; } } if(gridCell.rowType === "group") { // https://github.com/exceljs/exceljs#fills excelCell.fill = { type: 'pattern', pattern:'solid', fgColor: { argb: "BEDFE6" } }; } if(gridCell.rowType === "totalFooter" && excelCell.value) { excelCell.font.italic = true; } } }).then(function() { workbook.xlsx.writeBuffer().then(function(buffer) { saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Companies.xlsx"); }); }); e.cancel = true; } phoneNumberFormat(value) { const USNumber = value.match(/(\d{3})(\d{3})(\d{4})/); return `(${ USNumber[1] }) ${ USNumber[2] }-${ USNumber[3] }`; } } @NgModule({ imports: [ BrowserModule, DxDataGridModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
#gridContainer { height: 436px; }
import { Injectable } from '@angular/core'; export class Company { ID: number; Name: string; Address: string; City: string; State: string; Zipcode: number; Phone: string; Fax: string; Website: string; } const companies: Company[] = [{ "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.com" }, { "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.com" }, { "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.com" }, { "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.com" }, { "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.com" }, { "ID": 6, "Name": "Walters", "Address": "200 Wilmot Rd", "City": "Deerfield", "State": "Illinois", "Zipcode": 60015, "Phone": "8479402500", "Fax": "(847) 940-2501", "Website": "http://nowebsitewalters.com" }, { "ID": 7, "Name": "StereoShack", "Address": "400 Commerce S", "City": "Fort Worth", "State": "Texas", "Zipcode": 76102, "Phone": "8178200741", "Fax": "(817) 820-0742", "Website": "http://nowebsiteshack.com" }, { "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.com" }, { "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.com" }, { "ID": 10, "Name": "ElectrixMax", "Address": "263 Shuman Blvd", "City": "Naperville", "State": "Illinois", "Zipcode": 60563, "Phone": "6304387800", "Fax": "(630) 438-7801", "Website": "http://nowebsiteelectrixmax.com" }, { "ID": 11, "Name": "Video Emporium", "Address": "1201 Elm Street", "City": "Dallas", "State": "Texas", "Zipcode": 75270, "Phone": "2148543000", "Fax": "(214) 854-3001", "Website": "http://nowebsitevideoemporium.com" }, { "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.com" }]; @Injectable() export class Service { getCompanies() { return companies; } }
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ System.config({ transpiler: 'ts', typescriptOptions: { module: "system", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" }, }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js', 'typescript': 'npm:typescript@3.4.5/lib/typescript.js', '@angular': 'npm:@angular', 'tslib': 'npm:tslib/tslib.js', 'rxjs': 'npm:rxjs', 'exceljs': 'npm:exceljs@1.7.0/dist/exceljs.js', 'file-saver': 'npm:file-saver@1.3.8/FileSaver.js', 'devextreme': 'npm:devextreme@20.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram@1.0.5', 'devexpress-gantt': 'npm:devexpress-gantt@1.0.3', 'devextreme-angular': 'npm:devextreme-angular@20.1' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, }, packageConfigPaths: [ "npm:*/package.json", "npm:@angular/*/package.json", "npm:@angular/common/*/package.json", "npm:rxjs/operators/package.json", "npm:devextreme-angular@20.1/*/package.json", "npm:devextreme-angular@20.1/ui/*/package.json", ] });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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/20.1.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.4/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.8.19/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import('app').catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>