Hello Friends,

Welcome To Infinitbility!

This article based on export excel in React, here you will get example of how to export excel in react.

We are going to use react-data-export library to manage export excel task.

Many dev’s install and stuck on react-export-excel package. Please don’t waste time in this package it just forked of react-data-export there are no support option.

Let’s start today article How to export excel in react

For excel exporting feature, we have to install below packages

  1. xlsx - https://www.npmjs.com/package/xlsx
  2. react-data-export - https://github.com/securedeveloper/react-data-export

Installation

Open your terminal and put below command on your project directory.

Install xlsx

npm install xlsx

Install react-data-export

npm install react-data-export --save

Usages

Below example have example of custom export or download data button, custom column value, custom excel filename, and custom excel sheet name.

ExportExcelExample.js


import React from "react";
import ReactExport from "react-data-export";

const ExcelFile = ReactExport.ExcelFile;
const ExcelSheet = ReactExport.ExcelFile.ExcelSheet;
const ExcelColumn = ReactExport.ExcelFile.ExcelColumn;

const Employees = [
    {
        name: "Johson",
        amount: 30000,
        sex: 'M',
        is_married: true
    },
    {
        name: "Monika",
        amount: 355000,
        sex: 'F',
        is_married: false
    },
    {
        name: "John",
        amount: 250000,
        sex: 'M',
        is_married: false
    },
    {
        name: "Josef",
        amount: 450500,
        sex: 'M',
        is_married: true
    }
];

class Download extends React.Component {
    render() {
        return (
            <ExcelFile filename={"ExcelExportExample"} element={<button>Download Data</button>}>
                <ExcelSheet data={Employees} name="Employees">
                    <ExcelColumn label="Name" value="name"/>
                    <ExcelColumn label="Wallet Money" value="amount"/>
                    <ExcelColumn label="Gender" value="sex"/>
                    <ExcelColumn label="Marital Status" value={(col) => col.is_married ? "Married" : "Single"}/>
                </ExcelSheet>
            </ExcelFile>
        );
    }
}

Thanks for reading…