JAVASCRIPT

How to upload an Excel sheet file using react.js and display data to a table

// react-excel-renderer
// There's a perfect library exactly for this ! It converts the excel data to JSON first, then renders it into a HTML table. Its called react-excel-renderer

+ Install it npm install react-excel-renderer --save

+ Import both components ExcelRenderer and OutTable
  import {ExcelRenderer, OutTable} from 'react-excel-renderer';

+ Provide the file object to the ExcelRenderer function in your event handler

// Code:

fileHandler = (event) => {
let fileObj = event.target.files[0];

//just pass the fileObj as parameter
ExcelRenderer(fileObj, (err, resp) => {
  if(err){
    console.log(err);            
  }
  else{
    this.setState({
      cols: resp.cols,
      rows: resp.rows
    });
  }
});               

}

// Once JSON is obtained, provide it to the OutTable component
<OutTable data={this.state.rows} columns={this.state.cols} tableClassName="ExcelTable2007" tableHeaderRowClass="heading" />

read and save excel with react

import readXlsxFile from 'read-excel-file'
const input = document.getElementById('input') 
input.addEventListener('change', () => { 
  readXlsxFile(input.files[0]).then((rows) => { 
    // `rows` is an array of rows    // each row being an array of cells. 
  })})

read and save excel with react

import readXlsxFile from 'read-excel-file' const input = document.getElementById('input') input.addEventListener('change', () => {  readXlsxFile(input.files[0]).then((rows) => {    // `rows` is an array of rows    // each row being an array of cells.  })})