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" />