Excel Export / Getting Started
material theme

Getting Started with KendoReact Excel Export

The KendoReact Excel Export feature allows you to export and save data to Excel files, to customize the output cells and columns, and to filter the data after the export.

The KendoReact Excel Export is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-excel-export package.

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')
);

Functionality and Features

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

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.
 /