Navigate back to the homepage

How to export excel in react

Infinitbility
React
July 6th, 2021 · 1 min read
How to export excel in react

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}

Subscribe Our Newsletter You will get monthly free programming book

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]

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.

Subscribe Our Newsletter You will get monthly free programming book

Tutorials

React Native

Categories

More articles from Infinitbility

Sequelize where in and where not in array example

Sequelize where in and where not in array example

Sequelize where in and not in

July 5th, 2021 · 1 min read
React Native borderColor

React Native borderColor

borderColor in React Native

July 4th, 2021 · 1 min read
© 2020–2021 Infinitbility
Disclaimer
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]