[HN Gopher] Show HN: DataSheetGrid, an Airtable-like React compo...
___________________________________________________________________
Show HN: DataSheetGrid, an Airtable-like React component
I've built and have been maintaining a React component that renders
an Airtable / Notion-like component for a few years. This can be
seen as an <input/> where the value is an array of objects. You can
then specify any number of columns that are each responsible for
rendering an input for a specific key. The component handles all
accessibility features like keyboard navigation, adding / removing
rows, context menu, virtualization... If you ever need your users
to input long lists of data, this might be a good way to render the
form!
Author : nick-keller
Score : 250 points
Date : 2023-11-11 09:36 UTC (13 hours ago)
(HTM) web link (react-datasheet-grid.netlify.app)
(TXT) w3m dump (react-datasheet-grid.netlify.app)
| timmb wrote:
| 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 rest of the
| page. (On Firefox iOS)
| metadaemon wrote:
| Actually looks good for me on FF iOS
| eeixlk wrote:
| That is on webkit engine so would be similar to iOS Safari.
| ricardonunez wrote:
| FF IOS here, it has horizontal scrolling at least in one
| section and moves a bit strange on vertical I bribe due to
| the same issue.
| jdjdjdjdjd wrote:
| Same issue here, very annoying to try and view the page when
| it's jerking up and down randomly. iOS safari.
| samanator wrote:
| Same thing is happening to me
| nick-keller wrote:
| Thanks to everyone who reported this issue, I never encountered
| this myself. I will fix it soon enough.
| IceDane wrote:
| 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 majority of
| cases, I'd want to use something like tanstack table instead.
| Maybe this is OK for very simple scenarios, but my experience is
| that as soon as you need some sort of table/datagrid, you'll want
| more than the basics.
| alfonsodev wrote:
| Im not familiar with tank stack table, but being "headless"
| does it mean that it could be combined with DataSheetGrid for
| the UI ?
| ensemblehq wrote:
| Not sure if DataSheetGrid is purely a UI component as the
| demo seems to indicate otherwise but tankstacktables just
| provide table functionalities without a UI. You select the
| framework you need (i.e. React, Vue, etc.) and the UI
| framework to overlay on top of it (i.e. react-bootstrap,
| etc.)
| nick-keller wrote:
| DSG is not meant to manage your data like tanstack (filtering,
| sorting, paginating...), it is meant to give your users the
| best possible UI / UX to edit data (which tanstack does not do
| since it is headless). But those two work very well together
| actually, I should probably write an example.
| promiseofbeans wrote:
| This is nice, but it's missing a few of the killer features from
| things like Airtable or MUI DataGrid: sorting/filtering,
| row/column pinning, aggregation rows, pivoting, etc.
|
| Good concept though, and I wish you the best of luck building a
| proper OSS competitor to the propriety components!
| nick-keller wrote:
| Thanks for the feedback, DSG was not built to compete on
| features, it was built to have the best UX/UI possible and be
| extensible. So you would have to implement those parts
| yourself.
|
| In an ideal world, people would start making npm packages for
| each big feature, but the project would need a lot more
| attention for that.
| Etheryte wrote:
| Looks interesting, but the first example on the getting started
| page [0] has a bug which does not instil confidence (there is a
| 1px scroll on a table that should not have one). At this point,
| tables have been solved so many times that there's plenty of
| sturdy options to pick from, what sets yours apart from the rest?
|
| [0] https://react-datasheet-grid.netlify.app/docs/getting-
| starte...
| luibelgo wrote:
| What would be one of those "sturdy options", usable from react?
| Etheryte wrote:
| 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
| either close or full feature parity, but these are the two I
| see most often with least pain across different companies.
| While we're on the topic of recommendations, avoid any- and
| everything by Telerik.
|
| [0] https://tanstack.com/table/
|
| [1] https://mui.com/material-ui/react-table/
|
| [2] https://mui.com/x/react-data-grid/
| space_explorer wrote:
| 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 feature is not stable yet, meaning that its
| APIs may suffer breaking changes. While in development, all
| props and methods related to cell selection must be
| prefixed with unstable".
|
| This feature tends to be pro or unavailable across options
| I've seen so it is great that DataSheetGrid has rolled out
| a working implementation.
|
| Edit: Changed 'its pro plan' to 'its premium plan'.
| paddy_m wrote:
| I really liked seeing this page on tanstack's website
| explaining their collaboration with ag-grid. Better
| wayfinding to the proper project is a huge blindspot for
| most open source projects. I built a page specifically
| listing related projects... because my thought is, if
| someone finds that page, and I haven't helped them, they
| should find the project that works for them.
|
| https://tanstack.com/blog/ag-grid-partnership
| andix wrote:
| Tanstack table is great, can recommend it. It can be used
| for any kind of table. But it's a headless component, so
| there is quite some work involved in creating something
| useful.
|
| But it's a great middleware that can be wired between the
| data and some kind of tabular UI react component.
| nick-keller wrote:
| Interesting, what is your OS / browser? I cannot reproduce it
| myself...
|
| To answer your second question, I believe DSG has a better UI /
| UX than the competition and is simpler to use and extend.
| herman_toothrot wrote:
| 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 allows pasting
| rows, etc.). Worked great out of the box-- I did write my own
| column component to handle validation with a popover in each
| cell.
|
| Two things I ran into:
|
| - Doesn't have column resizing built in (not a deal breaker for
| my use)
|
| - I wanted to disable the "select row or column by clicking in
| header or gutter" functionality. Not sure it's a common enough
| need to incorporate into the library.
| anonzzzies wrote:
| Yeah, column resize is kind of a normal thing; I guess they
| will add that soon enough.
| nick-keller wrote:
| 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.
| nick-keller wrote:
| 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 against the
| mindset of building a simple tool that is easy to use. I feel
| like the responsive column sizing offers a better compromise.
|
| But your second idea is actually one I could implement easily!
| Keyframe wrote:
| Congratulations! How would you compare it to Tabulator?
| space_explorer wrote:
| One difference I can see is that this has spreadsheet-like
| range selection which is important for some apps.
| hakhan0301 wrote:
| why everyone so mean
| j4yav wrote:
| For good or for bad, its part of HN culture when someone shares
| a personal project. Most people I think know to take it all
| with a grain of salt, there's often good feedback amongst the
| unconstructive or plain wrong - see
| https://news.ycombinator.com/item?id=9224 for a classic
| example.
| asaddhamani wrote:
| I have the perception that HN is quite ruthless with the
| feedback. I appreciate constructive criticism, and HN is
| mostly constructive and self moderates against non-
| constructive criticisms, but for me, HN is the platform that
| gives me the highest anxiety when I think about launching
| something - more than product hunt.
|
| Edit: and I'd be remiss if I didn't mention that if you only
| give someone encouraging words and positive feedback , you
| are doing them a disservice by stunting their growth or
| sending them down a wrong path.
| conductr wrote:
| I've not seen much on HN I'd consider ruthless. It's just
| not sugar coated. Places like product hunt are pure sugar
| IMO.
| j4yav wrote:
| I've definitely seen some where people are having a bad
| day and see it as their chance to unload.
| tomrod wrote:
| Feedback is a kindness, even when not perceived as nice.
| FBISurveillance wrote:
| This. I'm giving feedback, it's because I care about the
| person and this community. It could be considered mean by
| some but I genuinely do my best to deliver it in good faith.
| I also understand that "my best" could be not good enough
| though!
| chrischattin wrote:
| I hope and WANT people to pick through any project I post on
| here. The folks pointing out flaws are doing OP a service.
| tamimio wrote:
| I would rather to have mean, direct feedbacks than sugar
| coating it, and not just in HN but even IRL, things is, it's
| kind of known here but when I provide the same level of honesty
| at work, mostly taken as an attack because of the fake
| positivity and ultra sensitivity in nowadays work environments.
| wslh wrote:
| My memories of DataSheetGrid components in general is that they
| are the holy grail of UX/UIs but they are really complex to have
| all details included. I hope you all the success (and funding). I
| saw the story repeating itself beyond the base plaform used: Web
| or Desktop. Having fond memories of stuff like [1].
|
| [1] https://www.infragistics.com/
| nick-keller wrote:
| 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!
| nrjames wrote:
| 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 web-based tools
| throughout my career and dabble with it as a hobby now. While I
| understand that React (and Vue, Svelte, etc) are taking over the
| front-end world, I tend to stick with vanilla JS for rapid
| prototyping and fun projects. It's more stable for somebody like
| me. The frontend JS frameworks evolve so quickly that it's head-
| spinning. I guess what I'm trying to say - and again, this is
| just from my own perspective - I really find it to be a breath of
| fresh air when components like this offer easy instructions for a
| vanilla JS integration. It allows me to try it out quickly
| without setting up all of the tooling for a full frontend. Maybe
| I'm just a dinosaur that needs to get on the React bandwagon.
| spacecadet wrote:
| Im the same. I came to comment, bummer its react, just to fire
| up the frontend nerds.
| jitl wrote:
| React is used by 1 in 4 developers world wide -\\_(tsu)_/-
| spacecadet wrote:
| Perfectly valid reason to do as someone else does lol
|
| Im feeling the classic saying coming out uncontrollably,
| but if 3 out of 4 react developers told you to also walk
| off a cliff?
| ggregoire wrote:
| > The frontend JS frameworks evolve so quickly that it's head-
| spinning.
|
| They really don't, tho.
|
| React took over the front-end world 8 years ago or so. It
| barely evolved since then. I read the doc a second time 4 years
| ago when they introduced React Hooks.
| erikpukinskis wrote:
| Yeah, pretty much we had vanilla JS, then jQuery, then
| Webpack and React. TypeScript has probably crossed that
| threshold maybe in the last 12 months.
|
| I'm trying to think of other frontend technologies that were
| truly dominant that went away. Maybe SCSS? But TBH if you're
| still using SCSS with React today that's not a bad stack.
| There's no consensus on what the successor to SCSS is,
| Tailwind is a wild experiment. The styled components model is
| still being refined.
|
| Things like Next, Radix, MUI, etc... these are probably all
| best skipped. They are highly experimental, and I've used all
| of them in production on major web apps and they're half
| baked. I avoid them.
|
| It's easy to get sucked into the trends... I love Vite for
| example, but anyone who ahas stuck with Webpack made the
| right call... Vite is still working out key points of
| integration like Jest.
|
| If you take JavaScript Twitter seriously, you'd think you
| HAVE to learn React Server Components. But it's not even out
| of beta yet, and debates are raging about whether it's even a
| good separation of concerns.
|
| The key is: wait until things are _actually_ dominant before
| jumping ship. If you do that, you'll be fine.
| donjoe wrote:
| ... besides the change towards hooks and the react dev team
| which does not seem to be clear about how to best use them.
|
| The new beta docs just recently changed again removing old
| best practices concerning dependency arrays in useEffect
| hooks in favor of a new potential hook called useEffectEvent
| (which is still experimental).
|
| I love to work with react. However, it takes _a lot of time_
| onboarding new engineers for tasks which are a bit more
| complicated in nature. Also, using hooks the wrong way can
| really mess up your product big times.
|
| It would be nice to see react moving in a direction which is
| by design/architecture less error-prone.
| spankalee wrote:
| For UI components, it would be nice if they are published as
| web components which could be used from any framework or
| vanilla.
| lionkor wrote:
| On firefox mobile the headers disappear if i scroll in the
| component.
| nick-keller wrote:
| Thanks for reporting this issue, I will look into it.
| Jayakumark wrote:
| Does it support multiple users editing same row or column ? And
| can we see others changes in realtime like cursors of other user
| ?
| nick-keller wrote:
| Not out of the box, you would need to implement this part
| yourself (which is not trivial)
| mkoryak wrote:
| What happened to DataTables? Anyone remember that thing? The
| author used to charge for support because the tool was both
| crappy and ubiquitous
| lloydatkinson wrote:
| Fortunately that's mostly been left behind along with jQuery
| chrischattin wrote:
| Or, we've reinvented the wheel once again...
|
| I liked DataTables. Never had a problem with it.
| 8n4vidtmkvmk wrote:
| I still use it. And it's still pretty amazing. That author has
| been maintaining it for over 10 years with perfect backwards
| compatibility. I've wrapped it in react now. And then rewrote
| it in react but kept the wire API so I didn't have to update my
| server endpoints.
| infocollector wrote:
| I've been using this component for sometime:
|
| https://www.ag-grid.com/example/
|
| Perhaps someone who has experience with these components can list
| some other ones they like that act like the one posted?
| paddy_m wrote:
| 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 impressive product.
| Some pieces are a little awkward to use, particularly auto-
| sizing. But generally ag-grid has thought of most functionality
| and has a solution. The creator of ag-grid had a great
| interview on Javascript Jabber [1].
|
| The other serious data table component that I have seen is
| FinOS Perspective [2]. This is extremely high performance, also
| more specialized and probably harder to customize. I think
| Perspective renders to a canvas element from Rust/C++ compiled
| to WASM (not 100% sure). It is also made for streaming updates.
|
| AG-Grid supports streaming updates... but only in the
| commercial version.
|
| Eventually the data model for these types of tables becomes
| tricky. I will be investigating parquet-wasm for my use case.
| Hit me up if you want to collaborate.
|
| [1] https://blog.ag-grid.com/javascript-jabber-podcast/
|
| [2] https://perspective.finos.org/
| space_explorer wrote:
| @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 solutions) and you can
| customize cells. However, the best example of what one could
| create with this is shown as a screenshot in the 'customizable'
| section of the landing page but there is no demo showing that
| this is actually possible. I think I struggled to create custom
| headers and header menus with this so I moved to AG-Grid and
| implemented my own range selection.
| nick-keller wrote:
| Thanks, maybe I should implement more examples, it looks like
| this is the most efficient way to help people.
| lxe wrote:
| Well done! This has some great features people usually ask for,
| like performance and copy-paste, and the whole UI is super
| polished.
| nick-keller wrote:
| Thanks, I spent quite some time on the UI / UX to make it
| smooth and intuitive.
| daxfohl wrote:
| Seems like this should just be part of HTML spec and implemented
| in native browser code.
| incrudible wrote:
| It will take ten years to standardize and find adoption, then
| still fail to cover some common use cases.
| nick-keller wrote:
| A first step would be to make virtualization part of HTML, that
| thing is a nightmare.
| Dramatize wrote:
| I will check this out. I was playing around with
| https://grid.glideapps.com/ for a project.
| masaav wrote:
| This is nice, good job!
___________________________________________________________________
(page generated 2023-11-11 23:00 UTC)