[{"data":1,"prerenderedAt":462},["ShallowReactive",2],{"project-38228788":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":34,"aspects":35,"strip":46,"post_text":48,"what":49,"said":74,"maker_in_thread":194,"shape":206,"grid":209,"attempts":425,"same_week":426,"maker_shows":40,"maker_hidden":454,"reader_version":455,"card":456},"38228788","DataSheetGrid","An Airtable-like React component","title","Show HN: DataSheetGrid, an Airtable-like React component","https:\u002F\u002Freact-datasheet-grid.netlify.app\u002F","react-datasheet-grid.netlify.app","nick-keller",1699695364,2023,342,77,116,3109,4,"legend","languages","react ui component library","library",[24,25,26,27],"react data grid","spreadsheet component","editable table","react table input","mixed",-0.155,{"positive":31,"neutral":32,"mixed":18,"critical":33},7,10,11,32,{"execution":36,"idea":39,"design":41,"docs":44,"performance":45},{"positive":37,"critical":38},2,6,{"positive":37,"critical":40},3,{"positive":42,"critical":43},0,1,{"positive":42,"critical":42},{"positive":42,"critical":43},[42,42,40,47,47,40,43,43,43,43,42,42,42,43,40,47,40,43,43,42,40,47,43,42,42,42,42,42,47,40,40,42,42,42,40,43,42,47,42,40],5,"I've built and have been maintaining a React component that renders an Airtable \u002F Notion-like component for a few years.\n\nThis can be seen as an \u003Cinput\u002F> where the value is an array of objects. \nYou can then specify any number of columns that are each responsible for rendering an input for a specific key.\n\nThe component handles all accessibility features like keyboard navigation, adding \u002F removing rows, context menu, virtualization...\n\nIf you ever need your users to input long lists of data, this might be a good way to render the form!",{"problem":50,"audience":56,"pricing":61,"motivation":62,"time_to_build":61,"stack":66,"openness":71,"stage":72,"team_size":73},{"value":51,"source":52,"evidence":53},"Lets users input long lists of data in an Airtable\u002FNotion-like grid inside React","maker",[54],{"id":55},"post",{"value":57,"source":58,"evidence":59},"React developers building data-entry forms","inferred",[60],{"id":55},null,{"value":63,"source":52,"evidence":64},"Maker has maintained a React component for a few years for list input",[65],{"id":55},[67],{"value":68,"source":52,"evidence":69},"React",[70],{"id":55},"open_source","launched","solo",{"praise":75,"objections":98,"requests":133,"questions":151,"alternatives":170},[76,88],{"value":77,"source":78,"evidence":79},"Good UX and smooth editing with copy-paste and keyboard navigation","commenter",[80,84],{"id":81,"by":82,"text":83},"38231506","lxe","Well done! This has some great features people usually ask for, like performance and copy-paste, and the whole UI is super polished.",{"id":85,"by":86,"text":87},"38229453","herman_toothrot","I just started using this in a project this week to replace an \"edit each row with a dialog\" interface with an inline table edit mode which makes the editing much quicker (and…",{"value":89,"source":78,"evidence":90},"Spreadsheet-like range selection built in",[91,95],{"id":92,"by":93,"text":94},"38230660","space_explorer","@nick-keller, thanks for making this. I came across it a month ago and it looks very promising. It has range selection out of the box (a pro feature in some alternative…",{"id":96,"by":93,"text":97},"38230801","MUI appears to be more mature but DataSheetGrid has spreadsheet-like range selection out of the box while MUI only provides a beta version under its premium plan. From MUI: \"This…",[99,114,129],{"value":100,"source":78,"evidence":101},"Missing sorting, filtering and other common table features",[102,106,110],{"id":103,"by":104,"text":105},"38229417","promiseofbeans","This is nice, but it's missing a few of the killer features from things like Airtable or MUI DataGrid: sorting\u002Ffiltering, row\u002Fcolumn pinning, aggregation rows, pivoting, etc.…",{"id":107,"by":108,"text":109},"38229209","IceDane","This seems extremely bare-bones and doesn't seem to implement any useful features you might expect from a component like this(sorting, filtering, etc). I think in the vast…",{"id":111,"by":112,"text":113},"38229992","nrjames","Your React component looks really nice. I agree with some of the other commenters that sorting and other basic features really are important. As a side note, I've built various…",{"value":115,"source":78,"evidence":116},"Page layout jumps on some mobile browsers",[117,121,125],{"id":118,"by":119,"text":120},"38229176","timmb","Looks great at first glance… but the page keeps wobbling up and down as the endlessly changing hero text at the top shifts between 3 and 4 lines, so a little hard to read the…",{"id":122,"by":123,"text":124},"38230373","jdjdjdjdjd","Same issue here, very annoying to try and view the page when it’s jerking up and down randomly. iOS safari.",{"id":126,"by":127,"text":128},"38234611","samanator","Same thing is happening to me",{"value":130,"source":78,"evidence":131},"No column resizing",[132],{"id":85,"by":86,"text":87},[134,142,147],{"value":135,"source":78,"evidence":136},"Column resizing",[137,138],{"id":85,"by":86,"text":87},{"id":139,"by":140,"text":141},"38229844","anonzzzies","Yeah, column resize is kind of a normal thing; I guess they will add that soon enough.",{"value":143,"source":78,"evidence":144},"Sorting and filtering",[145,146],{"id":103,"by":104,"text":105},{"id":111,"by":112,"text":113},{"value":148,"source":78,"evidence":149},"More examples and demos",[150],{"id":92,"by":93,"text":94},[152,163],{"value":153,"source":78,"evidence":154},"How does it compare to Tabulator or TanStack Table",[155,159],{"id":156,"by":157,"text":158},"38229496","Keyframe","Congratulations! How would you compare it to Tabulator?",{"id":160,"by":161,"text":162},"38229436","alfonsodev","Im not familiar with tank stack table, but being “headless” does it mean that it could be combined with DataSheetGrid for the UI ?",{"value":164,"source":78,"evidence":165},"Does it support real-time multi-user editing",[166],{"id":167,"by":168,"text":169},"38230044","Jayakumark","Does it support multiple users editing same row or column ? And can we see others changes in realtime like cursors of other user ?",[171,182,190],{"value":172,"source":78,"evidence":173},"AG Grid",[174,178],{"id":175,"by":176,"text":177},"38230615","infocollector","I've been using this component for sometime: https:\u002F\u002Fwww.ag-grid.com\u002Fexample\u002F Perhaps someone who has experience with these components can list some other ones they like that act…",{"id":179,"by":180,"text":181},"38232015","paddy_m","I haven't looked extensively at react-datasheet. It looks like it is trying to build more of a full product than the other data tables. I have used ag-grid extensively, its an…",{"value":183,"source":78,"evidence":184},"TanStack Table",[185,186],{"id":107,"by":108,"text":109},{"id":187,"by":188,"text":189},"38230644","Etheryte","If you want to bring your own UI, TanStack Table (formerly React Table) [0], if you want something that's batteries included, MUI [1][2]. There are of course other options with…",{"value":191,"source":78,"evidence":192},"MUI data grid",[193],{"id":187,"by":188,"text":189},{"comments":195,"answered":37,"key":196},12,[197,200,203],{"id":198,"text":199},"38235205","Hey @anonzzzies, first of all I am still alone working on this project right now. Please see my response above on column resizing, it will not come anytime soon I think.",{"id":201,"text":202},"38235187","Thanks for the feedback. Yes DSG was built to do basic things as well as possible and let users extend it as they see fit. Column resizing has been a long debate, but it goes…",{"id":204,"text":205},"38235218","Agreed, this is the best UI for inputting a lot of repeating data imo. (I am not claiming I invented anything) Thanks for the kind words, funding is not an easy thing with OSS!",{"commenters":207,"max_depth":47,"maker_replies":195,"first_comment_mins":15,"lifespan_hours":208},56,58,[210,214,218,220,222,224,226,229,230,234,236,239,241,244,247,250,251,252,255,257,260,264,267,270,272,275,279,283,286,289,293,295,297,301,305,310,313,315,318,321,325,327,329,331,332,335,337,341,344,347,350,352,355,358,360,363,368,372,376,378,380,383,386,388,391,394,397,401,403,404,407,410,411,412,415,418,421,423],[211,42,42,212,213,42],"38235869","commenter\u002Fpositive\u002Fidea","LeonB",[215,42,42,216,217,42],"38239691","commenter\u002Fneutral\u002Fnone","kickbutt22",[219,42,42,216,213,42],"38241066",[85,43,40,221,86,42],"project\u002Fmixed\u002Fexecution",[139,43,40,223,140,42],"project\u002Fneutral\u002Fexecution",[198,43,42,225,11,43],"maker\u002Fneutral\u002Fdesign",[227,43,47,228,140,42],"38235800","maker\u002Fpositive\u002Fnone",[201,43,42,225,11,43],[231,37,47,232,233,42],"38229940","project\u002Fpositive\u002Fidea","wslh",[204,37,42,235,11,43],"project\u002Fpositive\u002Fdesign",[237,37,40,238,233,42],"38239506","maker\u002Fneutral\u002Fnone",[118,40,43,240,119,42],"project\u002Fcritical\u002Fexecution",[242,40,42,216,243,42],"38229340","metadaemon",[245,40,42,216,246,42],"38229427","eeixlk",[248,40,43,240,249,42],"38229921","ricardonunez",[122,40,43,240,123,42],[126,40,43,240,127,42],[253,40,42,254,11,43],"38235225","maker\u002Fneutral\u002Fexecution",[103,18,43,256,104,42],"project\u002Fcritical\u002Fidea",[258,18,42,259,11,43],"38235259","maker\u002Fneutral\u002Fidea",[261,47,42,262,263,42],"38230144","other\u002Fneutral\u002Fnone","mkoryak",[265,47,42,262,266,42],"38230171","lloydatkinson",[268,47,42,262,269,42],"38230263","chrischattin",[271,47,42,262,266,42],"38235848",[273,47,42,262,274,42],"38232676","8n4vidtmkvmk",[276,38,43,277,278,42],"38237004","project\u002Fcritical\u002Fdesign","gcanyon",[280,31,40,281,282,42],"38236125","project\u002Fmixed\u002Fnone","replwoacause",[92,284,40,285,93,42],8,"project\u002Fmixed\u002Fdocs",[287,284,42,288,11,43],"38235318","maker\u002Fneutral\u002Fdocs",[290,291,40,223,292,42],"38235502",9,"jasonjmcghee",[81,32,47,294,82,42],"project\u002Fpositive\u002Fexecution",[296,32,42,225,11,43],"38235310",[298,33,40,299,300,42],"38230128","project\u002Fneutral\u002Fnone","merelysounds",[302,195,43,303,304,42],"38251742","project\u002Fcritical\u002Fperformance","fennecfoxy",[306,307,40,308,309,42],"38232875",13,"project\u002Fneutral\u002Fidea","daxfohl",[311,307,43,256,312,42],"38233410","incrudible",[314,307,42,262,11,43],"38235303",[316,307,42,262,317,42],"38236309","c-smile",[319,307,42,262,320,42],"38254668","tacone",[322,323,40,299,324,42],"38234118",14,"Dramatize",[156,326,40,299,157,42],15,[328,326,47,294,93,42],"38230705",[107,330,43,256,108,42],16,[160,330,40,299,161,42],[333,330,42,262,334,42],"38229805","ensemblehq",[336,330,42,259,11,43],"38235354",[338,339,42,262,340,42],"38229915",17,"hakhan0301",[342,339,42,262,343,42],"38230017","j4yav",[345,339,42,262,346,42],"38230302","asaddhamani",[348,339,42,262,349,42],"38233976","conductr",[351,339,42,262,343,42],"38234420",[353,339,42,262,354,42],"38230055","tomrod",[356,339,42,262,357,42],"38230377","FBISurveillance",[359,339,42,262,269,42],"38230282",[361,339,42,262,362,42],"38232143","tamimio",[364,365,47,366,367,42],"38242880",18,"project\u002Fpositive\u002Fnone","bluecrab",[369,370,47,366,371,42],"38234234",19,"masaav",[373,374,43,240,375,42],"38230024",20,"lionkor",[377,374,42,254,11,43],"38235327",[111,379,40,281,112,42],21,[381,379,42,216,382,42],"38230198","spacecadet",[384,379,42,216,385,42],"38231114","jitl",[387,379,42,216,382,42],"38232980",[389,379,42,262,390,42],"38230896","ggregoire",[392,379,42,262,393,42],"38231455","erikpukinskis",[395,379,42,262,396,42],"38232166","donjoe",[398,379,40,399,400,42],"38232018","project\u002Fneutral\u002Fdesign","spankalee",[175,402,42,262,176,42],22,[179,402,42,262,180,42],[405,406,43,240,188,42],"38229420",23,[408,406,42,262,409,42],"38229914","luibelgo",[187,406,42,262,188,42],[96,406,47,232,93,42],[413,406,42,414,180,42],"38232606","other\u002Fneutral\u002Fdocs",[416,406,42,262,417,42],"38234247","andix",[419,406,42,420,11,43],"38235447","maker\u002Fpositive\u002Fdesign",[167,422,40,308,168,42],24,[424,422,42,259,11,43],"38235367",[],[427,432,437,441,445,449],{"id":428,"name":429,"points":430,"category":431},"38243949","dpoint",583,"hardware",{"id":433,"name":434,"points":435,"category":436},"38230325","Spray",393,"dev_tools",{"id":438,"name":439,"points":440,"category":20},"38202703","BabaBASIC",234,{"id":442,"name":443,"points":444,"category":436},"38230476","Flyscrape",208,{"id":446,"name":447,"points":448,"category":20},"38276430","Numbat",146,{"id":450,"name":451,"points":452,"category":453},"38236198","bulk_transcribe_youtube_videos_from_playlist",125,"ai",false,"v2",{"id":457,"name":5,"line":6,"ai":454,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":458,"top":18,"kw":459,"maker":11,"domain":10,"tier":19,"attempts":42,"strip":460,"url":9,"mix":461,"praise":77,"objection":100,"sub":21},38228788,-0.15,[24,25,26,27],"0035531111000135311035100000533000310503",[31,32,18,33],1794036644531]