Excel Data into React Table Data

Question

I am new to react and I can upload an excel file successfully so far.

Here is my render method:

render() {
    return (
      <div className="cardUploader">
        <div className="card">
          <ControlLabel>
            <PageHeader>
              <h4>&nbsp;CARD UPLOADER</h4>
            </PageHeader>
          </ControlLabel>

          <div onSubmit={this.onFormSubmit}>
            <input
              type="file"
              name="file"
              accept=".xlsx"
              onChange={e => this.onChange(e)}
            />
          </div>
        </div>
      </div>
    );
  }

This is the method of loading the excel file:

 onChange(e) {
    let files = e.target.files;

    //creating a file reader object
    let reader = new FileReader();
    reader.readAsDataURL(files[0]);

    //Checking whether the file is loaded or not
    reader.onload = e => {
      console.log("File loaded", e.target.result);
    };
  }

Upto this point it is working properly.I need to convert excel data into react table data and store in the react table.Is there any method to convert data in an excel sheet into React Table data?

Answer 1

An xlsx is a compressed file type, containing multiple xml files. So, you would first have to decompress the file, extracting its content, then open the correct xml subfile and parse that xml, ...

As others pointed out, it's almost impossible to do this client-side.

If you really want to parse spreadsheet data client-side, I would propose to opt for the csv format instead. Excel can export to csv files. And they are easy to parse.

Answer to your additional question:

It depends how your data is structured in the csv. But let's assume that you have 2 columns, in your csv, one with a name, and one with a description. For react table you will need data and columns arrays.

const rows = csvData.split("\n")`; //will split your data in multiple lines,  

const data = [];
for (let row of rows) {  
  const cells = row.split(";"); 
  const name = cells.length < 0 ? "-" : cells[0];
  const description = cells.length < 1 ? "-" : cells[1];
  const rowData = { name, description };
  data.push(rowData);
}

const columns = [
  {Header: "Name", accessor: "name"}, 
  {Header:"Description", accessor: "description"}
];

That all assumes, that you render the ReactTable like this:

return (<ReactTable data={data} columns={columns} />);

And it assumes that your csvData looks like:

const csvData = "name1;description1;\n name2;description2";

It's important to open one of these files and to watch which seperator they use. CSV can use ";" or ",".

Note: Another common practice, is to use the first row of your CSV file to hold the titles of your data. That would make it possible to create your header from the first line of your csv data. And for the user, it means that he could make some columns optional, or reshuffle them.