Skip to content

ashishd751/react-excel-renderer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-excel-renderer

A react library to render and display excel sheets on webpage


Demo

  • A sample demo can be found - here
  • You can find code for the demo - here

Installation

npm install react-excel-renderer --save

Usage

  • Import the primary module ExcelRenderer to convert sheet data into JSON format.
  • Also import OutTable to display the obtained JSON into a HTML Table.
import {OutTable, ExcelRenderer} from 'react-excel-renderer';
  • Place a simple input element in the render function of your class and pass an onChange handler
<input type="file" onChange={this.fileHandler.bind(this)} style={{"padding":"10px"}} />
  • In the onChange handler, invoke the ExcelRenderer function and provide file object from the event handler to the ExcelRenderer function to obtain JSON data from sheet
  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
        });
      }
    });               

  }
  • Use the OutTable component to render obtained JSON data into HTML table, and provide classnames as props to make table look alike an Excel Sheet
<OutTable data={this.state.rows} columns={this.state.cols} tableClassName="ExcelTable2007" tableHeaderRowClass="heading" />

Note: Once the JSON data is obatined, you can also use other options to render them instead of the OutTable component. For example, CanvasDataGrid provides various features to render tabular data.

Built With

  • SheetJS - The web page sheet framework used

Authors

Ashish Deshpande - Initial work - Ashish's Github Profile

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

  • Special shout out to the guys at Sheet JS for developing the parent library
  • High gratitude towards Bernard Bado to help me publish my first npm package

Releases

No releases published

Packages

No packages published