Columns

The Excel Export component supports options for customization of the columns that will be exported to Excel.

You can specify the following column options:

Hidden State

To hide a particular column from the exported file, use the hidden column configuration.

To hide a particular columns from the exported file, you can also use conditional rendering.

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" hidden={true} />
                </ExcelExport>
            </div>
        );
    }
}

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

Locked State

The Excel Export enables you to lock columns by using the locked property of the columns. As a result, you can display specific columns at all times while the user scrolls the Excel file.

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;
const fields = Object.keys(data[0]);

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; }}
                >
                    {fields.map((field) =>
                        (<ExcelExportColumn field={field} locked={field === 'ProductID'} width={200} />)
                    )}
                </ExcelExport>
            </div>
        );
    }
}

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

Templates

The Excel Export supports templates that you can use for customizing the group and footer elements.

The templates must return text content. HTML elements cannot be converted to Excel column values.

Group Header Template

You can use the group header template to customize the header rows of the groups. To use a custom template set the groupHeader property to a Function or a React Component extending ExcelExportHeaderGroup.

The following additional fields are passed as props to the component, or through arguments to the function:

  • group—The current group item.
  • field—The name of the field by which data is grouped.
  • value—The current group value.
  • aggregates—All aggregate values for the current group.

If a template is not specified, the group header content is set to " { title / field }: { value }".

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ExcelExport, ExcelExportColumn, ExcelExportGroupHeader } 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 CustomGroupHeader extends ExcelExportGroupHeader {
    render() {
        return (
            `Category: ${this.props.value}`
        );
    }
}
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"
                        hidden={true}
                        groupHeader={CustomGroupHeader}
                    />
                </ExcelExport>
            </div>
        );
    }
}

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

You can use the group footer template to customize the footer rows of the groups. To use a custom template set the groupFooter property to a Function or a React Component extending ExcelExportFooterGroup.

The following additional fields are passed as props to the component, or through arguments to the function:

  • column—Defines an object of type ExcelExportColumnProps.
  • field—The current column field name.
  • group—The current group data item.
  • aggregates—All aggregate values for the current group.

If a template is not specified for any of the columns, the exported Excel file will not render a group footer row.

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="Unit Price"
                        groupFooter={CustomGroupFooter}
                    />
                </ExcelExport>
            </div>
        );
    }
}

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

You can use the footer template to customize the column footer. To use a custom template set the footer property to a Function or a React Component extending ExcelExportFooter.

The following additional fields are passed as props to the component, or through arguments to the function:

If a template is not specified for any of the columns, the exported Excel file will not render a footer row.

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="Unit Price"
                        footer={CustomFooter}
                    />
                </ExcelExport>
            </div>
        );
    }
}

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

Multi-Column Headers

The Excel Export supports multi-column headers by using column groups, which are defined declaratively by using the ExcelExportColumnGroup components, that incorporate inner column structures.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ExcelExport, ExcelExportColumn, ExcelExportColumnGroup } 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" />
                    <ExcelExportColumn field="ProductName" title="Product Name" />
                    <ExcelExportColumnGroup
                        title="Availability"
                        headerCellOptions={{ textAlign: 'center' }}
                    >
                        <ExcelExportColumn field="UnitPrice" title="Unit Price"/>
                        <ExcelExportColumn field="UnitsOnOrder" title="Units On Order"/>
                        <ExcelExportColumn field="UnitsInStock" title="Units In Stock"/>
                    </ExcelExportColumnGroup>
                </ExcelExport>
            </div>
        );
    }
}

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