Vue Common - Object Structures - ExcelExportDataGridProps

Properties that can be passed to the exportDataGrid(options) method from the excelExporter module.

import { DataGridExport_Options } from "devextreme/common/export/excel"
Type:

Object

autoFilterEnabled

Specifies whether to enable Excel filtering in the document.

Type:

Boolean

Default Value: false

component

A DataGrid instance. This setting is required.

Type:

DataGrid

| undefined
Default Value: undefined

customizeCell

Customizes an Excel cell after creation.

Type:

Function

Function parameters:
options:

Object

An object passed to this callback function.

Object structure:
Name Type Description
excelCell

Object

An DevExtreme ExcelJS object that describes an Excel cell. Use the object's properties to customize the cell. For information on these properties, refer to the following DevExtreme ExcelJS documentation sections:
gridCell

ExcelDataGridCell

A DataGrid cell.

The following code illustrates how to customize font and alignment in cells whose rowType equals "data":

jQuery
JavaScript
HTML
$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        export: {
            enabled: true
        },
        onExporting(e) {
            const workbook = new ExcelJS.Workbook();
            const worksheet = workbook.addWorksheet('Companies');

            DevExpress.excelExporter.exportDataGrid({
                component: e.component,
                worksheet: worksheet,
                topLeftCell: { row: 2, column: 2 },
                customizeCell: function(options) {
                    var { gridCell, excelCell } = options;

                    if(gridCell.rowType === 'data') {
                        excelCell.font = { color: { argb: 'FF0000FF' }, underline: true };
                        excelCell.alignment = { horizontal: 'left' };
                    }
                }
            }).then(function() {
                workbook.xlsx.writeBuffer().then(function(buffer) {
                    saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Companies.xlsx");
                });
            });
        }
    });
});
<head>
    <!-- ... -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.0/polyfill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/devextreme-exceljs-fork@4.4.1/dist/dx-exceljs-fork.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
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 'devextreme-exceljs-fork';
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('Companies');

        exportDataGrid({
            component: e.component,
            worksheet: worksheet,
            topLeftCell: { row: 2, column: 2 },
            customizeCell: function(options) {
                const { gridCell, excelCell } = options;

                if(gridCell.rowType === 'data') {
                    excelCell.font = { color: { argb: 'FF0000FF' }, underline: true };
                    excelCell.alignment = { horizontal: 'left' };
                }
            }
        }).then(function() {
            workbook.xlsx.writeBuffer().then(function(buffer: BlobPart) {
                saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Companies.xlsx");
            });
        });
    }
}
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 'devextreme-exceljs-fork';
import saveAs from 'file-saver';

export default {
    components: {
        DxDataGrid,
        DxExport
    },
    methods: {
        onExporting(e) {
            const workbook = new Workbook();
            const worksheet = workbook.addWorksheet('Companies');

            exportDataGrid({
                component: e.component,
                worksheet: worksheet,
                topLeftCell: { row: 2, column: 2 },
                customizeCell: function(options) {
                    const { gridCell, excelCell } = options;

                    if(gridCell.rowType === 'data') {
                        excelCell.font = { color: { argb: 'FF0000FF' }, underline: true };
                        excelCell.alignment = { horizontal: 'left' };
                    }
                }
            }).then(function() {
                workbook.xlsx.writeBuffer().then(function(buffer) {
                    saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Companies.xlsx");
                });
            });
        }
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import DataGrid, { Export } from 'devextreme-react/data-grid';
import { Workbook } from 'devextreme-exceljs-fork';
import saveAs from 'file-saver';
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('Companies');

        exportDataGrid({
            component: e.component,
            worksheet: worksheet,
            topLeftCell: { row: 2, column: 2 },
            customizeCell: function(options) {
                const { gridCell, excelCell } = options;

                if(gridCell.rowType === 'data') {
                    excelCell.font = { color: { argb: 'FF0000FF' }, underline: true };
                    excelCell.alignment = { horizontal: 'left' };
                }
            }
        }).then(function() {
            workbook.xlsx.writeBuffer().then(function(buffer) {
                saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Companies.xlsx");
            });
        });
    }
}
export default App;

Cell Customization Demo Header and Footer Demo

View on GitHub

encodeExecutableContent

Specifies if the CSV export routine saves potentially dangerous content as plain text data.

Type:

Boolean

Default Value: false

Exported spreadsheet documents can be unsafe because executable content (such as formulas) may include malicious code. A spreadsheet application can execute this code if a user opens such a file and confirms that the application can load and execute dynamic content.

Enable this property to ensure that exported CSV files are safe for loading in third-party spreadsheet applications.

keepColumnWidths

Specifies whether Excel columns should have the same width as their source UI component's columns.

Type:

Boolean

Default Value: true

loadPanel

Configures the load panel.

Type:

Object

selectedRowsOnly

Specifies whether to export only selected rows.

Type:

Boolean

Default Value: false

topLeftCell

A cell used as a start position for export.

Type:

Object

|

String

Default Value: { row: 1, column: 1 }

The cell is specified using coordinates in the Excel document. For example, the following code specifies cell B2:

DevExpress.excelExporter.exportDataGrid({
    // ...  
    topLeftCell: { row: 2, column: 2 } 
});

You can also specify the topLeftCell using the Excel notation:

DevExpress.excelExporter.exportDataGrid({
    // ...  
    topLeftCell: "B2" 
});

View Demo

worksheet

An Excel worksheet to which the grid should be exported.

Type:

Object

| undefined
Default Value: undefined

A worksheet is a part of a workbook. Refer to the DevExtreme ExcelJS documentation for information on how to create a workbook and add a worksheet to it.