How To Generate Excel File Using React JS

In this article, we will learn how to generate Excel file using kendo-react in react-js.

− First of all, we have to create a react application.

− Install kendo-react-excel-export package.

• npm install @progress/kendo-react-excel-export @progress/kendo-licensing

− Install the Default theme package.

• npm install –save @progress/kendo-theme-default

− Import the CSS file from the package in src/App.js.

• import ‘@progress/kendo-theme-default/dist/all.css’;

Using the Component:

• Create a ref to the component that will later be used for the export

const _export = React.useRef(null);

• Create functions that will handle the excel export.

const excelExport = () => {
    if (_export.current !== null) {
      _export.current.save();
    }
  };

− Now open your app.js file and add the code given below :

import * as React from 'react';
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;

export const App = () => {
    const _export = React.useRef(null);

    const excelExport = () => {
        if (_export.current !== null) {
            _export.current.save();
        }
    };

    return (
        <div className='example'>
            <ExcelExport data={data} ref={_export}>
                <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 Excel" className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" onClick={excelExport}>
                        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>
    )
};

− My product.json file data is here:

[{
    "ProductID" : 1,
    "ProductName" : "Chai",
    "SupplierID" : 1,
    "CategoryID" : 1,
    "QuantityPerUnit" : "10 boxes x 20 bags",
    "UnitPrice" : 18.0000,
    "UnitsInStock" : 39,
    "UnitsOnOrder" : 0,
    "ReorderLevel" : 10,
    "Discontinued" : false,
    "Category" : {
        "CategoryID" : 1,
        "CategoryName" : "Beverages",
        "Description" : "Soft drinks, coffees, teas, beers, and ales"
    }
}, {
    "ProductID" : 2,
    "ProductName" : "Chang",
    "SupplierID" : 1,
    "CategoryID" : 1,
    "QuantityPerUnit" : "24 - 12 oz bottles",
    "UnitPrice" : 19.0000,
    "UnitsInStock" : 17,
    "UnitsOnOrder" : 40,
    "ReorderLevel" : 25,
    "Discontinued" : false,
    "Category" : {
        "CategoryID" : 1,
        "CategoryName" : "Beverages",
        "Description" : "Soft drinks, coffees, teas, beers, and ales"
    }
}
]

Output: