Show HN: Griddle 1.0 – A customizable datagrid component for React | Hacker News Reader

Show HN: Griddle 1.0 – A customizable datagrid component for React

griddlegriddle.github.io

60 pointsjoelroxor22 comments

Ah, datagrids...

- The 'Platonic Ideal' data grid implements 100% of all features that could ever be needed of a datagrid.

- All implementations of the Platonic Ideal only implement between 50% and 70% of the features.

- Your requirements cover somewhere between 60% to 80% of the features exposed by the Platonic Ideal.

- The set of features you need vs those that are provided by the available datagrids are disjoint, implementing the remaining required features is a hellscape of custom extensions...

Word.

There should be a language and famework independent course about building those things, so you can build your own with the needed features quickly.

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.

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

HEY! If anyone is in the Detroit area on Wednesday, the creator of Griddle is speaking at the Detroit React Developers Meetup.

https://www.meetup.com/Detroit-React-Developers-Meetup/event...

I use this in production, it strikes a decent balance between flexible, powerful, and quick to use.

This is awesome. It's just a fully customizable framework for composing components that display collections of data. I think things like this are great because it defines a common interface for open source components to adhere their prop APIs to.

I need a grid component that supports single cell value re-computation.

Trying to display data that is computed (think Excel formulas) with react-data-grid and others is very complicated. I still am not satisfied with my current use of weird memoized selectors and a custom table.

I wonder if Griddle could help you out here. I think you can add a fake column that you will set up to get the entire row of data.

From there, you can basically render whatever you want from the made-up column (but have access to everything in the row to base it on). See the following for connecting a custom component to Griddle's state management:

https://github.com/GriddleGriddle/Griddle/blob/master/storie...

and

https://github.com/GriddleGriddle/Griddle/blob/master/storie...

I could use this today. I have a table to install in my app. Will it support bootstrap 4?

I'd recommend checking out Bootstrap Datatables. You just include the cdn link and select the table to style via javascript/jquery. Very simple and you get column sorting, paging, and search.

https://datatables.net/examples/basic_init/zero_configuratio...

Thanks!!

Very cool, I forgot to share that I use react, so I think a react based component is easier to adapt. Will look in more detail.

Is there a way for the width of the columns to be set to the maximum length of a field? Right now when I interact with the data grid it seems weird that the widths seem to change as I interact with it.

table { table-layout: fixed }, otherwise you can customize the column definition to define specific widths?

I didn't use the 1.0 now, but pre-1.0 felt clunky, coming fro ExtJS grids.

But with a bit of hacking it worked good enough.

How does this stack up against Ag-grid? The former is very strong in features from some experience using.

we are using ag-grid with react, and I can say the feature sets are very appealing and very nice. that said, ag-grid really needs to manage it's own state... like... it isn't like you can just pass a new rowData array, you have to use ag-grid's api (in react) to reconcile differences. something like Griddle, has a benefit in that respect and with the new direction Griddle's architecture is moving it won't be long before it gets a slew of new shiny features.

Ag-grid is feature packed but also bloated. The minified size is something like 600kb - it's insane.

Maybe, but for an intra-net app that's really negligible. For example, at work, one of our HR billing applications takes 3 full minutes to startup, and uses ActiveX running IE 8. We have to run VMs to use it, but its still in use.

When it comes to enterprise internal apps, the competition is pretty terrible, so you can mop up the field even when shipping something that'd be considered terrible bloated for a SaaS or consumer facing app.

Reply on news.ycombinator.com