[{"data":1,"prerenderedAt":360},["ShallowReactive",2],{"project-8918463":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":35,"aspects":36,"strip":44,"post_text":47,"what":48,"said":87,"maker_in_thread":224,"shape":233,"grid":237,"attempts":319,"same_week":324,"maker_shows":31,"maker_hidden":353,"reader_version":354,"card":355},"8918463","Griddle","A ReactJS Grid Component with infinite scroll, customization, and more","title","Show HN: A ReactJS Grid Component with infinite scroll, customization, and more","https:\u002F\u002Fdynamictyped.github.io\u002FGriddle\u002F","dynamictyped.github.io","joelroxor",1421778036,2015,122,39,193,2565,8,"notable","dev_tools","ui component library","library",[24,25,26,27],"react grid","react data table","infinite scroll","javascript grid","curious",-0.25,{"positive":31,"neutral":32,"mixed":33,"critical":34},2,12,0,10,24,{"execution":37,"performance":39,"idea":41,"design":42,"docs":43},{"positive":33,"critical":38},3,{"positive":33,"critical":40},4,{"positive":33,"critical":38},{"positive":33,"critical":33},{"positive":33,"critical":33},[38,33,33,38,33,38,45,33,45,38,45,45,45,33,45,38,46,33,33,38,38,45,38,33,33,33,38,33,33,33,46,45,38,38,38,45,45,33,33],1,5,null,{"problem":47,"audience":49,"pricing":47,"motivation":61,"time_to_build":47,"stack":66,"openness":84,"stage":85,"team_size":86},{"value":50,"source":51,"evidence":52},"React developers building data tables","inferred",[53,57],{"id":54,"by":55,"text":56},"8918653","HorizonXP","Very nice. I'll likely be replacing my current React table in my project with this!",{"id":58,"by":59,"text":60},"8922955","dengar007","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…",{"value":62,"source":63,"evidence":64},"Build a React grid that works without other libraries.","commenter",[65],{"id":58,"by":59,"text":60},[67,73,80],{"value":68,"source":69,"evidence":70},"ReactJS","maker",[71],{"id":72},"post",{"value":74,"source":63,"evidence":75},"JavaScript",[76],{"id":77,"by":78,"text":79},"8919535","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`:…",{"value":81,"source":63,"evidence":82},"underscore.js",[83],{"id":58,"by":59,"text":60},"open_source","beta","unknown",{"praise":88,"objections":104,"requests":151,"questions":177,"alternatives":189},[89,96],{"value":90,"source":63,"evidence":91},"Very customizable and useful sorting and search",[92],{"id":93,"by":94,"text":95},"8918782","CD1212","I have used Reactable (https:\u002F\u002Fgithub.com\u002Fglittershark\u002Freactable) in a recent project and was extremely happy with it. The design was very customizable and the sorting \u002F search…",{"value":97,"source":63,"evidence":98},"Impressive and likely to replace existing React tables",[99,100],{"id":54,"by":55,"text":56},{"id":101,"by":102,"text":103},"8918856","mcx","Wow this is very impressive, definitely will be looking into replacing DataTables with this.",[105,119,131,141],{"value":106,"source":63,"evidence":107},"Infinite scroll does not remove DOM nodes, so it is not true infinite scroll",[108,112,116],{"id":109,"by":110,"text":111},"8919231","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…",{"id":113,"by":114,"text":115},"8919399","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`…",{"id":117,"by":11,"text":118},"8920342","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…",{"value":120,"source":63,"evidence":121},"Search matches hidden columns, which is confusing",[122,126,127],{"id":123,"by":124,"text":125},"8919344","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\"…",{"id":77,"by":78,"text":79},{"id":128,"by":129,"text":130},"8919994","soperj","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.",{"value":132,"source":63,"evidence":133},"Hidden column visibility option does not work",[134,138],{"id":135,"by":136,"text":137},"8922018","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…",{"id":139,"by":59,"text":140},"8922594","Sorry about that. There'll be a fix in the .1 release (which won't be too far out)",{"value":142,"source":63,"evidence":143},"Slow rendering with many columns",[144,148],{"id":145,"by":146,"text":147},"8921270","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…",{"id":149,"by":59,"text":150},"8921303","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…",[152,159,163,170],{"value":153,"source":63,"evidence":154},"Support horizontal scrolling",[155],{"id":156,"by":157,"text":158},"8921240","rch","How about infinite horizontal scroll? I haven't seen any JavaScript data grids that are designed to handle arbitrarily many columns.",{"value":160,"source":63,"evidence":161},"Server-side paging integrated with scrolling",[162],{"id":109,"by":110,"text":111},{"value":164,"source":63,"evidence":165},"Link to GitHub on the site",[166],{"id":167,"by":168,"text":169},"8920562","nijiko","Please, put a link to the github somewhere near the top of the site.",{"value":171,"source":63,"evidence":172},"Support variable row heights",[173],{"id":174,"by":175,"text":176},"8920171","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…",[178,185],{"value":179,"source":63,"evidence":180},"Why rows are replaced instead of updated in React",[181],{"id":182,"by":183,"text":184},"8919661","riquito","\u003Ctoo 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)?…",{"value":186,"source":63,"evidence":187},"Does it support arbitrary row heights",[188],{"id":174,"by":175,"text":176},[190,198,205,213,220],{"value":191,"source":63,"evidence":192},"Reactable",[193,194],{"id":93,"by":94,"text":95},{"id":195,"by":196,"text":197},"8918841","leesalminen","+1 for Reactable.",{"value":199,"source":63,"evidence":200},"SlickGrid",[201],{"id":202,"by":203,"text":204},"8918668","lerchmo","So many people re-invent this wheel. Please use SlickGrid or Ext.js grid as a baseline.",{"value":206,"source":63,"evidence":207},"Ext.js grid",[208,209],{"id":202,"by":203,"text":204},{"id":210,"by":211,"text":212},"8918680","k__","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.",{"value":214,"source":63,"evidence":215},"Angular UI-Grid",[216],{"id":217,"by":218,"text":219},"8921273","prophetjohn","Angular UI-Grid has horizontal scrolling and is pretty feature-rich overall http:\u002F\u002Fui-grid.info\u002Fdocs\u002F#\u002Ftutorial\u002F191_horizontal_scrolling",{"value":221,"source":63,"evidence":222},"DataTables",[223],{"id":101,"by":102,"text":103},{"comments":38,"answered":45,"key":225},[226,229,232],{"id":227,"text":228},"8920351","Ah, awesome - I'll be giving that a try.",{"id":230,"text":231},"8920309","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…",{"id":117,"text":118},{"commenters":234,"max_depth":46,"maker_replies":38,"first_comment_mins":235,"lifespan_hours":236},29,14,27,[238,240,242,244,246,249,250,252,254,257,258,261,263,264,266,267,268,271,275,278,280,282,283,284,286,289,291,292,295,297,299,301,304,305,308,311,312,313,316],[93,33,38,239,94,33],"project\u002Fneutral\u002Fnone",[195,33,33,241,196,33],"commenter\u002Fneutral\u002Fnone",[227,33,33,243,11,45],"other\u002Fneutral\u002Fnone",[123,45,38,245,124,33],"project\u002Fneutral\u002Fexecution",[247,45,33,241,248,33],"8919497","y0ghur7_xxx",[77,45,38,245,78,33],[128,45,45,251,129,33],"project\u002Fcritical\u002Fexecution",[230,45,33,253,11,45],"maker\u002Fneutral\u002Fexecution",[255,31,45,251,256,33],"8918549","polskibus",[174,38,38,245,175,33],[259,38,45,260,146,33],"8921243","project\u002Fcritical\u002Fperformance",[109,40,45,262,110,33],"project\u002Fcritical\u002Fidea",[113,40,45,260,114,33],[117,40,33,265,11,45],"maker\u002Fneutral\u002Fperformance",[135,46,45,251,136,33],[139,46,38,253,59,33],[54,269,46,270,55,33],6,"project\u002Fpositive\u002Fnone",[272,273,33,243,274,33],"8922067",7,"Kiro",[276,273,33,243,277,33],"8922129","richardolsson",[58,273,38,279,59,33],"maker\u002Fneutral\u002Fdesign",[156,18,38,281,157,33],"project\u002Fneutral\u002Fdesign",[145,18,45,260,146,33],[149,18,38,265,59,33],[285,18,33,243,157,33],"8921659",[287,18,33,243,288,33],"8921947","edoloughlin",[290,18,33,243,157,33],"8923516",[217,18,38,281,218,33],[293,18,33,243,294,33],"8922079","jstclair",[296,18,33,243,157,33],"8925401",[298,18,33,243,59,33],"8925899",[101,300,46,270,102,33],9,[302,300,45,262,303,33],"8919029","nightski",[182,34,38,245,183,33],[167,306,38,307,168,33],11,"project\u002Fneutral\u002Fdocs",[309,306,38,310,59,33],"8921324","maker\u002Fneutral\u002Fdocs",[202,32,45,262,203,33],[210,32,45,260,211,33],[314,32,33,243,315,33],"8918706","Touche",[317,32,33,243,318,33],"8918815","civilian",[320,323],{"id":321,"t":322,"points":40,"comments":45},"8109143",1406737463,{"id":4,"t":12,"points":14,"comments":15},[325,330,334,339,343,348],{"id":326,"name":327,"points":328,"category":329},"8907801","dogmedicationdb",252,"infrastructure",{"id":331,"name":332,"points":333,"category":329},"8923092","switcher",165,{"id":335,"name":336,"points":337,"category":338},"8893593","duoco.de",155,"languages",{"id":340,"name":341,"points":342,"category":338},"8911217","Silicon",140,{"id":344,"name":345,"points":346,"category":347},"8893238","Timeline.com",123,"productivity",{"id":349,"name":350,"points":351,"category":352},"8923824","tld-list.com",101,"web_saas",false,"v2",{"id":356,"name":5,"line":6,"ai":353,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":29,"top":18,"kw":357,"maker":11,"domain":10,"tier":19,"attempts":31,"strip":358,"url":9,"mix":359,"praise":90,"objection":106,"sub":21},8918463,[24,25,26,27],"300303101311101350033130003000513331100",[31,32,33,34],1794036527517]