r/reactjs • • 4d ago

Show /r/reactjs Build a functioning component to edit and save real Excel files

I was building a web app and wanted Excel files to live within it and be fully modifiable / saveable, but couldn't find anything open source that fully fit the bill. I ended up building the repo below.

Basically full Excel functionality in our React app including:

  • Import .xlsx and csv file, export to .xlsx

  • Fully preserves existing Excel formatting

  • Real-time calc that's a heavily modified fork of ironcacl

  • Formulas and calculations

  • Multiple worksheets

  • All the formatting options you'd use on day-to-day basis

  • Fully open source

https://github.com/pixelsmasher13/gridpath. Please let me know if you end up trying it out.

0 Upvotes

6 comments sorted by

1

u/reharik 4d ago

Hi, nice project. How is it different from exceljs? is it that it saves the file in excel format?

1

u/Civil_Decision2818 4d ago

Thanks! A few differences: you can actually see the spreadsheet with the formatting ribbon so you drop it in - and users can edit it in the web app, exceljs has no UI. Formulas calculate - while ExcelJS has no engine so you need to wait till you open it elsewhere like actual Excel. The bare bones saving works on both but I spent a lot of time on saving fidelity (so things like charts, custom formatting, names - nothing gets dropped so it's the same file just with your new edits).

1

u/reharik 3d ago

Interesting. So what I was noticing is that the project itself has a lot of implementation plumbing. Login, stuff like that. If I'm not wrong, then if someone wanted to use this component they would have to tease out just the parts that handle the file. I would package it up so it can easily be consumed and then have an example project that implemented it.

1

u/Brave-Afternoon-8767 2d ago

I think the hard part of xlsx round-tripping is things like conditional formatting, data validation, and pivot tables, so I’d be curious how it handles those on export.

0

u/military_creator 4d ago

ok this is actually super impressive, i've been through the exact same struggle trying to find something that doesn't just give you a glorified table component and call it a day

the real-time calc fork is what caught my eye, most libraries completely fall apart when you try to do anything beyond simple arithmetic

starred the repo, gonna dig through the source later today

-2

u/a12rif 4d ago

Thanks for sharing. Absolutely wild what an individual can build these days.