react-excel-parser

A react library to render and display excel sheets on a webpage. I forked this project from react-excel-renderer because it was no longer being maintained. I added Typescript support and fixed some bugs that were bothering me.

Installation

Run the command npm install react-excel-parser.

Usage

There are two primary components, ExcelRenderer and OutTable. ExcelRenderer will take an Excel input file (csv, xls, xlsx) from an <input type="file"> and convert it to an array of data, rows and cols. The rows are actually an array of arrays (any[][]) -- where each row is an array consisting of the entries from the corresponding row of the Excel file. The columns (cols) will look different depending on the options set, but the original project used something like { name: 'A', key: 0 }, { name: 'B', key: 1 }, ... as a way to index the Excel columns (i.e. what you'd expect to see above the data in an Excel table).

OutTable is a way to present the data generated by the ExcelRenderer. It expects rows and columns in the same shape as generated by the ExcelRenderer component, and I added some options to make it easier to configure the resulting output table (see the Documentation section). Lastly, I added a function that converts the array of arrays generated by the ExcelRenderer to a more typical JSON format, convertExcelRowsToJson, because I typically wanted to submit JSON data (an array of objects, in which each row is an object, and the keys of the object are the corresponding columns) instead of an array of arrays.

Documentation

ExcelRenderer(file: File, callback: any)

file here is self-explanatory, a file that can be uploaded from an <input type="file">. The callback passed will fire after the Excel file has been processed. It's currently expecting a function of the form (error, response) => any (so a successful call will result in callback(null, data)), but I think I will modify this in a future release (I find it weird to specify the error callback first, but I haven't tested the error handling at all).

OutTable(props: IOutTableProps)

The OutTable generates a plain HTML table. You pass in the data and classes you want to use to style it.

Input props:

interface IOutTableProps {
    rows: any[][], // rows are an array of arrays, each row is an array of values (corresponding to a row in the Excel file)
    columns: {
        key: number;
        name?: string;
    }[],
    selectedColumns?: string[]; // specify columns you want printed to screen, default to All
    showRowNumbers?: boolean;
    renderRowNum?: (row: any, index: number) => string;
    showHeaderRow?: boolean;
    columnNamesInHeaderRow?: boolean;
    className?: string;
    tableClassName?: string;
    tableHeaderRowClass: string;
}

Explanation:

rows: These are the rows generated by the ExcelRenderer. It is an array of arrays, so e.g. rows[1] would be an array containing the data in the second row of the Excel file, e.g. ['ABC', 123, ... ].

columns: These are the columns generated by the ExcelRenderer. It is an array of objects containing a key and the name of the column. These columns correspond to the Excel columns, e.g. { name: 'A', key: 0 }, { name: 'B', key: 1 }, ..., { name: 'Z', key: 25 }, { name: 'AA', key: 26 }, { name: 'AB', key: 27 }, ... just like you'd see generated in an Excel file. The original intention of the parent project was probably to generate a table that looks exactly like an Excel file on the web, and hence these column names.

selectedColumns: Optional. An array of strings. If you only want to display a few columns from the Excel file, you can pass an array of strings corresponding to the column names you'd like to display. For example, with no other options specified, passing an array ['A', 'C'] will only show the first and third column from the Excel file in the OutTable. With the columnNamesInHeaderRow option (which is true by default), you would instead pass strings containing the actual column names contained in the first row of the Excel file. For example, if cell A1 of the Excel file read "Column 1" and cell A3 read "Column 3", you would pass an array ['Column 1', 'Column 3'] to display just the first and third columns from the uploaded Excel file.

showRowNumbers: This is false by default. When enabled, it will show the row numbers of the resulting data (corresponding to the row numbers of the Excel file). The row numbers can be modified with the function renderRowNum.

renderRowNum: If showRowNumbers is enabled, you can override the default row numbers with a function of the form (row: any, index: number) => string. The row is the corresponding entry enumerated from rows. the index is the corresponding index, and the function should return a string containing what should be printed in the box that would normally contain the row number.

showHeaderRow: This is true by default. The header row can be given additional styling (given the class tableHeaderRowClass). If columnNamesInHeaderRow is true, this will be the first row of the Excel file (and filtered by selectedColumns, if selectedColumns were passed as a parameter). Otherwise, it will show A, B, C, ..., Z, AA, ... as you'd see above an Excel table.

columnNamesInHeaderRow: This is true by default. This refers to the first row of the Excel file being column headers. Set this to false if you have no column headers.

className: Optional. This className will be given to the <div> element containing the table.

tableClassName: Optional. This className will be given to the <table> element containing the data.

tableHeaderRowClass: Optional. This className will be given to the header row of the table, e.g. the <th> elements and the <td> element containing the row numbers if that option was specified.

convertExcelRowsToJson(file: ParsedExcelFile, columnNamesInHeaderRow?: boolean, selectedColumns?: string[])

This function will convert the uploaded Excel file to a more standard JSON format, an array of objects where each object corresponds to a row, and the keys of the object correspond to the columns. E.g. [{ column1Name: row1cell1Value, column2Name: row1cell2Value, ... }, ...]

file: This is the format of the file output by the ExcelRenderer. The ParsedExcelFile is an exported type that is simply { rows, cols } where rows and cols are same as above.

columnNamesInHeaderRow: Specify whether the first row is header row data, i.e. the first row will be used as the keys of the resulting JSON object. If false, the data will be in the form [{ A: value11, B: value12, ... }, { A: value21, B: value22, ... }, ...]

selectedColumns: Optional. If you only want the data from certain columns, you can specify the column names in an array here. Otherwise, all columns will be generated in the resulting JSON output.

Demo

Coming soon.

TODO

Better error handling, improve the callback being passed to the ExcelRenderer, and perhaps change the callback's input parameters.