This project allows you to fetch data from an Excel file and display it in a React component.
Follow these steps to set up the project:
-
Clone the repository:
git clone https://github.com/yourusername/your-repository.git
-
Navigate to the project directory:
cd your-repository
-
Install dependencies:
npm install
-
Install the required dependencies using npm or yarn:
npm install xlsx
-
Import the necessary dependencies in your React component:
import React, { useState } from 'react'; import * as XLSX from 'xlsx';
-
Set up state to store the Excel data:
const [data, setData] = useState([]);
-
Create an input element of type "file" to allow users to choose an Excel file.
-
Define a function to handle file upload and process the selected file:
const handleFileUpload = (e) => { const file = e.target.files[0]; const reader = new FileReader(); reader.onload = (event) => { const binaryString = event.target.result; const workbook = XLSX.read(binaryString, { type: 'binary' }); const sheetName = workbook.SheetNames[0]; const sheet = workbook.Sheets[sheetName]; const jsonData = XLSX.utils.sheet_to_json(sheet); setData(jsonData); }; reader.readAsBinaryString(file); };
-
Check if the data is not empty and display it in a table:
return ( <div> <input type="file" onChange={handleFileUpload} /> {data.length > 0 && ( <table> <thead> <tr> {Object.keys(data[0]).map((key) => ( <th key={key}>{key}</th> ))} </tr> </thead> <tbody> {data.map((row, index) => ( <tr key={index}> {Object.values(row).map((value, index) => ( <td key={index}>{value}</td> ))} </tr> ))} </tbody> </table> )} </div> );
Now, when you upload an Excel file, the data will be displayed in a table.