Show HN: DataSheetGrid, an Airtable-like React component | Hacker News Reader

Show HN: DataSheetGrid, an Airtable-like React component

react-datasheet-grid.netlify.app

342 pointsnick-keller77 comments

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!

Open articleView on HN

The project goal of not competing on features, but allow for easy extension, is absolutely the right decision.

I remember on a project over a decade ago we had to choose the right data grid component to use. Our customers wanted “excel like” functionality. The number of possible features that the different component vendors had to create was so so long. There were easily 200 “little” distinct features, and every customer wanted a different subset of them.

A lot of components are complex (date time pickers for example) but the expectations placed on a grid are on a completely different level.

No one can do it all. Very wise to let the community help.

Would you mind sharing what kind of industry this was in?

This was at head office of a large retail chain. Though it’s also an accurate description for a situation I encountered in the oil and gas industry.

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.

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!

Yeah, column resize is kind of a normal thing; I guess they will add that soon enough.

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.

Fair enough; thanks for the response!

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/

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!

You are very welcome. Had you looked at many founding resources for OSS projects?

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)

Same issue here, very annoying to try and view the page when it’s jerking up and down randomly. iOS safari.

Thanks to everyone who reported this issue, I never encountered this myself. I will fix it soon enough.

Actually looks good for me on FF iOS

That is on webkit engine so would be similar to iOS Safari.

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.

Same thing is happening to me

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!

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.

What happened to DataTables? Anyone remember that thing? The author used to charge for support because the tool was both crappy and ubiquitous

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.

Fortunately that’s mostly been left behind along with jQuery

Or, we've reinvented the wheel once again...

I liked DataTables. Never had a problem with it.

HN: build declarative data bound UIs with libraries like React

Also HN: downvotes comments critical of non-declarative non-data bound UI tools famous for spaghetti

Am I the only one put off by the way the focus rectangle actually moves from one place to another when clicking on a different cell? It's most obvious when you click several cells away and see the blue focus rectangle skitter to its new target.

Google doesn't do this.

This is nice, so well done, but I wish every new thing coming out wasn’t React based. Where can I find cool new things for the web to use in my projects that don’t require the complex insanity of React? Just not a fan of npm installing things…

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

Thanks, maybe I should implement more examples, it looks like this is the most efficient way to help people.

On iOS i can’t seem to paste into the cells, but i can type. Is this intended behavior or a bug? Does the desktop version allow pasting?

Well done! This has some great features people usually ask for, like performance and copy-paste, and the whole UI is super polished.

Thanks, I spent quite some time on the UI / UX to make it smooth and intuitive.

Hangs when you add 9999 etc rows in your demo. Perhaps shift everything to a webworker maybe (unless it's your demo implementation/code external to component & a "real" impl wouldn't do the same).

Seems like this should just be part of HTML spec and implemented in native browser code.

It will take ten years to standardize and find adoption, then still fail to cover some common use cases.

A first step would be to make virtualization part of HTML, that thing is a nightmare.

Agree about virtualization in principle. Not that nightmarish though.

My Sciter supports built-in virtualization out of the box. But I shall admit that this is second approach to the problem.

Currently Sciter's behavior:virtual-list supports as fixed-height items (that's easy) as variable-height items like messages [1] in chats.

API is relatively simple [2]: single event "contentrequired" that virtual-list sends to JS. In response JS shall either append or prepend requested number of DOM elements to the container (a.k.a. sliding window scroller). Example, grid showing 20000 records: https://gitlab.com/sciter-engine/sciter-js-sdk/-/blob/main/s...

And needless to say that this supports animated (a.k.a. kinetic) scroll.

[1] https://sciter.com/behaviorvirtual-list-for-sciter-and-scite... [2] https://docs.sciter.com/docs/behaviors/behavior-virtual-list

Agreed. Virtualization with a table layout, sticky header, native scrolling, and inline content (aka no iframe) it's quite challenging, especially if business-value-wise it's seen as some kind of commodity. Factor in variable height and you're in for big trouble.

Refer to this POC (read: uncompleted unuseful app) to understand what I mean (save for the variable height): https://csv.riiway.com/

I will check this out. I was playing around with https://grid.glideapps.com/ for a project.

Congratulations! How would you compare it to Tabulator?

One difference I can see is that this has spreadsheet-like range selection which is important for some apps.

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.

Im not familiar with tank stack table, but being “headless” does it mean that it could be combined with DataSheetGrid for the UI ?

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

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.

why everyone so mean

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.

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.

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.

I've definitely seen some where people are having a bad day and see it as their chance to unload.

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.

Feedback is a kindness, even when not perceived as nice.

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!

I hope and WANT people to pick through any project I post on here. The folks pointing out flaws are doing OP a service.

This looks really nice, needed it a month ago, I'll try it.

This is nice, good job!

On firefox mobile the headers disappear if i scroll in the component.

Thanks for reporting this issue, I will look into it.

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.

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

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.

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

For UI components, it would be nice if they are published as web components which could be used from any framework or vanilla.

Im the same. I came to comment, bummer its react, just to fire up the frontend nerds.

React is used by 1 in 4 developers world wide ¯\_(ツ)_/¯

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?

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?

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/

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

What would be one of those “sturdy options”, usable from react?

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/

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

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

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.

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.

Does it support multiple users editing same row or column ? And can we see others changes in realtime like cursors of other user ?

Not out of the box, you would need to implement this part yourself (which is not trivial)

Reply on news.ycombinator.com