How to Export Data to Excel in ReactJS

Today We will see how to Export Data to Excel in ReactJS. I am using Fake JSON Data. How to Export Data to Excel in ReactJS.

Export Data to Excel Sheet in React

We can convert React table data into an Excel sheet using a react react-html-table-to-excel package. All the data in the table are coming from a fake JSON site.https://jsonplaceholder.typicode.com/ , You can use your own data for the table.

I am using the Bootstrap CDN link for the design. You can use material UI or any other designing framework.

Export React Data into Excel table
Table data into Excel Sheet

Export React table data into Excel

First, You have to install the react-html-table-to-excel package in your react app. This package Provides a client-side generation of Excel (.xls) file from HTML table element.How to export an HTML table as a .xlsx file

yarn add react-html-table-to-excel  

or using npm 

npm install react-html-table-to-excel

After installation of this package, you can call all the features of this package into your project. now just run the below code into your App.js or any component.

App.js

import {useState,useEffect} from 'react';
import ReactHTMLTableToExcel from 'react-html-table-to-excel';
 
function App(){

    const[result,setResult]= useState([]);

    const getData = ()=>
    {
        fetch('https://jsonplaceholder.typicode.com/users')
        .then(response => response.json())
        .then(res => setResult( res));
    }
   
    useEffect(() => {
        getData();
    },)

        return (
            <div className="container">
                <h3 className="mt-3 text-success"><center>Export React Table Data into EXCEL Sheet</center></h3>
                <div className="row mt-4">
                <ReactHTMLTableToExcel
                    id="test-table-xls-button"
                    className="download-table-xls-button btn btn-success mb-3"
                    table="table-to-xls"
                    filename="tablexls"
                    sheet="tablexls"
                    buttonText="Export Data to Excel Sheet"/>
                   <table className="table" id="table-to-xls">
                    <thead className="thead-dark">
                    <tr>
                        <th>Firstname</th>
                        <th>Lastname</th>
                        <th>Email</th>
                        <th>Website</th>
                    </tr>
                    </thead>
                    <tbody>
                  
                         {result.map((res)=>
                            <tr>
                            <td>{res.name}</td>
                            <td>{res.username}</td>
                            <td>{res.email}</td>
                            <td>{res.website}</td>
                            </tr>
                          )}   
                      
                    </tbody>   
                </table>
             </div>
            </div>
        );
    }
 
export default App

Now run the project using this command npm start . Bydefault reacts uses port number 3000 ,but you can change the port number using this line of code into the package.json file

Now using the above packge and code you can convert your REACT Table into a Excel

"start": "react-scripts start"
t0
//linux
"start": "PORT=3006 react-scripts start"
or 
"start": "export PORT=3006 react-scripts start"
//windows
"start": "set PORT=3006 && react-scripts start"
Subscribe to My Programming YouTube Channel For more Project

.

.

See our more projects in React JS

Send Emails with Node.js & React Js

Theme Color change in React JS

Records display in Material UI Table

Display Records in Model Box in React

Responsive Navbar in Material UI React

Comments 2

Leave a Reply

Your email address will not be published. Required fields are marked *