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.
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
Sir your projects is very excellent work. sir please one project makes with admin dashboard using react js expressjs and mongodb.
I will upload soon