Filtering

The Excel Export component enables you to filter the data in the columns of the exported Excel file.

To enable filtering, set the filterable property of the ExcelExport component to true.

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; }}
                    filterable={true}
                >
                    <ExcelExportColumn field="ProductID" title="Product ID" />
                    <ExcelExportColumn field="ProductName" title="Product Name" />
                </ExcelExport>
            </div>
        );
    }
}

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

In this article

 /