Hacker News new | ask | show | jobs
by misiti3780 3404 days ago
For anyone that needs to implement grid-based editing in their application, here is my two sense:

I have spent the past few months looking at a variety of grids in react. The requirements for my grid were

1) drag and drop update columns (like excel) 2) editable single cells 3) column sorts 4) column resize 5) searchable table 6) column level search 7) double click column resize (like excel)

I obviously was not able to find any that did of these things well. I started out looking at / modifying the code for:

adazzle.github.io/react-data-grid/examples.html#/all-features

But quickly realize the horizontal/vertical scroll performance was horrible on OSX Chrome. I ended up using facebook fixed-data-grid. Unfortunately they are no longer maintaining it but I am using this fork:

https://github.com/schrodinger/fixed-data-table-2

I have had two problems with fixed-data-grid, and the performance is awesome. It is very easy to extend.

1 comments

Did you evaluate or consider react-virtualized [0]? I've used it for one internal app that loaded a couple thousand rows and it worked well. I don't think it meets all your requirements out of the box though, but it seems like the best option to build extensions for going forward. The creator Brian Vaughn was recently hired by Facebook, and also just finished work on v9 that is React Fiber compatible.

For others that want a comparison, here's a writeup that explores the pros/cons of various React grid/table libs [1].

[0]: https://github.com/bvaughn/react-virtualized

[1]: https://techblog.commercetools.com/advanced-data-tables-in-r...

React Virtualized looks like a good starting point, but it's sobering to see how much work the React and Angular devs are going to have to do to catch up to existing component frameworks.
i didnt even see this until now. it looks like it was well built, but extending this project to work like an excel-like grid editor looks like it might be a lot more work than using fixed-data-grid-2