fetch-data-from-excel-file's Introduction

React Excel File Data Fetcher

This project allows you to fetch data from an Excel file and display it in a React component.

Getting Started

Follow these steps to set up the project:

Installation

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>
);