How to Export Data to Excel with React-js

How to Export Data to Excel with React-js

In this article, we will learn how to export data in Excel using ReactJS. In this demo, we will use react-html-table-to-excel library to export data in an Excel sheet.

In this article, we will learn how to export data in Excel using ReactJS. In this demo, we will use react-html-table-to-excel library to export data in an Excel sheet.

Prerequisites 

  • We should have basic knowledge of React.js and Web API.
  • Visual Studio and Visual Studio Code IDE should be installed on your system.
  • SQL Server Management Studio
  • Basic knowledge of Bootstrap and HTML

Create ReactJS project

Now, let's first create a React application with the following command.

npx create-react-app matform  

Open the newly created project in Visual Studio and install react-html-table-to-excel library using the following command.

npm install --save react-html-table-to-excel  

Now install Bootstrap by using the following commands.  

npm install --save bootstrap  

Now, open the index.js file and add import Bootstrap. 

import 'bootstrap/dist/css/bootstrap.min.css';   

Now Install the Axios library by using the following command. Learn more about Axios

npm install --save axios   

Now go to the src folder and add a new component, named 'ExportExcel.js'.

Now open ExportExcel.js component and import following reference.

import ReactHTMLTableToExcel from 'react-html-table-to-excel';  

Add the following code in this component.

import React, { Component } from 'react'  
import axios from 'axios';  
import ReactHTMLTableToExcel from 'react-html-table-to-excel';  
export class ExportExcel extends Component {  
        constructor(props) {  
                super(props)  
                this.state = {  
                        ProductData: []  

                }  
        }  
        componentDidMount() {  
                axios.get('http://localhost:51760/Api/Emp/employee').then(response => {  
                        console.log(response.data);  
                        this.setState({  
                                ProductData: response.data  
                        });  
                });  
        }  
        render() {  
                return (  
                        <div>  
                                <table id="emp" class="table">  
                                        <thead>  
                                                <tr>  
                                                        <th>Id</th>  
                                                        <th>Name</th>  
                                                        <th>Age</th>  
                                                        <th>Address</th>  
                                                        <th>City</th>  
                                                        <th>ContactNum</th>  
                                                        <th>Salary</th>  
                                                        <th>Department</th>  



                                                </tr>  
                                        </thead>  
                                        <tbody>              {  
                                                this.state.ProductData.map((p, index) => {  
                                                        return <tr key={index}>  
                                                                <td>  
                                                                        {p.Id}  
                                                                </td>  
                                                                <td >{p.Name}</td>  
                                                                <td >{p.Age}</td>  
                                                                <td >{p.Address}</td>  
                                                                <td >{p.City}</td>  
                                                                <td >{p.ContactNum}</td>  
                                                                <td >{p.Salary}</td>  
                                                                <td style={{ paddingRight: "114px" }} >{p.Department}</td>  
                                                        </tr>  
                                                })  
                                        }  

                                        </tbody>  

                                </table>  
                                <div>  
                                        <ReactHTMLTableToExcel  
                                                className="btn btn-info"  
                                                table="emp"  
                                                filename="ReportExcel"  
                                                sheet="Sheet"  
                                                buttonText="Export excel" />  
                                </div>  
                        </div>  
                )  
        }  
}  

export default ExportExcel  

 Add a reference of this component in app.js file, add the following code in app.js file.

 import React from 'react';  
import logo from './logo.svg';  
import './App.css';  
import ExportExcel from './ExportExcel'  

function App() {  
  return (  
    <div className="App">  
      <ExportExcel/>  
    </div>  
  );  
}  

export default App;  

Our Reactjs project is created, now create a database table and web API project, to show data in a table.

Create a table in the database

Open SQL Server Management Studio, create a database named "Employee", and in this database, create a table. Give that table a name like "Employee".

CREATE TABLE [dbo].[Employee](        
    [Id] [int] IDENTITY(1,1) NOT NULL,        
    [Name] [varchar](50) NULL,        
    [Age] [int] NULL,        
    [Address] [varchar](50) NULL,        
    [City] [varchar](50) NULL,        
    [ContactNum] [varchar](50) NULL,        
    [Salary] [decimal](18, 0) NULL,        
    [Department] [varchar](50) NULL,        
 CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED         
(        
    [Id] ASC        
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]        
) ON [PRIMARY]        
GO       

Now add a demo data in this table.

Create a new Web API project

Open Visual Studio and create a new project.

This is image title

Change the name to MatUITable.

This is image title

Choose the template as Web API.

This is image title

Right-click the Models folder from Solution Explorer and go to Add >> New Item >> data.

This is image title

Click on the "ADO.NET Entity Data Model" option and click "Add".

This is image title

Select EF Designer from the database and click the "Next" button.

This is image title

Add the connection properties and select database name on the next page and click OK.

This is image title

Check the "Table" checkbox. The internal options will be selected by default. Now, click OK

This is image title

Now, our data model is successfully created.

Right-click on the Controllers folder and add a new controller. Name it as "Employee controller" and add the following namespace in the Employee controller.

using MatUITable.Models;   

Now add a method to fetch data from the database.

[HttpGet]    
[Route("employee")]    
public object Getrecord()    
{    
    var emp = DB.Employees.ToList();    
    return emp;    
}    

 Complete Employee controller code

 using System;      
using System.Collections.Generic;      
using System.Linq;      
using System.Net;      
using System.Net.Http;      
using System.Web.Http;      
using MatUITable.Models;      
namespace MatUITable.Controllers      
{      

    [RoutePrefix("Api/Emp")]      
    public class EmployeeController : ApiController      
    {      
        EmployeeEntities DB = new EmployeeEntities();      
        [HttpGet]      
        [Route("employee")]      
        public object Getrecord()      

        {      
            var emp = DB.Employees.ToList();      
            return emp;      
        }      
    }      
}     

Now, let's enable CORS. Go to Tools, open NuGet Package Manager, search for CORS, and install the "Microsoft.Asp.Net.WebApi.Cors" package. Open Webapiconfig.cs and add the following lines

EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");            
config.EnableCors(cors);   

Now go to visual studio code and run the project using 'npm start' command.

This is image title

Click on 'Export Excel' button. Once excel downloads, open and check.

Summary

In this article, we learned how we to Export data to an Excel sheet in ReactJS.

Thank you for reading!

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

React Tutorial for Beginners - Learn React in 1 Hour

React Tutorial for Beginners - Learn React in 1 Hour. The quick guide to learn basic concepts and workflow of how to build React App. In this course you will learn React in 1 hour. You will learn what react does, you will learn how react works, you will learn views, components, state, routing, react lifecycle and much more.

React State Management Tutorial - Context API

In this React tutorial for beginners, we are going to learn everything about state management in React. The reason you might need a state management tool like the Context API or Redux. We will focus on learning to context api today together with react hooks which is a new modern way of writing react code. The context api provides us with useful hook called useContext that lets us use a state in any of our components we want!

How to Share Code Between React and React Native

Learn how to share code between React and React Native to avoid duplicating logic. Sharing Code Between React and React-Native: What Not to Share. This question of sharing code between React and React Native, in fact, one of the hot topics among React and React native developers all over the world. React and React-Native allow a learn once write anywhere paradigm. This is great, because one tech team can build both your web app and native mobile experience. The problem is developers hate writing things twice. There have been a couple of efforts to build a unifying technology to write an application once and have it work on both web and native.