Cells

The Excel Export component supports options for customizing the cells that will be exported to Excel.

You can specify the options for the following types of cells:

Header Padding Cells

The header padding cells are the cells that are inserted before the header cells to align the headers and the column values when the data is grouped. To specify custom options, set the headerPaddingCellOptions property of the ExcelExport component.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ExcelExport, ExcelExportColumn } from '@progress/kendo-react-excel-export';
import { process } from '@progress/kendo-data-query';
import products from './products.json';

const group = [ {
    field: 'Category.CategoryName'
} ];

const data = process(products, {
    group: group
}).data;

class App extends React.Component {
    _exporter;
    export = () => {
        this._exporter.save();
    }
    render() {
        return (
            <div>
                <button className="k-button" onClick={this.export}>Export to Excel</button>

                <ExcelExport
                    data={data}
                    group={group}
                    fileName="Products.xlsx"
                    headerPaddingCellOptions={{ background: '#ff0000' }}
                    ref={(exporter) => { this._exporter = exporter; }}
                >
                    <ExcelExportColumn field="ProductID" title="Product ID" />
                    <ExcelExportColumn field="ProductName" title="Product Name" width={350}/>
                    <ExcelExportColumn field="Category.CategoryName" title="Category" hidden={true}/>
                </ExcelExport>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Padding Cells

The padding cells are the cells that are inserted before the data, group, and footer cells to indicate the group hierarchy if the data is grouped. To specify custom options, set the paddingCellOptions property of the ExcelExport component.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ExcelExport, ExcelExportColumn } from '@progress/kendo-react-excel-export';
import { process } from '@progress/kendo-data-query';
import products from './products.json';

const group = [ {
    field: 'Category.CategoryName'
} ];

const data = process(products, {
    group: group
}).data;

class App extends React.Component {
    _exporter;
    export = () => {
        this._exporter.save();
    }
    render() {
        return (
            <div>
                <button className="k-button" onClick={this.export}>Export to Excel</button>

                <ExcelExport
                    data={data}
                    group={group}
                    fileName="Products.xlsx"
                    paddingCellOptions={{ background: '#ff0000' }}
                    ref={(exporter) => { this._exporter = exporter; }}
                >
                    <ExcelExportColumn field="ProductID" title="Product ID" />
                    <ExcelExportColumn field="ProductName" title="Product Name" width={350}/>
                    <ExcelExportColumn field="Category.CategoryName" title="Category" hidden={true}/>
                </ExcelExport>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Header Cells

To specify custom options for a column-header cell, set the headerCellOptions property of the ExcelExportColumn or ExcelExportColumnGroup component.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ExcelExport, ExcelExportColumn } from '@progress/kendo-react-excel-export';
import products from './products.json';

const data = products;

class App extends React.Component {
    _exporter;
    export = () => {
        this._exporter.save();
    }
    render() {
        return (
            <div>
                <button className="k-button" onClick={this.export}>Export to Excel</button>

                <ExcelExport
                    data={data}
                    fileName="Products.xlsx"
                    ref={(exporter) => { this._exporter = exporter; }}
                >
                    <ExcelExportColumn
                        field="ProductID"
                        title="Product ID"
                        headerCellOptions={{
                            background: '#ff0000',
                            textAlign: 'center'
                        }}
                     />
                    <ExcelExportColumn field="ProductName" title="Product Name" width={350}/>
                </ExcelExport>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Data Cells

To specify custom options for a column data cell, set the cellOptions property of the ExcelExportColumn component.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ExcelExport, ExcelExportColumn } from '@progress/kendo-react-excel-export';
import products from './products.json';

const data = products;

class App extends React.Component {
    _exporter;
    export = () => {
        this._exporter.save();
    }
    render() {
        return (
            <div>
                <button className="k-button" onClick={this.export}>Export to Excel</button>

                <ExcelExport
                    data={data}
                    fileName="Products.xlsx"
                    ref={(exporter) => { this._exporter = exporter; }}
                >
                    <ExcelExportColumn
                        field="ProductID"
                        title="Product ID"
                        cellOptions={{
                            background: '#ff0000',
                            textAlign: 'center'
                        }}
                     />
                    <ExcelExportColumn field="ProductName" title="Product Name" width={350}/>
                </ExcelExport>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Group Header Cells

To specify custom options for a group header cell of a column, set the groupHeaderCellOptions property of the ExcelExportColumn component.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ExcelExport, ExcelExportColumn } from '@progress/kendo-react-excel-export';
import { process } from '@progress/kendo-data-query';
import products from './products.json';

const group = [ {
    field: 'Category.CategoryName'
} ];

const data = process(products, {
    group: group
}).data;

class App extends React.Component {
    _exporter;
    export = () => {
        this._exporter.save();
    }
    render() {
        return (
            <div>
                <button className="k-button" onClick={this.export}>Export to Excel</button>

                <ExcelExport
                    data={data}
                    group={group}
                    fileName="Products.xlsx"
                    ref={(exporter) => { this._exporter = exporter; }}
                >
                    <ExcelExportColumn field="ProductID" title="Product ID" />
                    <ExcelExportColumn field="ProductName" title="Product Name" width={350}/>
                    <ExcelExportColumn
                        field="Category.CategoryName"
                        title="Category"
                        groupHeaderCellOptions={{
                            background: 'ff0000'
                        }}
                        hidden={true}
                    />
                </ExcelExport>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

To specify custom options for a group footer cell of a column, set the groupFooterCellOptions property of the ExcelExportColumn component.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ExcelExport, ExcelExportColumn, ExcelExportGroupFooter } from '@progress/kendo-react-excel-export';
import { process } from '@progress/kendo-data-query';
import products from './products.json';

const aggregates = [ { field: 'UnitPrice', aggregate: 'sum' } ];

const group = [ {
    field: 'Discontinued',
    aggregates: aggregates
} ];

const data = process(products, {
    group: group
}).data;

class CustomGroupFooter extends ExcelExportGroupFooter {
    render() {
        return (
            `Sum: ${this.props.aggregates.UnitPrice.sum.toFixed(2)}`
        );
    }
}

class App extends React.Component {
    _exporter;
    export = () => {
        this._exporter.save();
    }
    render() {
        return (
            <div>
                <button className="k-button" onClick={this.export}>Export to Excel</button>

                <ExcelExport
                    data={data}
                    group={group}
                    fileName="Products.xlsx"
                    ref={(exporter) => { this._exporter = exporter; }}
                >
                    <ExcelExportColumn field="ProductID" title="Product ID" />
                    <ExcelExportColumn field="ProductName" title="Product Name" />
                    <ExcelExportColumn
                        field="UnitPrice"
                        title="UnitPrice"
                        groupFooterCellOptions={{
                            background: 'ff0000'
                        }}
                        groupFooter={CustomGroupFooter}
                    />
                </ExcelExport>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

To specify custom options for a column footer cell, set the footerCellOptions property of the ExcelExportColumn component.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ExcelExport, ExcelExportColumn, ExcelExportFooter } from '@progress/kendo-react-excel-export';
import { aggregateBy } from '@progress/kendo-data-query';
import products from './products.json';

const aggregates = [ { field: 'UnitPrice', aggregate: 'sum' } ];

const data = products;

const total = aggregateBy(products, aggregates);

class CustomFooter extends ExcelExportFooter {
    render() {
        return (
            `Sum: ${total.UnitPrice.sum}`
        );
    }
}

class App extends React.Component {
    _exporter;
    export = () => {
        this._exporter.save();
    }
    render() {
        return (
            <div>
                <button className="k-button" onClick={this.export}>Export to Excel</button>

                <ExcelExport
                    data={data}
                    fileName="Products.xlsx"
                    ref={(exporter) => { this._exporter = exporter; }}
                >
                    <ExcelExportColumn field="ProductID" title="Product ID" />
                    <ExcelExportColumn field="ProductName" title="Product Name" />
                    <ExcelExportColumn
                        field="UnitPrice"
                        title="UnitPrice"
                        footerCellOptions={{
                            background: 'ff0000'
                        }}
                        footer={CustomFooter}
                    />
                </ExcelExport>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
 /