Griddle

Dev tools

ui component library

SHOW HN2015

Griddle

A ReactJS Grid Component with infinite scroll, customization, and more

dynamictyped.github.io

#react grid#react data table#infinite scroll#javascript grid

122points
39comments
#193of 2,565 in 2015
Top 8%of 2015 by points

How HN took it

CuriousMostly questions and neutral comments

2 positive, 12 neutral or asking, 0 mixed, 10 critical, out of 24 comments about the project. Thread score -0.25.

Performance: 0 for, 4 againstExecution: 0 for, 3 againstIdea: 0 for, 3 against

The thread, comment by comment

Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.

positive neutral or mixed critical about another commenter or something else the maker

What HN said

What people liked

  • Very customizable and useful sorting and search

    From 1 comment
    • 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…
      CD1212 on HN
  • Impressive and likely to replace existing React tables

    From 2 comments
    • Very nice. I'll likely be replacing my current React table in my project with this!
      HorizonXP on HN
    • Wow this is very impressive, definitely will be looking into replacing DataTables with this.
      mcx on HN

Objections

  • Infinite scroll does not remove DOM nodes, so it is not true infinite scroll

    From 3 comments
    • 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…
      joewood1972 on HN
    • 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`…
      chadscira on HN
    • 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…
      joelroxor on HN
  • Search matches hidden columns, which is confusing

    From 3 comments
    • 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"…
      wuliwong on HN
    • 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`:…
      baddox on HN
    • 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.
      soperj on HN
  • Hidden column visibility option does not work

    From 2 comments
    • 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…
      GreaterFool on HN
    • Sorry about that. There'll be a fix in the .1 release (which won't be too far out)
      dengar007 on HN
  • Slow rendering with many columns

    From 2 comments
    • 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…
      TheAceOfHearts on HN
    • 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…
      dengar007 on HN

Requests

  • Support horizontal scrolling

    From 1 comment
    • How about infinite horizontal scroll? I haven't seen any JavaScript data grids that are designed to handle arbitrarily many columns.
      rch on HN
  • Server-side paging integrated with scrolling

    From 1 comment
    • 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…
      joewood1972 on HN
  • Link to GitHub on the site

    From 1 comment
    • Please, put a link to the github somewhere near the top of the site.
      nijiko on HN
  • Support variable row heights

    From 1 comment
    • 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…
      metabrew on HN

Questions

  • Why rows are replaced instead of updated in React

    From 1 comment
    • <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)?…
      riquito on HN
  • Does it support arbitrary row heights

    From 1 comment
    • 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…
      metabrew on HN

Alternatives named

  • Reactable

    From 2 comments
    • 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…
      CD1212 on HN
    • +1 for Reactable.
      leesalminen on HN
  • SlickGrid

    From 1 comment
    • So many people re-invent this wheel. Please use SlickGrid or Ext.js grid as a baseline.
      lerchmo on HN
  • Ext.js grid

    From 2 comments
    • So many people re-invent this wheel. Please use SlickGrid or Ext.js grid as a baseline.
      lerchmo on HN
    • 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.
      k__ on HN
  • Angular UI-Grid

    From 1 comment
    • Angular UI-Grid has horizontal scrolling and is pretty feature-rich overall http://ui-grid.info/docs/#/tutorial/191_horizontal_scrolling
      prophetjohn on HN
  • DataTables

    From 1 comment
    • Wow this is very impressive, definitely will be looking into replacing DataTables with this.
      mcx on HN

Category, keywords, summaries and labels on this page were made by AI (Thread Reader v2) and not checked by hand. Each point links to the comments it came from.

Add a badge to your READMEShown on HackerShow
[![Shown on HackerShow](https://hackershow.org/badge.svg)](https://hackershow.org/show/8918463)