
Show HN: Griddle 1.0 – A customizable datagrid component for React - joelroxor
http://griddlegriddle.github.io/Griddle/
======
jimmcslim
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...

~~~
k__
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.

------
misiti3780
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](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.

~~~
bombtrack
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](https://github.com/bvaughn/react-virtualized)

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

~~~
rch
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.

------
rufio
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...](https://www.meetup.com/Detroit-React-Developers-
Meetup/events/237730543/)

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

------
lopatin
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.

------
d0100
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.

~~~
dengar007
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.

<Griddle data={fakeData}> <RowDefinition> <ColumnDefinition id="id" />
<ColumnDefinition id="name" /> <ColumnDefinition id="somethingTotallyMadeUp"
title="New value" customComponent={connectedCustomComponent} />
</RowDefinition> </Griddle>

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...](https://github.com/GriddleGriddle/Griddle/blob/master/stories/index.js#L67-L71)

and

[https://github.com/GriddleGriddle/Griddle/blob/master/storie...](https://github.com/GriddleGriddle/Griddle/blob/master/stories/index.js#L145)

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

~~~
primaryobjects
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...](https://datatables.net/examples/basic_init/zero_configuration.html)

~~~
BrunoWinck
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.

------
zitterbewegung
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.

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

------
k__
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.

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

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

~~~
true_religion
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.

