-
Griddle, on github, demo and docs.
However no ability for fixed columns or headers
Check out my version of React grid component: https://github.com/riverside/react-grid
See demo here: http://zinoui.com/blog/react-grid-component
Nice example. However, I think it takes a lot more code to make a proper div formatted grid that allows for fixed and adjustable column headers.
Asked the world on Twitter and got this back within 10 min:
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: http://ggordan.com/post/react-infinite-grid.html. 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: http://carlosrocha.github.io/react-data-components/ as its simplicity look promising but I have not had the time to experience it yet
I hope this helps.
1 Like
4 months later, I hope I’m not to late!!
I’ve just added ag-Grid to the React echo system. www.ag-grid.com tells it all. The grid has existed for some time in other flavours so is already widely used, very stable and packed with features.
2 Likes
I hope this is not too late to give a response.
I was also looking for a simple, robust, flexible and highly customizable bootstrap like react grid system to use in my projects.
The best I know of is react-pure-grid https://www.npmjs.com/package/react-pure-grid
React-pure-grid gives you the power to customize every aspect of your grid system, while at the same time it has built in defaults which probably suits any project
1 Like
There’s a lot of table components out there but got frustrated by how unfriendly their API were. I wrote react-tisch to allow using true react components for column definitions, giving great flexibility and a real react feel to the API.
Checkout the github, docs and demo on gitbook
Please take a look at - http://reactdatagrid.com/. We have been building datagrids for almost a decade now in various different technologies, and this is our latest addition.
You can try this GigaTables ReactJS plugin - https://github.com/GigaTables/reactables
it is fresh and have a lot features:
– ajax data processing/editing (CRUD),
– classic pagination or infinite scroll,
– sorting,
– common search (through all columns),
– discrete (per column) search,
– ajax files upload,
– shft/ctrl rows selection,
– trigger functions,
– dynamic column content functions,
– 7 popular languages,
– data load period,
– hot keys
1 Like
For React, I may suggest these components: http://www.jqwidgets.com/react/. The Grid here is the most feature complete you can find: http://www.jqwidgets.com/react/react-grid/. It has Paging, Sorting, Filtering, Grouping, Pinned Columns, Cells and Rows edit, conditional formatting, excel and pdf export, Printing, Aggregates, …
Check this list
1 Like
Check out my functional-data-grid:
https://github.com/energydrink9/functional-data-grid
Supports virtual scrolling, locked columns, filtering, sorting, grouping, aggregates, variable rows height and many other features
The KendoReact Grid is a very versatile grid, great for line of business applications, it will handle most requirements you can think of including filtering, grouping, paging and sorting as well as easy PDF export and various scroll modes. The Kendo React Grid is just one piece of a much larger library of KendoReact Components. These components are built from the ground up in React and require zero dependencies on jQuery.
Hi Dimitar,
Your table looks great.
I am a beginner in react.js…so even though I am willing to learn the bolts and nuts of creating a table …but I have a deadline to meet.
May I know is it possible to reuse your component and I just change the header labels?
Hope to hear from you. tks.