While working on one of the office project for the data grid specific usage. I had to shop around for the various data grids and the spreadsheet libraries that are out there on the web.
I know a lot of small companies are making use of the Airtable and they are just happy with it. But the point is relying on the external cloud sources for the commercial work is like locking yourself in someone else's property. So we thought about coming up with our own solution for this.
I was trying to check few boxes before choosing the library. I wanted to put my hands only on MIT or GPL based libraries. I wanted to check if the library allows private and personal project usage under their license. I also wanted to see how flexible are these libraries in context of using it for the office project.
Here are some of the libraries that I tested while making the prototype.
React datasheet
First library that I looked at was react datasheet. This library was pretty useful for the simple prototype. Though I wanted a lot out of library but it seems like this one has pretty simple usage. And not meant for too much advanced usage and would require a lot of tinkering.
Image Credit: React datasheet
If you want something to work simple with your prototype and queries, then this can be a good library to start with.
Check it here: https://nadbm.github.io/react-datasheet/
React Data Grid
If you are dealing with bigger CSV files and the running API data like say stock tickers etc. Then this type of the data grids can be useful for you. Don't expect this one to be too much powerful because it is not that powerful.
I made a simple prototype and tried to bind my backend data. And the output turned out to be better but we wanted more features for our work so had to abandon the library.
Image Credit: React data grid
Check it here: https://github.com/adazzle/react-data-grid
React Spreadsheet Grid
If you want to work with the spreadsheet like setup like say excel or the Google sheets, then this is the library that would take you closer to the effects and the overall workflow. I have kind of found it pretty simple in implementation as well. However complex backend queries would be a bit tricky to work with so for that you need something that does properly handle the HTML5 and JavaScript setup.
Image Credit: React Spreadsheet Grid
If you want something intermediate level and also work like say AirTable then something like spreadsheet grid would be useful for you. I just have one issue with it that I am not sure how it would handle the image and the other media data in spreadsheet.
Check it here: https://github.com/denisraslov/react-spreadsheet-grid
Handsontable
This is the library which I am using as of now. The reason that it checked out all my boxes. I can use it commercially. And I can also use it with vue and angular too. Though there is not any chance of this project going through the react to vue any time soon. So keeping that aside, I personally didn't see any strong reason for going against this library.
It can work with images, media and also other editing that you want to do with the spreadsheet grid. I'd say this is a perfect library for our project for now.
Image Credit: Handsontable
For now I am going to stick with this library for the react. And maybe in near future I may change the library if need be and maybe even outsource more customization for additional company only features.
Check it here: https://github.com/handsontable/handsontable
The thing about data grid and spreadsheet libraries is that a lot of them are not maintained and some are also not much feature rich. Which kind of limits you from being used in the serious projects. And the thing is considering the one we are going to use is already open source. I may consider making some additional improvement to release as fork. But that's left for the future based on how our project turns out.
Thanks for reading till the end. Do let me know your views.