<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/4.1.1/exceljs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.2/FileSaver.min.js"></script>
    <!-- reference the DevExtreme sources here -->
</head>

Angular

Installation command

tsconfig.app.json

npm install --save exceljs file-saver

{
    "compilerOptions": {
        // ...
        "paths": {
            // ...
            "exceljs": [
                "node_modules/exceljs/dist/exceljs.min.js"
            ]
        }
    }
}

Vue

npm install --save exceljs file-saver

React

npm install --save exceljs file-saver

Enable the export UI
Set the export.enabled property to true. This property enables export for all columns. Set a column's allowExporting property to false to prevent it from being exported:

jQuery

JavaScript

$(function () {
    $("#dataGridContainer").dxDataGrid({
        export: {
            enabled: true
        },
        columns: [{ ...
            allowExporting: false
        }, 
            // ...
        ]
    });
});

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';

@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.light.css';

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.light.css';

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;

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 ExcelExportDataGridProps to configure export settings, including cell customization. The DataGrid is exported to an Excel worksheet that is created using the ExcelJS API. 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

$('#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; 
    }
});

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 { Workbook } 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 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: BlobPart) {
                    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.light.css';

import { DxDataGrid, DxExport } from 'devextreme-vue/data-grid';
import { exportDataGrid } from 'devextreme/excel_exporter';
import { Workbook } from 'exceljs';
import saveAs from 'file-saver';

export default {
    components: {
        DxDataGrid,
        DxExport
    },
    methods: {
        onExporting(e) {
            const workbook = new 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.light.css';

import { Workbook } 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 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 out of the box. To export DataGrid to CSV, call the exportDataGrid(options) method as shown in the following ticket: Export PivotGrid into CSV file. Refer to the CSV Injection section to take the threat of a CSV Injection Attack into account.
Excel limits the number of grouping levels to 7, while in the DataGrid it is unlimited.
Only visible columns are exported. See the onExporting property description for a workaround.
Detail rows are not exported.
Group rows are always exported in an expanded state and the isExpanded property is ignored.
Customizations made in the cellTemplate, groupCellTemplate, headerCellTemplate, and rowTemplate are omitted, but you can recreate them in the exported file using the ExcelJS API. Use the customizeCell function to do this. View Demo
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 property 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

View Demo

NOTE

This property cannot be enabled when custom server-side summaries are used.

customizeExcelCell

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

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 UI component'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 `"` instead of `"` to include a text entry. For example, the `0.0" items"` 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

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

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

Type:

Boolean

Default Value: false

excelWrapTextEnabled

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

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

Type:

Boolean

Default Value: undefined

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

fileName

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

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

Type:

String

Default Value: 'DataGrid'

ignoreExcelErrors

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

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

Type:

Boolean

Default Value: true

proxyUrl

IMPORTANT

Since v10, Safari browser supports API for saving files, and this property 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 UI component 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 property 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

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

jQuery DataGrid - export

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

allowExportSelectedData

See Also

customizeExcelCell

enabled

excelFilterEnabled

excelWrapTextEnabled

fileName

ignoreExcelErrors

proxyUrl

texts