

Show HN: A ReactJS Grid Component with infinite scroll, customization, and more - joelroxor
https://dynamictyped.github.io/Griddle/

======
CD1212
I have used Reactable
([https://github.com/glittershark/reactable](https://github.com/glittershark/reactable))
in a recent project and was extremely happy with it. The design was very
customizable and the sorting / search functionality I needed was available.

~~~
joelroxor
Ah, awesome - I'll be giving that a try.

------
wuliwong
Anyone seeing weird search results?

I searched for "dog"

and it yielded these two rows:

Perkins Leblanc Boyd Utah Brunei

Alyce Chavez Bendon Iowa Portugal

I am pretty sure "dog" isn't in either of those rows? What am I missing?

~~~
baddox
You've got to click settings and display all the columns. "dog" is a substring
of the company name. Here's the filtering code; it's just a JavaScript
`indexOf`:

[https://github.com/DynamicTyped/Griddle/blob/master/scripts/...](https://github.com/DynamicTyped/Griddle/blob/master/scripts/griddle.jsx#L108)

------
polskibus
Weird behavior on chrome 40 - beta.

    
    
      1. Change settings to 100 rows per page,
      2. scroll down to see "Next" button
      3. press it twice (until it disappears)
      4. Page is scrolled down - unexpected behavior.

------
metabrew
Are there any react infinite scrolling examples that support arbitrary row-
heights?

Like if you need to inline images which might be variable sizes.

I think it's probably possible, with some clever caching of row heights and
recalculation of some sort, in order to maintain a correctly sized spacer
element at the top/bottom. Not seen any examples of it.

~~~
TheAceOfHearts
If you don't know the size of all rows beforehand, AFAIK, it's pretty much
impossible to do this without having a jumpy scrollbar.

------
joewood1972
Unless I've misunderstood, and it may be semantics, but I don't see this as
infinite scroll. If I had 10,000,000 rows the browser would still struggle
with this grid as it needs to keep the React JS objects in memory. I would
like to see server side paging integrated with the scrolling.

I haven't tried it yet, so I may be wrong.

~~~
chadscira
Its not proper infinite scroll, they aren't removing DOM nodes as you scroll
down. But it's rare that any infinite grid can really handle 10m items because
they tend to use `top` or an overall height, so the browser would probably
choke.

~~~
joelroxor
Yeah, not rendering nodes out of view came up a little early on in the current
implementation of infinite scrolling as something I was looking to do. The
only way I could think of not rendering previous rows was to lock a specific
row height, which was not something I was excited about (and it breaks down
even further on nested tables, which have a state independent of its parent
grid).

It's definitely something Ryan and I (or anyone else that might want to
contribute) will be revisiting in the near future, potentially as a config
option.

------
GreaterFool
Is it just me or the "visible" parameter doesn't work at all?

My use case: I have columns A and B and instead of displaying both I want
column A with data from B in it. So I thought I'd set B to "visible: false"
and then use rowData.b in the custom component of A.

That doesn't work ;-(

~~~
dengar007
Sorry about that. There'll be a fix in the .1 release (which won't be too far
out)

------
HorizonXP
Very nice. I'll likely be replacing my current React table in my project with
this!

------
Kiro
This is what makes me scared of React. Everyone says it's so simple but still
you need all these specialized plugins for things that are easy to do without
React.

~~~
richardolsson
React is a component based UI framework, so I find it natural that common
components that might exist in some other framework need to be re-created for
React.

IMO, the fact that React components can be easily shared with an interface
that follows a common pattern is a major strength of React, rather than a
weakness.

------
rch
How about infinite horizontal scroll? I haven't seen any JavaScript data grids
that are designed to handle arbitrarily many columns.

~~~
TheAceOfHearts
I recently had a problem where I had to render tables that could have around
750 columns and 40 rows. I tried it with angular and it would cause everything
to stop for around 90 seconds (that was the initial version with some poorly
written directives inside of it, afterwards I tried making another angular one
and it still took around 10~ seconds if I recall correctly).

I rewrote it in React and got the render time down to around 600ms~ Not GREAT,
but far more acceptable than a couple seconds. It's worth noting that the
react version doesn't do anything fancy, it just has to display the table with
some tooltips. (There's a lot of room for improvement, for example, I could
only render whatever amount of rows are in view and defer rendering the rest.)

I tried Griddle and, if I'm remembering properly, it took around five seconds
to render a 750x40 table. The overhead of all the features they provide made
it a suboptimal solution for us :(.

Unfortunately, I don't think you can optimize horizontal scrolling as easily
as you can optimize vertical scrolling. I looked around as well and was unable
to find a suitable library.

~~~
rch
I was thinking more like 200M rows and 16M columns (sparse - stored as
compressed rows), or perhaps a grid cell for every geohash address. The only
solution I know of is part of custom GUI toolkit rendered with LWJGL in a
desktop app that handled the former case (crashed the first time - worked fine
a week later). Obviously far fewer elements would actually be resident in the
client at any given time.

More common is that I just don't know how many columns there will be (or the
datatype, optimal width, etc) until the user performs a series of actions and
renders a particular view. I've shoehorned a solution into extjs that works
(not scrolling, just dynamically defined), but I'm always looking for options.

~~~
edoloughlin
_I was thinking more like 200M rows and 16M columns_

I don't think a user would be able to meaningfully navigate a table like that
by scrolling it. How would they cognitively track where they are or how to
return to interesting parts of the data? IMHO, you should rethink how to
display and navigate this data. The user would need sophisticated
search/filtering support.

~~~
rch
It's the same as zooming in and out in a google map - if you zoom out, the
server is providing e.g. averaged data. Thinking about trackpad navigation
around a map of tiles (sections of a spreadsheet) is probably more relevant
than scrolling per se.

A side window let's you navigate at a high level (low res) and zoom in to
data-dense areas. Low level / high res navigation in the grid might be used
for exploring data from individual sensors, in context with interpolated
values.

You can keep the scrollbars from becoming irrelevant by scaling to the size of
a logical grid 'neighborhood' of adjacent tiles at the current zoom level.

------
mcx
Wow this is very impressive, definitely will be looking into replacing
DataTables with this.

~~~
nightski
Not bad but when you get deep into it (as any other grid) it lacks a lot of
functionality. For example, it looks like the external data interface only
supports a single sort column...

------
riquito
<too lazy to read the code right now, sorry> why the rows (tr) of the first
table are replaced instead of changing their content (I thought that was the
strong point of react)? (attributes added to tr tags disappear when you click
next, and comparison of the nodes before/after confirm they're different).

------
nijiko
Please, put a link to the github somewhere near the top of the site.

~~~
dengar007
Thanks for the suggestion -- you're right that should definitely be there.
We'll add a github link soon.

------
lerchmo
So many people re-invent this wheel. Please use SlickGrid or Ext.js grid as a
baseline.

~~~
civilian
React's rendering works differently than traditional JS apps. He's not re-
inventing the wheel, he's adapting it to a new vehicle.

Also, hell, if you want to make a good demo project then re-writing something
is a great place to start. A demo project that got me hired was just a
designer and I's answer to Adobe Kuler.

