@agungkes/react-excel-renderer
v0.0.2
Published
An addons to render and display excel sheets on webpage
Downloads
12
Readme
react-excel-renderer
A react library to render and display excel sheets on webpage
Demo
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 anonChange
handler
<input type="file" onChange={this.fileHandler.bind(this)} style={{"padding":"10px"}} />
- In the
onChange
handler, invoke theExcelRenderer
function and provide file object from the event handler to theExcelRenderer
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" />
- To make this table look more like an excel sheet, follow this article - Quick CSS Tools to make your web page tables to look just like excel
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