return to table of content

Show HN: DataSheetGrid, an Airtable-like React component

hakhan0301
8 replies
2d4h

why everyone so mean

j4yav
3 replies
2d4h

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 - seehttps://news.ycombinator.com/item?id=9224for a classic example.

asaddhamani
2 replies
2d3h

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
1 replies
1d21h

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
0 replies
1d20h

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

tomrod
1 replies
2d3h

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

FBISurveillance
0 replies
2d3h

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!

tamimio
0 replies
2d

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.

chrischattin
0 replies
2d3h

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

nrjames
7 replies
2d4h

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
2 replies
2d3h

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

jitl
1 replies
2d1h

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

spacecadet
0 replies
1d22h

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
2 replies
2d2h

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
0 replies
2d1h

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
0 replies
2d

... 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
0 replies
2d

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

timmb
6 replies
2d6h

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
2 replies
2d5h

Actually looks good for me on FF iOS

ricardonunez
0 replies
2d4h

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.

eeixlk
0 replies
2d5h

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

samanator
0 replies
1d19h

Same thing is happening to me

nick-keller
0 replies
1d18h

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

jdjdjdjdjd
0 replies
2d3h

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

Etheryte
6 replies
2d5h

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
4 replies
2d4h

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

Etheryte
3 replies
2d2h

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
0 replies
2d2h

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
0 replies
1d23h

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
0 replies
1d20h

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
0 replies
1d18h

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.

mkoryak
4 replies
2d3h

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

lloydatkinson
2 replies
2d3h

Fortunately that’s mostly been left behind along with jQuery

lloydatkinson
0 replies
1d17h

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

chrischattin
0 replies
2d3h

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

I liked DataTables. Never had a problem with it.

8n4vidtmkvmk
0 replies
1d23h

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.

herman_toothrot
4 replies
2d5h

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
2 replies
2d4h

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

nick-keller
1 replies
1d18h

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.

anonzzzies
0 replies
1d17h

Fair enough; thanks for the response!

nick-keller
0 replies
1d18h

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!

daxfohl
3 replies
1d22h

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

nick-keller
1 replies
1d18h

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

c-smile
0 replies
1d15h

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

incrudible
0 replies
1d22h

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

IceDane
3 replies
2d6h

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
1 replies
2d5h

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

ensemblehq
0 replies
2d4h

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
0 replies
1d18h

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.

wslh
2 replies
2d4h

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
1 replies
1d18h

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!

wslh
0 replies
1d4h

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

LeonB
2 replies
1d17h

The project goal ofnotcompeting 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.

kickbutt22
1 replies
1d4h

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

LeonB
0 replies
1d1h

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.

space_explorer
1 replies
2d2h

@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
0 replies
1d18h

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

promiseofbeans
1 replies
2d5h

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
0 replies
1d18h

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.

lxe
1 replies
2d1h

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
0 replies
1d18h

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

lionkor
1 replies
2d4h

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

nick-keller
0 replies
1d18h

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

infocollector
1 replies
2d2h

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
0 replies
2d

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/

Keyframe
1 replies
2d5h

Congratulations! How would you compare it to Tabulator?

space_explorer
0 replies
2d2h

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

Jayakumark
1 replies
2d3h

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
0 replies
1d18h

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

replwoacause
0 replies
1d16h

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…

masaav
0 replies
1d20h

This is nice, good job!

jasonjmcghee
0 replies
1d18h

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?

gcanyon
0 replies
1d13h

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.

fennecfoxy
0 replies
1h7m

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

bluecrab
0 replies
22h34m

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

Dramatize
0 replies
1d20h

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