Show HN: A ReactJS Grid Component with infinite scroll, customization, and more

https://dynamictyped.github.io/Griddle/

by joelroxor • 12 years ago

122 39 12 years ago

dynamictyped.github.io

polskibus• 12 years ago

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.

HorizonXP• 12 years ago

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

lerchmo• 12 years ago

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

k__• 12 years ago

I build a bunch of big reports with ExtJS. Its grid-component is just superb. Infinite scrolling just blows up the browser after a while, but not with the ExtJS grid.

Touche• 12 years ago

Using all of ExtJS just for a grid seems like a bit much. It's no surprise that when a new framework comes about there's a landrush to reinvent all of the common components.

civilian• 12 years ago

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.

CD1212• 12 years ago

I have used 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.

leesalminen• 12 years ago

+1 for Reactable.

joelroxor3• 12 years ago

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

mcx• 12 years ago

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

nightski• 12 years ago

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

joewood1972• 12 years ago

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• 12 years ago

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.

joelroxor3• 12 years ago

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.

wuliwong• 12 years ago

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?

y0ghur7_xxx• 12 years ago

"dog" is in the company column - "Dognost" and "Dognosis"

baddox• 12 years ago

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

soperj• 12 years ago

That got me too. I searched Uni and the 2nd entry had it no where in all the (currently) visible columns. I thought I was going crazy.

joelroxor3• 12 years ago

Yeeah, that's a little confusing.

In our case, we needed to filter on hidden columns (as we still cared about the data behind the scenes), but I'm thinking that this is something that should be optional.

riquito• 12 years ago

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

metabrew• 12 years ago

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.

TheAceOfHearts2• 12 years ago

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.

nijiko• 12 years ago

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

dengar0075• 12 years ago

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

rch4• 12 years ago

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

TheAceOfHearts2• 12 years ago

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.

dengar0075• 12 years ago

One of the library authors here -- That sounds like quite the table! I wouldn't doubt that Griddle would have a bit more overhead than the solution you mentioned. I wonder if the performance would be better in this version -- not saying it would necessarily but it may :) We stripped out one of the more complicated parts (the piece that let people specify a callback to obtain external data) to its own component.

Horizontal scrolling definitely sounds like an interesting idea. Seems like it would be feasible to add -- I'll have to think about that a bit more. Also, if the solution you came up with is online anywhere I'd love to see it!

rch4• 12 years ago

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.

prophetjohn• 12 years ago

Angular UI-Grid has horizontal scrolling and is pretty feature-rich overall

http://ui-grid.info/docs/#/tutorial/191_horizontal_scrolling

jstclair• 12 years ago

I've been working on a virtual table (not for React, but KnockoutJS) that's designed around needed to virtual scroll over a large number of columns (as well as rows). Really in-progress code at the moment, but getting there...

[Knockout-Virtual-Grid](https://github.com/jstclair/knockout-virtual-grid)

[Live Demo](http://jsbin.com/roheqo/1/)

You can edit that on JsBin and easily increase the columns to 5-10,000. You may want to look at [editableCell](https://github.com/gnab/editableCell) for some of the keyboard shortcuts.

rch4• 12 years ago

That's really nice work John - thanks!

GreaterFool• 12 years ago

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 ;-(

dengar0075• 12 years ago

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

Kiro• 12 years ago

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• 12 years ago

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.

dengar0075• 12 years ago

One could use React with one of the more established Grid plug-ins -- jQuery grids for instance. (here is an example of someone using KendoUI gauges with React http://ifandelse.com/using-reactjs-and-kendoui-together/)

With Griddle, we were trying to mostly stick with React so it could be used without other libraries (we do currently have a dependency on underscore but we're hoping to remove that at some point in the future as well).

Show HN: A ReactJS Grid Component with infinite scroll, customization, and more

Related Stories