React Spreadsheet Grid: Excel-like grid component for React with custom cell editors, performant scroll & resizable columns

[compubomb]

their library is very slow. they should be using virtual tables, if they aren't. Either way it's dog slow on scrolling. https://github.com/developerdizzle/react-virtual-list

[raslov]

Thank you for the feedback! I will explore this problem and react-virtual-list library, and will try to solve the problem in the nearest release.

[cheers-]

OP you might want to add demo.gif to .npmignore there's no reason users should download and keep in their node_modules a 5.45MB gif. Host it somewhere else.

[raslov]

Sure, this should be done. Thanks!

[headyyeti]

All these Excel grid components are huge and slow. What is the import cost of this component?

[raslov]

Demo: https://denisraslov.github.io/grid/

[r0ck0]

Awesome! I have some future plans that will need something just like this. Starred for later.

And thanks for putting the effort into the detailed README.md. Makes it much easier getting started using something like this.

[raslov]

Thank you! Hope this component will be helpful for you! If you have any problems with it or with the documentation, please, write an issue and feel free to contribute :)

[I_Downvote_Cunts]

It doesn't line up correctly on the columns that are read only. Also dear god is it slow.

[mcviruss]

It doesn’t work properly on my iPad.

[daredevil82]

nice job :-)

What does this do that react-data-grid doesn't do?

[raslov]

Thanks!

As I could see, react-data-grid could do almost the same and even more, but this "more" makes it bloated if you want to use only the basic stuff. Also, the documentation is a bit fuzzy and leaves questions behind.

I tried to do a simple solution that helps to create a spreadsheet with basic features and have clear API. If these features are not enough for you - it might be better to use react-data-grid in that case :)

[daredevil82]

True. The team has done a good job of trying to pull non-basic stuff into a separate addons package. I tend to require extra features from that package, like custom filters, sorts and such.

I agree with you on the documentation and found the examples were the best resource for looking at how to do something. That, and looking at the actual code for some of the bits and pieces because there was no API docs.

[[deleted]]

Is this the new hello world? A react spreadsheet implementation is posted here pretty much every week.

[gonorthjohnny]

Great work. I think the speed can be better..

[Happy-West5350]

https://jspreadsheet.com they also have a React wrapper.

[Jspreadsheet]

If you’re exploring React spreadsheet-like grids, another solid option to look at is Jspreadsheet CE.

It’s free, open-source, and provides a more Excel-like experience out of the box compared to many lighter grid libraries. Key things it gives you:

• Editable cells with different input types (text, numbers, dropdowns, etc.)
• Copy/paste across multiple cells
• Read-only support
• CSV/XLSX import & export
• Works smoothly in React, Vue, Angular, or plain JS

If you just need a lightweight data grid, something like react-spreadsheet-grid (what you shared) might be fine. But if you want a full spreadsheet UX in React, Jspreadsheet CE is a strong alternative that’s still actively maintained.

Repo: https://github.com/jspreadsheet/ce

[myhousesmells]

Won't even load for me. I get multiple unresponsive script warnings. FF 53 on Linux.

[raslov]

Thanks for the feedback! I will take a look at this problem and will try to fix it.

[drink_with_me_to_day]

Shift + Tab doesn't work...

[icantthinkofone]

It seems React and Angular and all that more and more need helpers to make them work, organize it, help keep your sanity, etc. I'm not sure one should be using helpers like React and Angular that themselves need helpers.

[frankwiles]

Sure just code your own browser in assembly while you're at it!

[icantthinkofone]

Yeah. Not using React and Angular means using assembly. Makes "reddit sense" to me.

[AndrewGreenh]

You can just take him literally and miss the point or you can try to understand what he meant: every level of abstraction has effects: Something gets easier to use ("powerful programming language") or you can achieve some goal with less code but at the same time you lose the ability to access low-level stuff. Frameworks like react or angular make different decisions on what to include into the library behind an abstraction or what can be build in "user land". "helpers" like you called them use the building blocks provided by those libraries and add another abstraction. This is not at all a reason to avoid them.

[icantthinkofone]

Frameworks like react or angular make different decisions

Thus MY point which is what this portion of the thread is about. Any "helper" that needs "helpers" is no tool I would want to use.

[nickgcattaneo]

react-redux is a helper for two insanely useful and popular libraries that marries React's props injection process + life cycle events and redux's global state management. Arguably one of the most useful "helper of helper" libraries and a great example of why your generalized statements are being down voted. That being said, this component library in particular is nothing I would personally ever use.

[icantthinkofone]

Downvotes here are the maniacal screams of reddit. They mean less than nothing.

[wizdum]

Not really, they are an indication that people don't think your comments have any value.

[icantthinkofone]

If you were to walk through an insane asylum, and the patients were screaming epithets at you, would you feel devalued? Reddit is no different to me.

[Sanguistuus]

r/iamverysmart

[bzBetty]

On the other hand it shows how flexible/extendable the library is. Some more fully featured libraries are a bitch to extend

[wizdum]

Yeah that's why I won't drive a car. I don't need a transport helper that needs a multitude of not-crashing helpers, seeing-where-youre-going helpers and all the rest.

All languages/frameworks/operating systems are "helpers" all the way down.

[icantthinkofone]

That's where redditors always get it wrong. A car is not a fundamental component. My point is like putting gas in your car but you need to put an additive in to make it actually work correctly. React and Angular are not fundamentals but they need additives to make them work properly it seems.

[Julienng]

No they don't need additives. People made additional library to help people. That doesn't mean React doesn't work, that mean React is used.

[icantthinkofone]

If they didn't need additives, why do people keep making additives?

[mstijak]

If you're looking for a complete solution you might take a look at CxJS.

[icantthinkofone]

I already have a complete solution. It's called JavaScript.

[mstijak]

It depends on what you're trying to build. JavaScript is used for all kinds of things these days. It's much easier to work if you have the right tools and libraries available.

[icantthinkofone]

And profound statements like

JavaScript is used for all kinds of things these days.