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

Question

I am new to react JS. I am trying to perform uploading Excel sheet file using react.js and display data to a table. I got partial reference from the link but, it is not complete. Please help with it. Importing data from excel and displaying in a react component

Answer 1

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

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

Thats it ! Its done !

A demo for the same can be found here