Navigate back to the homepage

How to export excel in react

Infinitbility
React
July 6th, 2021 · 1 min read

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

1npm install xlsx

Install react-data-export

1npm 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

1import React from "react";
2import ReactExport from "react-data-export";
3
4const ExcelFile = ReactExport.ExcelFile;
5const ExcelSheet = ReactExport.ExcelFile.ExcelSheet;
6const ExcelColumn = ReactExport.ExcelFile.ExcelColumn;
7
8const Employees = [
9 {
10 name: "Johson",
11 amount: 30000,
12 sex: 'M',
13 is_married: true
14 },
15 {
16 name: "Monika",
17 amount: 355000,
18 sex: 'F',
19 is_married: false
20 },
21 {
22 name: "John",
23 amount: 250000,
24 sex: 'M',
25 is_married: false
26 },
27 {
28 name: "Josef",
29 amount: 450500,
30 sex: 'M',
31 is_married: true
32 }
33];
34
35class Download extends React.Component {
36 render() {
37 return (
38 <ExcelFile filename={"ExcelExportExample"} element={<button>Download Data</button>}>
39 <ExcelSheet data={Employees} name="Employees">
40 <ExcelColumn label="Name" value="name"/>
41 <ExcelColumn label="Wallet Money" value="amount"/>
42 <ExcelColumn label="Gender" value="sex"/>
43 <ExcelColumn label="Marital Status" value={(col) => col.is_married ? "Married" : "Single"}/>
44 </ExcelSheet>
45 </ExcelFile>
46 );
47 }
48}

Thanks for reading…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

Sequelize where in and where not in array example

Sequelize where in and not in

July 5th, 2021 · 1 min read

React Native borderColor

borderColor in React Native

July 4th, 2021 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]