What's the Best React Grid Component?
I’vs use Griddle 0.2.14 for about three days and while its an excellent choice it has some issues that I cannot live without. Its nearly impossible to have the selected row highlighted so that the user know what they clicked on. (Right now I display ID by the Edit and Delete Icons, which is tacky for a professional UX. Tried a jquery hack, but I’m new to JS and it’s not working out. Still waiting for help on that one, though I have gotten responses of assistance but no solution. When you change the paging value and you have a rowClick callback, the page jumps back to the the lowest page setting, and undesirable behavior. It has check boxes but no checked callbac and when paging the check boxes loose there checked state. Its customization is excellent with exception to the settings, where its limited and no matter how you CSS-it, it does not look as professional as the rest of the grid. Out out of the box it has excellent features and a professional look and feel. The developer(s) and contributes have done an excellent job with this component, but I believe the priorities for bugs fixing is affecting the overall quality of the component.
I switched to react-grid 1.2.15 and while it requires a little more code to show the data. Columns array with the header names, its working well. With that said, it’s excellent work but has issues also. Column rearranging is flawless if you need it. It’s pretty simple to select a row and use mouse over row for highlight, unlike Griddle. I love the … on the end o the text in a cell when it doe not fit, but sorting and filtering are another issue. You essentially perform those yourself. The demos show using sorty, but the demos don’t show all the code necessary, so its a little frustrating getting sorting and filtering to work (still trying), however the examples work and sorting is based on per each column is a bonus. I’m giving it another day, and then going back to Griddle with my tacky “ID xxx Selected”.
With that said, I did give peek at FaceBooks fixed-data-table and it takes a heck of a lot more code than react-grid. I also stumbled on the one called react-infinite-grid. Basic up front huge element loading, no Bells or Whistles. Its different because it loads elements, more information can be found here: . I will definitely be using it at some point in my app.
Wrapping up, I believe the defacto standard functionality for Grid would be “row over highlight”, “row select with rowClick callback”, “multiple row select”, “column sorting”, “column filtering filtering”, and “custom styling” that are implemented is a way they are passed as props, similar to Griddle. Every thing else would be icing.
So my top choices are griddle, then react-grid. Both are excellent, even with the current issues. You might also want to check out this one: as its simplicity look promising but I have not had the time to experience it yet
I hope this helps.