jQuery/JS Common - Object Structures - ExcelExportPivotGridProps

An 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 ExcelJS documentation sections:

pivotCell

ExcelPivotGridCell

A PivotGrid cell.

In the following code, the customizeCell function customizes font and alignment in cells that display regular summaries (whose rowType is "D"):

jQuery

JavaScript

HTML

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

            DevExpress.excelExporter.exportPivotGrid({
                component: e.component,
                worksheet: worksheet,
                topLeftCell: { row: 2, column: 2 },
                customizeCell: function(options) {
                    const { pivotCell, excelCell } = options;

                    if(pivotCell.rowType === 'D') {
                        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://cdnjs.cloudflare.com/ajax/libs/exceljs/4.4.0/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

app.component.html

app.component.ts

app.module.ts

<dx-pivot-grid ...
    (onExporting)="onExporting($event)">
    <dxo-export [enabled]="true"></dxo-export>
</dx-pivot-grid>

import { Component } from '@angular/core';
import { exportPivotGrid } 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('Companies');

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

                if(pivotCell.rowType === 'D') {
                    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 { DxPivotGridModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxPivotGridModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

App.vue

<template>
    <DxPivotGrid ...
        @exporting="onExporting">
        <DxExport
            :enabled="true"
        />
    </DxPivotGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxPivotGrid, DxExport } from 'devextreme-vue/pivot-grid';
import { exportPivotGrid } from 'devextreme/excel_exporter';
import { Workbook } from 'exceljs';
import saveAs from 'file-saver';

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

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

                    if(pivotCell.rowType === 'D') {
                        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 PivotGrid, { Export } from 'devextreme-react/pivot-grid';
import { Workbook } from 'exceljs';
import saveAs from 'file-saver';
import { exportPivotGrid } from 'devextreme/excel_exporter';

export default function App() {
    return (
        <PivotGrid ...
            onExporting={onExporting}>
            <Export enabled={true} />
        </PivotGrid>
    );

}

function onExporting(e) {
    const workbook = new Workbook();
    const worksheet = workbook.addWorksheet('Companies');

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

            if(pivotCell.rowType === 'D') {
                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");
        });
    });
}

encodeExecutableContent

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

Type:

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.

exportColumnFieldHeaders

Specifies whether to export headers of the column fields on the field panel.

Type:

Default Value: false

exportDataFieldHeaders

Specifies whether to export headers of the data fields on the field panel.

Type:

Default Value: false

exportFilterFieldHeaders

Specifies whether to export headers of the filter fields on the field panel.

Type:

Default Value: false

exportRowFieldHeaders

Specifies whether to export headers of the row fields on the field panel.

Type:

Default Value: false

keepColumnWidths

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

Type:

Default Value: true

loadPanel

Configures the load panel.

Type:

mergeColumnFieldValues

Specifies whether to merge neighbouring cells in the column field if they have the same values.

Type:

Default Value: true

The following image shows the exported pivot grid if you set this property to true or leave it unspecified:

DevExtreme PivotGrid: mergeColumnFieldValues set to true

In the image below, the mergeColumnFieldValues property is set to false:

DevExtreme PivotGrid: mergeColumnFieldValues set to false

mergeRowFieldValues

Specifies whether to merge neighbouring cells in the row field if they have the same values.

Type:

Default Value: true

The following image shows exported pivot grid if you set this property to true or leave it unspecified:

DevExtreme PivotGrid: mergeRowFieldValues set to true

In the image below, the mergeRowFieldValues property is set to false:

DevExtreme PivotGrid: mergeRowFieldValues set to false

topLeftCell

A cell used as a start position for export.

Type:

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.exportPivotGrid({
    // ...  
    topLeftCell: { row: 2, column: 2 } 
});

You can also specify the topLeftCell using the Excel notation:

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

worksheet

An Excel worksheet to which the grid should be exported.

Type: