The ReactJS demo for js-xlsx is very unclear to me

[whyjay17]

EDIT: https://docs.sheetjs.com/docs/demos/frontend/react/ is the primary demo. It discusses state representations and links to React ecosystem demos including static site generation, data grids, and native desktop and mobile apps

---

Sorry if I am not skilled enough to understand the demo,
but this page: https://github.com/SheetJS/js-xlsx/tree/master/demos/react
is very unclear to me and I still don't get how this library has to be used in ReactJS.

How do we have to use this object

{
  cols: [{ name: "A", key: 0 }, { name: "B", key: 1 }, { name: "C", key: 2 }],
  data: [
    [ "id",    "name", "value" ],
    [    1, "sheetjs",    7262 ],
    [    2, "js-xlsx",    6969 ]
  ]
}

and download it as a xlsx? Please help!

[SheetJSDev]

If the demo doesn't make sense, we probably are missing something. Here's a longer explanation. If this makes sense, please let us know how to improve the README:

To run the demo, clone the repo and go to that subdirectory (/demos/react) and run make && make react, then go to http://localhost:8000 to see the demo.

You should see something like:

Then select a spreadsheet by clicking the file input button or dragging and dropping a file like
Book1.xlsx -- you can click and download it.

If you add the line console.log(this.state); at the top of the exportFile function, you can see the state when the file is generated:

That object represents the state that the example uses. https://github.com/SheetJS/js-xlsx/blob/master/demos/react/sheetjs.jsx is the demo component used in the web examples.

this.state.data is an array of arrays, so the exportFile function just converts that part of the state:

/* convert state.data to worksheet */
const ws = XLSX.utils.aoa_to_sheet(this.state.data);
/* build a workbook */
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
/* generate XLSX file and send to client */
XLSX.writeFile(wb, "sheetjs.xlsx")

The callback is triggered when a certain button is clicked:

<button disabled={!this.state.data.length} className="btn btn-success" onClick={this.exportFile}>Export</button>

On the read side, the state is set when you process a file.

If that explanation makes sense, please feel free to submit a PR to clarify the README.

[whyjay17]

I understand now and I think your answer is very clear!
It would be great if your answer can be added to the react demo README.
Thanks for the great library!

[dave-wind]

react ant design you can try to see
https://github.com/dave-wind/excel

[hkar19]

hello, i am here trying as well cloning the repo and building react demo, but after i run make && make react, this is what i got:

mkdir -p node_modules
cd node_modules; if [ ! -e xlsx ]; then ln -s ../../../ xlsx; fi; cd -
<REDACTED>/SheetJS/demos/react
python -mSimpleHTTPServer
make: python: No such file or directory
make: *** [react] Error 1

anything that i forgot after i cloned the repo and did npm i in the base repo?

[SheetJSDev]

There is a plan to redo the demo and make it more interactive (like https://docs.sheetjs.com/docs/#export-an-html-table-to-excel-xlsx on the docs page). For now, replace the python line with

npx -y http-server .

It will start a server on port 8080. You can open http://localhost:8080 in your web browser

Note that the . is important -- it tells http-server to use the react directory.

[hkar19]

i did modify this file demos/react/Makefile in this line https://github.com/SheetJS/sheetjs/blob/master/demos/react/Makefile#L3:
and

- python -mSimpleHTTPServer
+ npx -y http-server .

everything then works.
thanks!

[SheetJSDev]

The React demos have been revisited:

https://docs.sheetjs.com/docs/demos/react is a general discussion of different internal states you can use in React apps. Each approach has a dedicated example which can be added to a CRA or Vite+React app. The old example is preserved in the "Legacy" section.

https://docs.sheetjs.com/docs/demos/grid#react-data-grid is an example where react-data-grid manages state and SheetJS interacts with the state when requested.

https://docs.sheetjs.com/docs/demos/mobile#react-native is the new React Native example covering a number of Filesystem and File Picker plugins

https://docs.sheetjs.com/docs/demos/content/#nextjs covers NextJS and static generation

For desktop apps we wanted to showcase react-native-windows (the Tauri demo uses Vue) but there are a few showstoppers like microsoft/react-native-windows#10059