Your search did not match any results.
Data Grid

Cell Customization

DataGrid allows you to modify cell style settings and custom paint cells in a PDF document.

Use the customizeCell function to customize the appearance settings of DataGrid cells in a PDF document. For example, you can change the text alignment and the background color of cells. The following function parameters are available:

  • gridCell
    Contains information about the source DataGrid cell.
  • pdfCell
    Contains settings applied to a cell in a PDF document.

In this demo, the customizeCell function changes the following elements:

  • Background color and font weight of group row cells
  • Font style of a footer cell

The customDrawCell function allows you to draw cells in a PDF document. The following parameters are available when you use this function:

  • doc
    An instance of the jsPDFDocument object.
  • rect
    A cell’s bounds.
  • gridCell
    Contains information about the source DataGrid cell.
  • pdfCell
    Contains settings applied to a cell in a PDF document.
  • cancel
    Set this parameter to true to prevent default painting logic.

This demo uses the customDrawCell function to paint cells in the "Website" column.

Backend API
Copy to CodeSandBox
Apply
Reset
import React from 'react'; import DataGrid, { Column, Summary, GroupPanel, Grouping, SortByGroupSummaryInfo, TotalItem, Export, } from 'devextreme-react/data-grid'; import { jsPDF } from 'jspdf'; import { exportDataGrid } from 'devextreme/pdf_exporter'; import { companies } from './data.js'; const exportFormats = ['pdf']; export default function App() { const onExporting = React.useCallback((e) => { // eslint-disable-next-line new-cap const doc = new jsPDF(); exportDataGrid({ jsPDFDocument: doc, component: e.component, columnWidths: [40, 40, 30, 30, 40], customizeCell({ gridCell, pdfCell }) { if (gridCell.rowType === 'data' && gridCell.column.dataField === 'Phone') { pdfCell.text = pdfCell.text.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3'); } else if (gridCell.rowType === 'group') { pdfCell.backgroundColor = '#BEDFE6'; } else if (gridCell.rowType === 'totalFooter') { pdfCell.font.style = 'italic'; } }, customDrawCell(options) { const { gridCell, pdfCell } = options; if (gridCell.rowType === 'data' && gridCell.column.dataField === 'Website') { options.cancel = true; doc.setFontSize(11); doc.setTextColor('#0000FF'); const textHeight = doc.getTextDimensions(pdfCell.text).h; doc.textWithLink('website', options.rect.x + pdfCell.padding.left, options.rect.y + options.rect.h / 2 + textHeight / 2, { url: pdfCell.text }); } }, }).then(() => { doc.save('Companies.pdf'); }); }); const renderGridCell = React.useCallback((data) => ( <a href={ data.text } target='_blank' rel='noopener noreferrer'>Website</a> ), []); const phoneNumberFormat = React.useCallback((value) => { const USNumber = value.match(/(\d{3})(\d{3})(\d{4})/); return `(${USNumber[1]}) ${USNumber[2]}-${USNumber[3]}`; }, []); return ( <div> <DataGrid id="gridContainer" dataSource={companies} keyExpr="ID" showBorders={true} onExporting={onExporting}> <Export enabled={true} formats={exportFormats} /> <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={(e) => phoneNumberFormat(e)} /> <Column dataField="Website" caption="" alignment="center" width={100} cellRender={(e) => renderGridCell(e)} /> <Summary> <TotalItem column="Name" summaryType="count" displayFormat="Total count: {0}" /> </Summary> </DataGrid> </div> ); }
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/22.1.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.4/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/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; }
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.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', }];
window.config = { transpiler: 'plugin-babel', meta: { 'devextreme/localization.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, defaultExtension: 'js', map: { 'react': 'npm:react@17.0.2/umd/react.development.js', 'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.8.1/prop-types.js', 'fflate': 'npm:fflate@0.4.8/esm/browser.js', 'jspdf': 'npm:jspdf@2.5.1/dist/jspdf.umd.min.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@22.1.4/cjs', 'devextreme-react': 'npm:devextreme-react@22.1.4', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.5.16/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.63/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.32/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.7', 'inferno': 'npm:inferno@7.4.4/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.11/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.11/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.11/dist/inferno-extras.min.js', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', }, packages: { 'devextreme': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.7/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, react: true, }, }; System.config(window.config);