Workbook Customization

In some cases, the customization of all cells in a column might not be sufficient to achieve the results your project requires.

To customize a specific row or cell:

  1. Get the generated options through the workbookOptions method.
  2. Modify them according to your needs.
  3. Save the file by using the exporter save method.

The following example demonstrates how to set the color for alternating rows.

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.save(this._exporter);
    }
    save = (component) => {
        const options = component.workbookOptions();
        const rows = options.sheets[0].rows;

        let altIdx = 0;
        rows.forEach((row) => {
            if (row.type === 'data') {
                if (altIdx % 2 !== 0) {
                    row.cells.forEach((cell) => {
                        cell.background = '#aabbcc';
                    });
                }
                altIdx++;
            }
        });

        component.save(options);
    };
    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" />
                </ExcelExport>
            </div>
        );
    }
}

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