Box
Row
Map
Vue

export

Configures client-side exporting.

Type:

Object

A user can click the Export button to save an Excel file with the exported data. Data types, sorting, filtering, and grouping settings are maintained.

DevExtreme HTML5 JavaScript DataGrid Export Button

The following instructions show how to enable and configure client-side export:

  1. Reference the required libraries
    Reference or import the ExcelJS v3.3.1 or newer and FileSaver libraries. Export also requires the JSZip library. In a modular environment, this library is listed in package dependencies and is already added. If your app does not use modules, reference JSZip manually.

    jQuery
    HTML
    <head>
        <!-- ... -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.0/polyfill.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/3.3.1/exceljs.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
        <!-- reference the DevExtreme sources here -->
    </head>
    Angular
    app.component.ts
    app.module.ts
    import { Component } from '@angular/core';
    import ExcelJS from 'exceljs';
    import saveAs from 'file-saver';
    
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    })
    export class AppComponent {
        // ...
    }
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
    import { DxDataGridModule } from 'devextreme-angular';
    
    @NgModule({
        declarations: [
            AppComponent
        ],
        imports: [
            BrowserModule,
            DxDataGridModule
        ],
        providers: [ ],
        bootstrap: [AppComponent]
    })
    export class AppModule { }
    Vue
    App.vue
    <template>
        <!-- ... -->
    </template>
    <script>
    import 'devextreme/dist/css/dx.common.css';
    import 'devextreme/dist/css/dx.light.css';
    
    import { DxDataGrid, DxExport } from 'devextreme-vue/data-grid';
    import ExcelJS from 'exceljs';
    import saveAs from 'file-saver';
    
    export default {
        components: {
            DxDataGrid,
            DxExport
        },
        // ...
    }
    </script>
    React
    App.js
    import React from 'react';
    import 'devextreme/dist/css/dx.common.css';
    import 'devextreme/dist/css/dx.light.css';
    
    import DataGrid, { Export } from 'devextreme-react/data-grid';
    import ExcelJS from 'exceljs';
    import saveAs from 'file-saver';
    
    class App extends React.Component {
        // ...
    }
    export default App;
  2. Enable the export UI
    Set the export.enabled option to true. This option enables export for all columns. Set a column's allowExporting option to false to prevent it from being exported:

    jQuery
    JavaScript
    HTML
    $(function () {
        $("#dataGridContainer").dxDataGrid({
            export: {
                enabled: true
            },
            columns: [{ ...
                allowExporting: false
            }, 
                // ...
            ]
        });
    });
    <head>
        <!-- ... -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.0/polyfill.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/3.3.1/exceljs.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
        <!-- reference the DevExtreme sources here -->
    </head>
    Angular
    app.component.html
    app.component.ts
    app.module.ts
    <dx-data-grid ... >
        <dxo-export [enabled]="true"></dxo-export>
        <dxi-column ...
            [allowExporting]="false">
        </dxi-column>
    </dx-data-grid>
    import { Component } from '@angular/core';
    import ExcelJS from 'exceljs';
    import saveAs from 'file-saver';
    
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    })
    export class AppComponent {
        // ...
    }
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
    
    import { DxDataGridModule } from 'devextreme-angular';
    
    @NgModule({
        declarations: [
            AppComponent
        ],
        imports: [
            BrowserModule,
            DxDataGridModule
        ],
        providers: [ ],
        bootstrap: [AppComponent]
    })
    export class AppModule { }
    Vue
    App.vue
    <template>
        <DxDataGrid ... >
            <DxExport
                :enabled="true"
            />
            <DxColumn ... 
                :allow-exporting="false"
            />
        </DxDataGrid>
    </template>
    
    <script>
    import 'devextreme/dist/css/dx.common.css';
    import 'devextreme/dist/css/dx.light.css';
    
    import ExcelJS from 'exceljs';
    import saveAs from 'file-saver';
    
    import { DxDataGrid, 
        DxExport,
        DxColumn
    } from 'devextreme-vue/data-grid';
    
    export default {
        components: {
            DxDataGrid,
            DxExport,
            DxColumn
        }
    }
    </script>
    React
    App.js
    import React from 'react';
    import 'devextreme/dist/css/dx.common.css';
    import 'devextreme/dist/css/dx.light.css';
    
    import ExcelJS from 'exceljs';
    import saveAs from 'file-saver';
    
    import DataGrid, {
        Export,
        Column
    } from 'devextreme-react/data-grid';
    
    class App extends React.Component {
        render() {
            return (
                <DataGrid ... >
                    <Export enabled={true} />
                    <Column ...
                        allowExporting={false}
                    />
                </DataGrid>
            );
        }
    }
    export default App;
  3. Export the DataGrid
    Implement the onExporting handler and call the exportDataGrid(options) method in it. In the code below, this method exports the DataGrid as is, but you can use ExportDataGridProps to configure export settings, including cell customization. To save the Excel document, call the FileSaver's saveAs method. The e.cancel parameter disables the deprecated built-in export implementation with fewer capabilities.

    jQuery
    JavaScript
    HTML
    $('#gridContainer').dxDataGrid({
        export: {
            enabled: true
        },
        onExporting: function(e) { 
            var workbook = new ExcelJS.Workbook(); 
            var worksheet = workbook.addWorksheet('Main sheet'); 
            DevExpress.excelExporter.exportDataGrid({ 
                worksheet: worksheet, 
                component: e.component,
                customizeCell: function(options) {
                    var excelCell = options;
                    excelCell.font = { name: 'Arial', size: 12 };
                    excelCell.alignment = { horizontal: 'left' };
                } 
            }).then(function() {
                workbook.xlsx.writeBuffer().then(function(buffer) { 
                    saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx'); 
                }); 
            }); 
            e.cancel = true; 
        }
    });
    <head>
        <!-- ... -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.0/polyfill.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/3.3.1/exceljs.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
        <!-- reference the DevExtreme sources here -->
    </head>
    Angular
    app.component.html
    app.component.ts
    app.module.ts
    <dx-data-grid ...
        (onExporting)="onExporting($event)">
        <dxo-export [enabled]="true"></dxo-export>
    </dx-data-grid>
    import { Component } from '@angular/core';
    import { exportDataGrid } from 'devextreme/excel_exporter';
    import ExcelJS from 'exceljs';
    import saveAs from 'file-saver';
    
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    })
    export class AppComponent {
        onExporting(e) {
            const workbook = new ExcelJS.Workbook();    
            const worksheet = workbook.addWorksheet('Main sheet');
            exportDataGrid({
                component: e.component,
                worksheet: worksheet,
                customizeCell: function(options) {
                    const excelCell = options;
                    excelCell.font = { name: 'Arial', size: 12 };
                    excelCell.alignment = { horizontal: 'left' };
                } 
            }).then(function() {
                workbook.xlsx.writeBuffer()
                    .then(function(buffer) {
                        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx');
                    });
            });
            e.cancel = true; 
        }
    }
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
    import { DxDataGridModule } from 'devextreme-angular';
    
    @NgModule({
        declarations: [
            AppComponent
        ],
        imports: [
            BrowserModule,
            DxDataGridModule
        ],
        providers: [ ],
        bootstrap: [AppComponent]
    })
    export class AppModule { }
    Vue
    App.vue
    <template>
        <DxDataGrid ...
            @exporting="onExporting">
            <DxExport
                :enabled="true"
            />
        </DxDataGrid>
    </template>
    
    <script>
    import 'devextreme/dist/css/dx.common.css';
    import 'devextreme/dist/css/dx.light.css';
    
    import { DxDataGrid, DxExport } from 'devextreme-vue/data-grid';
    import { exportDataGrid } from 'devextreme/excel_exporter';
    import ExcelJS from 'exceljs';
    import saveAs from 'file-saver';
    
    export default {
        components: {
            DxDataGrid,
            DxExport
        },
        methods: {
            onExporting(e) {
                const workbook = new ExcelJS.Workbook();
                const worksheet = workbook.addWorksheet('Main sheet');
                exportDataGrid({
                    component: e.component,
                    worksheet: worksheet,
                    customizeCell: function(options) {
                        const excelCell = options;
                        excelCell.font = { name: 'Arial', size: 12 };
                        excelCell.alignment = { horizontal: 'left' };
                    } 
                }).then(function() {
                    workbook.xlsx.writeBuffer()
                        .then(function(buffer) {
                            saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx');
                        });
                });
                e.cancel = true;
            }
        }
    }
    </script>
    React
    App.js
    import React from 'react';
    import 'devextreme/dist/css/dx.common.css';
    import 'devextreme/dist/css/dx.light.css';
    
    import ExcelJS from 'exceljs';
    import saveAs from 'file-saver';
    import DataGrid, { Export } from 'devextreme-react/data-grid';
    import { exportDataGrid } from 'devextreme/excel_exporter';
    
    class App extends React.Component {
        render() {
            return (
                <DataGrid ...
                    onExporting={this.onExporting}>
                    <Export enabled={true} />
                </DataGrid>
            );
        }
        onExporting(e) {
            const workbook = new ExcelJS.Workbook();
            const worksheet = workbook.addWorksheet('Main sheet');
            exportDataGrid({
                component: e.component,
                worksheet: worksheet,
                customizeCell: function(options) {
                    const excelCell = options;
                    excelCell.font = { name: 'Arial', size: 12 };
                    excelCell.alignment = { horizontal: 'left' };
                } 
            }).then(function() {
                workbook.xlsx.writeBuffer()
                    .then(function(buffer) {
                        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx');
                    });
            });
            e.cancel = true;
        }
    }
    export default App;

The following restrictions apply when users export DataGrid:

  • Only XLSX files are supported.
  • Excel limits the number of grouping levels to 7, while in the DataGrid it is unlimited.
  • Only visible columns are exported. See the onExporting option description for a workaround.
  • Detail rows are not exported.
  • Group rows are always exported in an expanded state and the isExpanded option is ignored.
  • Modifications made in the cell and row templates are omitted.
  • Data mapping is ignored. Use calculated columns instead.

Overview Demo Export Images Demo Export Multiple Grids Demo

allowExportSelectedData

Allows users to export selected rows only.

Type:

Boolean

Default Value: false

When this option is set to true, a click on DevExtreme DataGrid HTML5 Toolbar Exporting invokes a menu that contains the "Export selected rows" command.

DevExtreme DataGrid Exporting Selected Rows

NOTE
This option cannot be enabled when custom server-side summaries are used.
See Also
  • export.texts.exportSelectedRows - customizes the text of the "Export selected rows" command.
  • selection.mode - enables selection in the widget.

customizeExcelCell Deprecated

Since v20.1, we recommend ExcelJS-based export which does not use this option.

Customizes an Excel cell after it is created.

Type:

Function

Function parameters:
options:

Object

Excel cell settings.

Object structure:
Name Type Description
backgroundColor

String

The cell background color specified as a "#RRGGBBAA" value.
R (red), G (green), B (blue), and A (alpha) are hexadecimal characters (0-9, A-F). A is optional.

component

DataGrid

The widget's instance.

fillPatternColor

String

The foreground color of the cell fill pattern specified as a "#RRGGBBAA" value.
R (red), G (green), B (blue), and A (alpha) are hexadecimal characters (0-9, A-F). A is optional.

fillPatternType 'darkDown' | 'darkGray' | 'darkGrid' | 'darkHorizontal' | 'darkTrellis' | 'darkUp' | 'darkVertical' | 'gray0625' | 'gray125' | 'lightDown' | 'lightGray' | 'lightGrid' | 'lightHorizontal' | 'lightTrellis' | 'lightUp' | 'lightVertical' | 'mediumGray' | 'none' | 'solid'

The cell fill pattern.

font

ExcelFont

The cell font.

gridCell

ExcelDataGridCell

A DataGrid cell that corresponds to the Excel cell.

horizontalAlignment 'center' | 'centerContinuous' | 'distributed' | 'fill' | 'general' | 'justify' | 'left' | 'right'

The horizontal cell alignment.

numberFormat

String

The format that specifies how the cell value is displayed.
Refer to the Review guidelines for customizing a number format article for more information.
Note that you should use &quot; instead of " to include a text entry. For example, the 0.0&quot; items&quot; format results in 5 exported as 5 items.

value

String

|

Number

|

Date

The cell value.

verticalAlignment 'bottom' | 'center' | 'distributed' | 'justify' | 'top'

The vertical cell alignment.

wrapTextEnabled

Boolean

Specifies whether the cell text should be line-wrapped.

The following table shows the available fill patterns:

Fill Pattern Result
"darkDown"
"darkGray"
"darkGrid"
"darkHorizontal"
"darkTrellis"
"darkUp"
"darkVertical"
"gray0625"
"gray125"
Fill Pattern Result
"lightDown"
"lightGray"
"lightGrid"
"lightHorizontal"
"lightTrellis"
"lightUp"
"lightVertical"
"mediumGray"
"solid"

enabled

Adds the Export button to the DataGrid's toolbar.

Type:

Boolean

Default Value: false

Refer to the export topic for information on how to configure export.

View Demo

excelFilterEnabled Deprecated

Since v20.1, we recommend ExcelJS-based export which does not use this option.

Specifies whether to enable Excel filtering for the exported data in the resulting XLSX file.

Type:

Boolean

Default Value: false

excelWrapTextEnabled Deprecated

Since v20.1, we recommend ExcelJS-based export which does not use this option.

Specifies whether to enable word wrapping for exported data in the resulting XLSX file.

Type:

Boolean

Default Value: undefined

When this option is not set, the value of the grid's wordWrapEnabled option is used.

fileName Deprecated

Since v20.1, we recommend ExcelJS-based export which does not use this option.

Specifies a default name for the file to which grid data is exported.

Type:

String

Default Value: 'DataGrid'

ignoreExcelErrors Deprecated

Since v20.1, we recommend ExcelJS-based export which does not use this option.

Specifies whether Excel should hide warnings if there are errors in the exported document.

Type:

Boolean

Default Value: true

proxyUrl Deprecated

IMPORTANT
Since v10, Safari browser supports API for saving files, and this option is no longer required.

Specifies the URL of the server-side proxy that streams the resulting file to the end user to enable exporting in the Safari browser.

Type:

String

Default Value: undefined

Generally, exporting is performed using client-side API in browsers. However, the Safari (integrated in Mac OS) browser does not implement an API for saving files. In this instance, the DataGrid widget can POST the content to a server-side proxy, which will stream the file back to the end user. To enable this functionality, set the export.proxyUrl option to the proxy, which will stream the file to the end user. When implementing the proxy, take the following information into account.

  • Your proxy will receive a POST request with the following parameters in the request body: fileName, contentType (the MIME type of the file) and base64 (the base-64 encoded file content).
  • The proxy should return the decoded file with the "Content-Disposition" header set to attachment; filename="".

texts

Configures the texts of export commands, buttons, and hints.

Type:

Object