Quickly Render and Display Excel Spreadsheets on a Webpage with React JS

While working on a project recently, I needed a quick, easy way to render and display Excel spreadsheets on a webpage, but I was not able to find a pre-developed JavaScript library.

The only available alternative was to upload the file to Google Drive or Microsoft OneDrive, and then embed the link. Well, that’s a bummer!

If only there were a much more elegant and easy-to-use solution to this problem.

Well, now there is! It’s called react-excel-renderer.

ashishd751/react-excel-renderer

React-Excel-Renderer is a React-based component that can be used to render and display Excel spreadsheets on a webpage.

I’ll go through how to install and use it now.

Installation

Install the library using npm.

npm install react-excel-renderer --save

This installs all required files onto your project’s node_modules folder.

Using the React-Excel-Renderer

• 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 the table look like 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 obtained, you can also use other options to render them instead of the OutTable component. For example, CanvasDataGrid provides various features to render tabular data.

Demo Test Drive

I hope you’ll give the react-excel-renderer a try now — links are below.

React Excel Renderer Demo

Feel free to share on other channels and be sure and keep up with everything new from Hashmap by following our Engineering and Technology Blog.

Ashish Deshpande is a Developer with Hashmap providing Data, Cloud, IoT, and AI/ML solutions and consulting expertise across industries with a group of innovative technologists and domain experts accelerating high value business outcomes for our customers.

Connect with Ashish on Github and be sure to catch Hashmap’s Weekly IoT on Tap Podcast for a casual conversation about IoT from a developer’s perspective.