Excel Export

The KendoReact Data Grid provides options for exporting its data to Excel.

Getting Started

To enable the Excel export:

  1. Install kendo-react-excel-export package.

    npm install @progress/kendo-react-excel-export
  2. Import the ExcelExport component in your React Application.

    import { ExcelExport } from '@progress/kendo-react-excel-export';
  3. Wrap the Grid in the ExcelExport component and use the ExcelExport save function to export the Grid and save it to excel file.

The following example demonstrates the basic implementation of the Excel export functionality of the Grid.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn, GridToolbar } from '@progress/kendo-react-grid';
import { ExcelExport } from '@progress/kendo-react-excel-export';

import products from './products.json';

class App extends React.Component {
    _export;
    export = () => {
        this._export.save();
    }
    render() {
        return (
            <ExcelExport
                data={products}
                ref={exporter => this._export = exporter}
            >
                <Grid data={products} style={{ height: '420px' }}>
                    <GridToolbar>
                        <button
                            title="Export PDF"
                            className="k-button k-primary"
                            onClick={this.export}
                        >
                            Export to Excel
                    </button>
                    </GridToolbar>
                    <GridColumn field="ProductID" title="Product ID" width="50px" />
                    <GridColumn field="ProductName" title="Product Name" width="350px" />
                    <GridColumn field="UnitPrice" title="Price" />
                    <GridColumn field="UnitsInStock" title="In stock" />
                    <GridColumn field="Discontinued" title="Discontinued" />
                </Grid>
            </ExcelExport>
        );
    }
}

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

Configuration

You can entirely control the Excel export configuration through the arguments that are passed to the save function of the KendoReact Excel Export component.

The ExcelExport enables you to:

Wrapping the Grid

If the Grid is passed as a child to the ExcelExport and its columns are defined declaratively by using the GridColumn components, they will be automatically detected. You still need to pass the data of the Grid to the save function or as a data property to the ExcelExport component.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn, GridToolbar } from '@progress/kendo-react-grid';
import { ExcelExport } from '@progress/kendo-react-excel-export';

import products from './products.json';

class App extends React.Component {
    _export;
    export = () => {
        this._export.save(products);
    }
    render() {
        return (
            <ExcelExport
                ref={exporter => this._export = exporter}
            >
                <Grid
                    style={{ height: '420px' }}
                    data={products}
                >
                    <GridToolbar>
                        <button
                            title="Export PDF"
                            className="k-button k-primary"
                            onClick={this.export}
                        >
                            Export to Excel
                        </button>
                    </GridToolbar>
                    <GridColumn field="ProductID" title="Product ID" width="50px" />
                    <GridColumn field="ProductName" title="Product Name" width="350px" />
                    <GridColumn field="UnitPrice" title="Price" />
                    <GridColumn field="UnitsInStock" title="In stock" />
                    <GridColumn field="Discontinued" title="Discontinued" />
                </Grid>
            </ExcelExport>
        );
    }
}

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

Passing the Grid Columns

The Grid exposes its columns through its columns field. To pass the Grid columns, pass its data and columns to the save function of the ExcelExport component.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn, GridToolbar } from '@progress/kendo-react-grid';
import { ExcelExport } from '@progress/kendo-react-excel-export';

import products from './products.json';

class App extends React.Component {
    _export;
    _grid;
    export = () => {
        this._export.save(products, this._grid.columns);
    }
    render() {
        return (
            <div>
                <ExcelExport ref={exporter => this._export = exporter} />
                <Grid
                    style={{ height: '420px' }}
                    data={products}
                    ref={(grid) => { this._grid = grid; }}
                >
                    <GridToolbar>
                        <button
                            title="Export PDF"
                            className="k-button k-primary"
                            onClick={this.export}
                        >
                            Export to Excel
                        </button>
                    </GridToolbar>
                    <GridColumn field="ProductID" title="Product ID" width="50px" />
                    <GridColumn field="ProductName" title="Product Name" width="350px" />
                    <GridColumn field="UnitPrice" title="Price" />
                    <GridColumn field="UnitsInStock" title="In stock" />
                    <GridColumn field="Discontinued" title="Discontinued" />
                </Grid>
            </div>
        );
    }
}

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

Exporting Specific Data

To export specific data, pass the data to the save function of the ExcelExport component. For example, if the Grid has its paging enabled but you need to export all pages, pass the unprocessed data to the save function.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn, GridToolbar } from '@progress/kendo-react-grid';
import { ExcelExport } from '@progress/kendo-react-excel-export';

import products from './products.json';

class App extends React.Component {
    _export;
    _grid;

    state = {
        data: products.slice(0, 6),
        total: products.length,
        skip: 0,
        pageSize: 6,
        pageable: {
            buttonCount: 5,
            info: true,
            type: 'numeric',
            pageSizes: true,
            previousNext: true
        }
    };

    pageChange = (event) => {
        this.setState(this.createState(event.page.skip, event.page.take));
    }

    createState = (skip, take) => ({
        data: products.slice(skip, skip + take),
        skip: skip,
        pageSize: take
    });

    updatePagerState = (key, value) => {
        const { pageable } = this.state;
        this.setState({
            pageable: {
                ...pageable,
                [key]: value
            }
        });
    }

    export = () => {
        // pass the products, instead the paginated data in the state.
        this._export.save(products, this._grid.columns);
    }

    render() {
        return (
            <div>
                <ExcelExport
                    ref={excelExport => this._export = excelExport}
                />
                <Grid
                    data={this.state.data}
                    onPageChange={this.pageChange}
                    total={this.state.total}
                    skip={this.state.skip}
                    pageable={this.state.pageable}
                    pageSize={this.state.pageSize}
                    ref={grid => this._grid = grid}
                >
                    <GridToolbar>
                        <button
                            title="Export PDF"
                            className="k-button k-primary"
                            onClick={this.export}
                        >
                            Export to Excel
                        </button>
                    </GridToolbar>
                    <GridColumn field="ProductID" title="Product ID" width="50px" />
                    <GridColumn field="ProductName" title="Product Name" width="350px" />
                    <GridColumn field="UnitPrice" title="Price" />
                    <GridColumn field="UnitsInStock" title="In stock" />
                    <GridColumn field="Discontinued" title="Discontinued" />
                </Grid>
            </div>
        );
    }
}

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

Customizing Exported Columns

You can use the same data as the Grid and customize the exported columns. To export columns that are different from the current Grid columns, include the ExcelExportColumn and ExcelExportColumnGroup components as children to the ExcelExport.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn, GridToolbar } from '@progress/kendo-react-grid';
import { ExcelExport, ExcelExportColumn, ExcelExportColumnGroup } from '@progress/kendo-react-excel-export';

import products from './products.json';

const data = products;

class App extends React.Component {
    _export;
    export = () => {
        this._export.save();
    }
    render() {
        return (
            <div>
                <ExcelExport
                    data={data}
                    ref={exporter => this._export = exporter}
                >
                    <ExcelExportColumn field="ProductID" title="Product ID" locked={true} width={50} />
                    <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' }}
                        />
                        <ExcelExportColumn field="UnitsOnOrder" title="Units on Order" />
                        <ExcelExportColumn field="UnitsInStock" title="Units in Stock" />
                    </ExcelExportColumnGroup>
                </ExcelExport>
                <Grid
                    style={{ height: '420px' }}
                    data={data}
                >
                    <GridToolbar>
                        <button
                            title="Export PDF"
                            className="k-button k-primary"
                            onClick={this.export}
                        >
                            Export to Excel
                        </button>
                    </GridToolbar>
                    <GridColumn field="ProductID" title="ID" width="50px" />
                    <GridColumn field="ProductName" title="Name" />
                    <GridColumn field="UnitPrice" title="Price" />
                    <GridColumn field="UnitsInStock" title="In stock" />
                    <GridColumn field="Discontinued" title="Discontinued" />
                </Grid>
            </div>
        );
    }
}

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

Known Limitations

  • During the export to Excel, the Grid does not use column formats. Column formats are incompatible with Excel. For more information, refer to the page on the Excel-supported formats.
  • The maximum size of the exported file to Excel has a system-specific limit. For large data sets, it is highly recommended that you use a server-side solution.
  • When you use the ExcelExport in older browsers, such as Internet Explorer 9 and Safari, you have to implement a server proxy. For more information, refer to the proxyUrl configuration of the ExcelExport component.
 /