Excel Export Overview

The Excel Export component allows you to export data to Excel file.

Basic Usage

The following example demonstrates the Excel Export component in action.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import {
    ExcelExport,
    ExcelExportColumn,
    ExcelExportColumnGroup
} from '@progress/kendo-react-excel-export';
import { aggregateBy, 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;
const total = aggregateBy(products, aggregates);

const CustomGroupHeader = (props) => (`Discontinued: ${props.value}`);

const CustomGroupFooter = (props) => (`SUM: \$ ${(props.aggregates.UnitPrice.sum).toFixed(2)}`);

const CustomFooter = (props) =>
    (`Total ${props.column.title}: \$ ${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}
                    group={group}
                    fileName="Products.xlsx"
                    ref={(exporter) => { this._exporter = exporter; }}
                >
                    <ExcelExportColumn field="ProductID" title="Product ID" locked={true} width={200} />
                    <ExcelExportColumn field="ProductName" title="Product Name" width={350} />
                    <ExcelExportColumnGroup title="Availability" headerCellOptions={{ textAlign: 'center' }}>
                        <ExcelExportColumn
                            field="UnitPrice"
                            title="Price"
                            cellOptions={{ format: '$#,##0.00' }}
                            width={150}
                            footerCellOptions={{ wrap: true, textAlign: 'center' }}
                            groupFooterCellOptions={{ textAlign: 'right' }}
                            groupFooter={CustomGroupFooter}
                            footer={CustomFooter}
                        />
                        <ExcelExportColumn field="UnitsOnOrder" title="Units on Order" />
                        <ExcelExportColumn field="UnitsInStock" title="Units in Stock" />
                    </ExcelExportColumnGroup>
                    <ExcelExportColumn
                        field="Discontinued"
                        title="Discontinued"
                        hidden={true}
                        groupHeader={CustomGroupHeader}
                    />
                </ExcelExport>
            </div>
        );
    }
}

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

Installation

  1. Download and install the package:

    npm install --save @progress/kendo-react-excel-export
  2. Once installed, import the package module.

    // ES2015 module syntax
    import { ExcelExport } from '@progress/kendo-react-excel-export';
    // CommonJS format
    const { ExcelExport } = require('@progress/kendo-react-excel-export');

Dependencies

The Excel Export package requires the following peer dependencies that have to be installed by your application:

  • react 16.8.2*
  • react-dom

The following dependencies will be installed automatically:

  • @progress/kendo-ooxml
  • @progress/kendo-file-saver

Functionality and Features

Known Limitations

  • Older browsers, such as Internet Explorer 9 and Safari, require you to implement a server proxy. For more information, refer to the section on the proxyUrl configuration.
  • The maximum size of the exported file has a system-specific limit. For large data sets, it is highly recommended that you use a server-side solution.
 /