15 ms·
Show HN: React Spreadsheet 2
- rowsncolumns 3y agoCreate your own Google sheets like Spreadsheet UI in your application using RowsnColumns Spreadsheet 2. Declaratively render cells, embed external content, use custom formulas, collaborate with other users all using composable ReactJS UI components. https://www.rowsncolumns.app/ https://www.rowsncolumns.app/
- mattlondon 3y agoCurious: since you are rendering everything via canvas, how do you do accessibility?
- rowsncolumns 3y agoFor screen readers, we are planning to add table element with plain text content, with aria regions. We offer support for keyboard shortcuts and navigation, and our platform is natively compatible with both light and dark modes. We also provide the option for developers to customise themes, ensuring optimal accessibility for users with low/tunnel vision.
- torunar 3y agoIs it able to handle tables with 1,000,000+ rows?
- rowsncolumns 3y agoI think the question can be will a user wants to see 1M rows at a time. Probably no. Spreadsheet uses virtualisation to display data, ie only data viewable in a Row x Column viewport is displayed. This improves rendering performance. Data performance can be improved by 1. Lazy loading data or Infinite scrolling. We have a built-in async hook that does this. 2. Only save pointers to data that is being displayed. So if you have 1M rows, on the JavaScript side, you only load 100 rows in memory and when user scrolls, you can replace this rows with new data. This will make the browser happy. 3. Streaming data from the server similar to google sheets. But to answer your question, we have a Max row limit of 1_048_576 and max column limit of 16_384
- mhitza 3y agoI'm checking it out on my phone and scrolling through the interface is pretty choppy, but rather fluid in a Google sheet. Maybe you might be able to further tweak the virtual row rendering? Props for the fact that when I scroll a bit faster things don't disappear, which I've seen before in SPAs with infinite scroll.
- cdmckay 3y agoFeels pretty smooth on my iPhone 13.
- rowsncolumns 3y agoCould you share which phone you were using? We use virtual rendering at both row and column level.
- mhitza 3y agoI'm on a Fairphone 4 with Firefox, but I guess it would be the same on any midrange phone.
- rowsncolumns 3y agoGot it. I will try to do some performance testing on midrange phones and mobile firefox. Thanks
- wouldbecouldbe 3y agoThe beauty of excel is you can load Million rows and do computations on them.
- leptons 3y agoExcel is probably the wrong tool for that job. At the scale of a million rows or more, this is probably better done by a real database and programming language.
- baz00 3y agoOh you’re one of those users. Prepares LART.
- _istanbul_ 3y agoI don't understand your comment. It's not far fetched to have millions of rows to handle. I myself have about 12 million rows (notes mainly), although I don't load everything at the same time, so maybe you're referring to that aspect?
- baz00 3y agoIt's pushing the boundaries of a spreadsheet's practical usability to be honest. I would not use it for more than a few hundred at most. In fact I just checked my largest sheet is 292 rows. Anything larger goes in anything else! Usually I use SQLite for local storage data like that now. A funny problem I had a few years back was a company with users keeping 200 meg+ Excels sheet on their desktops. It took them forever to log off every day because the profile was copied back to the server.
- eviks 3y agoHow to you get immediate feedback while doing edits/calculations and also collaborate after you stash your data in anything else?
- torunar 3y agoOh yes, I’m one of those users (and who are “those”? Lizard people?). At least once a week I need to operate datasets that have hundreds of thousands of rows, and while accessing them is not a problem, batch computations can be tricky.
- arendtio 3y agoActually, this is an important comment. Building a spreadsheet with web technology is not that difficult. However, building one with more than just the most basic features, which performs well, once the data grows, is a surprisingly hard task. To give an example of what makes it so difficult: Some browsers (e.g. Chrome) seem to have special optimizations for rendering tables. So performance-wise it makes a difference if you use table-tr-td-tags or div-tags within your DOM.
- ukuina 3y agoWhich approach is more optimized in Chrome?
- arendtio 3y agoA few weeks ago I found a StackExchange thread where someone had benchmarked the two approaches and found, that table tags were somehow optimized. However, this was tested with identical content and with a table for which every cell had to be rendered. In other scenarios, the performance might be different, but for spreadsheets, this should be applicable. Sadly I can't find the link at the moment (was on a different PC).
- ukuina 3y agoThanks!
- glinkot 3y agoLooking good! Would have loved this to have treegrid functionality, please consider it.
- rowsncolumns 3y agoYes. We are working on adding support for aggregation and pivoting using https://github.com/finos/perspective https://github.com/finos/perspective
- philipwhiuk 3y agoIt crashed: 139-d48f98f3a9d41491.js:1 TypeError: Cannot read properties of undefined (reading 'rowCount') at nI (561-5e048c82ab8ff4d8.js:5:68277) at e (452-22edc4adb41de58f.js:1:1090692) at rs (2443530c-0641256dae818679.js:9:38883) at lg (2443530c-0641256dae818679.js:9:54218)
- rowsncolumns 3y agoAh. Could you share more on how you got this error, Maybe i should setup sentry.io for the demo.
- Scarbutt 3y agoI got the following: Application error: a client-side exception has occurred (see the browser console for more information). And from console: 139-d48f98f3a9d41491.js:1 TypeError: Cannot destructure property 'sheetId' of '.for' as it is undefined. at 561-5e048c82ab8ff4d8.js:5:60688 at Object.rQ [as useMemo] (2443530c-0641256dae818679.js:9:43805) at t.useMemo (139-d48f98f3a9d41491.js:17:7340) at nv (561-5e048c82ab8ff4d8.js:5:60642) at nI (561-5e048c82ab8ff4d8.js:5:68802) at e (452-22edc4adb41de58f.js:1:1090692) at rs (2443530c-0641256dae818679.js:9:38883) at lg (2443530c-0641256dae818679.js:9:54218) at iv (2443530c-0641256dae818679.js:9:112640) at oR (2443530c-0641256dae818679.js:9:90032)
- rowsncolumns 3y agoYes, this was also thrown in collaboration mode when user deleted an active sheet of another user. Will need to figure out how to handle this case :( Thanks for the report :)
- rowsncolumns 3y agoFound the issue. In collaboration mode, when user deletes a sheet another user was on, this error is thrown. Will work on a fix. Thanks for the report.
- burcs 3y agoThis looks great! We've looked at a lot of these for our database GUI. I really love how fleshed out this is, and the multiplayer aspect of it!
- rowsncolumns 3y agoThank you. Collaboration is always a hard-one which requires both UI and database sync.
- AntonyGarand 3y agoIs this related to the react-spreadsheet[1] project? Where does the "React Spreadsheet 2" from the title come from? It's not clear if this is an update to the project, a fork of an existing project, or something brand new. [1] - https://www.npmjs.com/package/react-spreadsheet https://www.npmjs.com/package/react-spreadsheet
- rowsncolumns 3y agoHi, Its not related to that project. Its an update to an already existing project under RownsColumns, hence the name.
- edgyquant 3y agoSo did you just steal the name of another component?
- rowsncolumns 3y agoNo. The component is named "Spreadsheet 2". It's based on React framework. Hence the title of this article "React Spreadsheet 2".
- AntonyGarand 3y agoThe Twitter link in the footer points to an unrelated account with the "rowsncolumns" handle
- rowsncolumns 3y agoOops. Fixed, thats the handle i wanted, but it was taken :)
- The_Colonel 3y agoIs there some capable fully open source data grid providing spreadsheet functionality? Commercial / open-core are a no-go for me, since my goal is to integrate it into an open source project.
- csdvrx 3y agoThis one points to https://github.com/rowsncolumns/spreadsheet https://github.com/rowsncolumns/spreadsheet but it's 404 and I couldn't see the license.
- rowsncolumns 3y agoIts a private repository, only users with licenses can view this.
- jz391 3y agoI've used Slickgrid (open source, https://slickgrid.net/ https://slickgrid.net/) with some success.
- tomcam 3y agoSome?
- msephton 3y agoYMMV
- RyanHamilton 3y agoSlick grid is awesome https://www.timestored.com/data/slick-grid-review https://www.timestored.com/data/slick-grid-review
- beejiu 3y agoOlder (MIT) versions of Handsontable
- nhatcher 3y ago
- jbverschoor 3y agoAmazing
- rowsncolumns 3y agoThank you :)
- Waterluvian 3y agoPerformance for something like this is critical. How do you test or plan on testing performance to prevent regressions? I’ve yet to crack this nut in a way that makes me happy.
- rowsncolumns 3y agoYes it is. The Spreadsheet is powered by ReactJS and Konva. React and Konva provides a Profiler and Devtools to measure performance and to prevent any un-necessary re-renders. We also measure the Canvas FPS to make sure rendering is at max 60fps. The bottleneck we have identified is with scrolling large amounts of text, especially in large 42 inch 4K monitors, where FPS limits to 55-60fps. We do have some workaround planned for large monitors, by splitting the canvas into 4 layers. In terms of regression, we use Cypress for most e2e testing, but the test cases are small as of now.
- mklepaczewski 3y agoYou mentioned physical size of monitors. Does it affect performance in your tests? I would be very, very surprised if performance on 27" 4k monitor was any different than on 42" 4k monitor. Maybe I'm not aware of some quirk?
- rowsncolumns 3y agoI have tested on 32" 4K and 27" 4K and there was no performance issues. Slight degradation on Dell 42" 4K, could be because of the ppi or the pixel ratio, which might be causing canvas/row/cell/ dimensions to be not rounded to whole numbers (this can affect perf).
- mklepaczewski 3y agoInteresting. Can you elaborate how you measure performance? What's perfoemance? Framer ate, cpu/gpu usage, mem, scroll speed?
- 3y ago
- owenpalmer 3y agoScrolling the sheet on my pixel 4a is very laggy. Is this server latency or client side lag?
- oslem 3y agoButtery smooth on my iPhone 12
- rishikeshs 3y agoI agree
- rowsncolumns 3y agoI will do some testing on Pixel phones soon. This should be a client-side UI lag. No server is used for the demo. Thanks for the feedback
- owenpalmer 3y agoI tried again later and it was smooth. I'm using Brave browser on mobile btw.
- Hakashiro 3y ago[flagged]
- deleted 3y ago[deleted]
- rowsncolumns 3y agoThanks. Possibly related to collaboration. I need to handle a scenario where user deletes another user's active sheet.
- mcgooiggy 3y agoi only got this with my adblocker turned on fyi, ublock origin
- dotandgtfo 3y agoSeconding this Edit: Happened again. Might not be related.
- rowsncolumns 3y agoPlease try again. We don't persist data to a database in this demo, hence some of these errors. Pushed a temporary fix
- DiabloD3 3y ago"Application error: a client-side exception has occurred (see the browser console for more information)." Shame.
- hypercube33 3y agosame Application error: a client-side exception has occurred (see the browser console for more information).
- rowsncolumns 3y agoSorry about that. The demo does not persist data on the server, hence sheet deletions can throw errors.
- deleted 3y ago[deleted]
- arendtio 3y agoA few weeks ago I was looking for a spreadsheet component that could be used with Svelte. To my surprise, I found something quite complete: Github: https://github.com/ticruz38/svelte-sheets https://github.com/ticruz38/svelte-sheets Demo: https://ticruz38.github.io/svelte-sheets https://ticruz38.github.io/svelte-sheets It doesn't have the collaborative functionality as React Spreadsheet 2, but other than that it looks comparable.
- NetOpWibby 3y agoThis looks great, thanks for sharing!
- deleted 3y ago[deleted]
- dotandgtfo 3y agoThe demo is neat. How did you do the backend? As far as I see your offering is only related to the UI components. What databases and backends are you seeing users have success with?
- rowsncolumns 3y agoThe demo does not use a back-end service. We are agnostic to back-end frameworks. Some users have used Prisma + Graphql, NoSQL databases etc. The Sheet data structure on the UI can be flexible too. It can come from streaming data source, lazily loaded on-demand or all stored in browser memory
- eek2121 3y agoAdmittedly, I haven't clicked on the link, but you appear to have avoided their question altogether. You offer product demos. Those demos source data from something, be it a JSON file, REST API, etc. Where is the demo data sourced from?
- rowsncolumns 3y agoThe demo data is sourced partially from US Covid database.
- zem 3y agolooks great, nice to see real time collaboration built in!
- cuuupid 3y agoSaw the collaboration mode and immediately feared it would devolve into people throwing around slurs as many unmoderated online experiences often do. Pleasantly surprised to see conspiracies about Tupac and 'vue gang' take over the sheet instead :)
- deleted 3y ago[deleted]
- scsteps 3y agoThis is so cool! Wish you the best
- rowsncolumns 3y agoThank you :)
- iNic 3y agoThe coop demo on the homescreen is a dubious idea
- jewel 3y agoAs long as the content resets periodically it's probably fine. Right now it's on the front page but in the near future there will probably be only one person on it at a time, who can send it to a coworker and test out the functionality live.
- rowsncolumns 3y agoNothing persists. All the diffs are sent over using Supabase and received by all other clients. The diffs are then applied to create the new state.
- FactualOrion 3y agoSeems like it's just being spammed with slurs currently. Might want to add a filter or censoring.
- rowsncolumns 3y agoCreated a single user demo for peaceful browsing https://www.rowsncolumns.app/demo?collab=false https://www.rowsncolumns.app/demo?collab=false
- mst 3y agoYet another reason that I sometimes wish we had Taze-over-IP.
- qntmfred 3y ago*diabolical
- deleted 3y ago[deleted]
- 3y ago
- notpushkin 3y agoCool project! Perhaps tag as Show HN?
- rowsncolumns 3y agoPlease add collab=false to the URL to disable collaboration mode https://www.rowsncolumns.app/demo?collab=false https://www.rowsncolumns.app/demo?collab=false
- creativenolo 3y agoExpensive or perhaps more kindly premium.
- koito17 3y agoAnyone else getting this error? duplicate capture group name in regular expression I find that if I refrain from editing the contents of cells, then this crash doesn't occur, and I can see lots of people modify stuff in real-time. I can play with everything but the contents of a cell, otherwise I get a crash. Overall cool demo
- rowsncolumns 3y agoDid you try to enter a date? Any sample text, so that i can try to pinpoint this issue?
- koito17 3y agoUsing Chrome 119, I see SyntaxError: Invalid regular expression: /^(?<year>\d{4})(\-)(?<month>\d{1,2})(\-)(?<year>\d{1,2})T(?<hour>\d{1,2})\:(?<minute>\d{1,2})\:(?<second>\d{1,2})(Z?)$/i: Duplicate capture group name This happens whenever I insert text to any cell. I just tried inserting "TEST" to a cell on the first sheet, then pushed the Enter key. It also happens when I use arrow keys to move away from a cell I am editing.
- rowsncolumns 3y agoThanks for the feedback. I will look into this. Does the error go away if you just refresh the demo?
- koito17 3y agoYeah, refreshing the page makes everything work again. I can see changes to the spreadsheet in real-time and I am capable of resizing cells, changing fonts, etc. The only problem is with editing the contents of a cell.
- rowsncolumns 3y agoAh. Yes i figured out the issue. Could you share your current location? Are you in the US or Japan? We create a date pattern matching expression based on your current locale.
- iddan 3y agoJust would like to share React Spreadsheet is a simple alternative. Fully open source, fully customisable and maintained for a few years https://iddan.github.io/react-spreadsheet/ https://iddan.github.io/react-spreadsheet/
- deleted 3y ago[deleted]
- 38 3y agohow do you stop the demo from animating? that is really annoying and makes me not want to use the product
- rowsncolumns 3y agoThe link to single user mode is https://www.rowsncolumns.app/demo?collab=false https://www.rowsncolumns.app/demo?collab=false Thank you
- lucgagan 3y agoIs there a way to try this before I buy it? I am building something that would probably benefit from this, but with that price tag (solo indy dev) that's going to be a big ask! might be worth it, just no way of knowing without trying it first
- bugsmith 3y agoGenuine question: Why would anyone purchase this for $299, without the ability to use it commercially? For open-source projects?
- jayde2767 3y agoBest question, right here. I suspect, someone is relying on there being a Marketplace for "pluggable react components". I know you know...it's a mess...
- deleted 3y ago[deleted]
- jraph 3y agoOpen source licenses allow commercial use so probably not fit for Open Source. If your project is NC it can't be open source. So yeah, I don't know who would be the target, probably very niche.
- Too 3y agoIn-house tools, reports, dashboards.
- liamkearney 3y agoSeconding this. Almost all of these "tabular" (although this a bit different) components frequently talk about their in-house tooling pricing. It's a big market.
- AmazingTurtle 3y agoSimilar pricing, suspiciously https://jspreadsheet.com/pricing https://jspreadsheet.com/pricing
- wisty 3y agoThat would probably be commercial. The term NC is actually a real can of worms. Either genuine non commercial work (government or non profit but they can be commercial) or as an evaluation/ prototype licence.
- auggierose 3y agosuppport -> support
- rowsncolumns 3y agoOops... Thank you for letting me know :)
- dragonwriter 3y agoThe frequency with which this page crashes with JS errors does not encourage me to use components from this source.
- rowsncolumns 3y agoWe do not sync the state with a back-end server. Hence when we have collaboration enabled, there can states that go out of sync You can try single user mode here - https://www.rowsncolumns.app/demo?collab=false https://www.rowsncolumns.app/demo?collab=false
- dragonwriter 3y agoAppreciate the explanation.
- rowsncolumns 3y agoThe collaboration mode is getting spammed right now. If you are looking for Single-user mode, its here. https://www.rowsncolumns.app/demo?collab=false https://www.rowsncolumns.app/demo?collab=false
- cjonas 3y agoWho is the "solo" pricing targeting? I can't think of a single reason someone would pay $299 for "Non-commercial use" license to a library...
- deleted 3y ago[deleted]
- Aeolun 3y agoThis is absurdly expensive. It might be worth it, but can’tvl imagine many people would pay? Then again, I guess you need only one enterprise using this thing in all their apps.
- deleted 3y ago[deleted]
- tylerlh 3y agoAgreed. Interested in giving this a go, but current pricing is quite the turn off.
- tomasreimers 3y agoAs one who spent a large part of today searching for a domain, I have to say this domain is great.
- seattle_spring 3y agoWhat the heck lol. My CS capstone project over a decade ago was a cross-platform app called “Columns and Rows.” Won some prizes from nVidia and Microsoft, with the exact same premise as OP. Written in Backbone.js though.
- larodi 3y agoThis absolutely looks amazing. But I also love this process of reinventing the electronic table (spreadsheet), and the columnar-text altogether. 10 more years and we're back in 1982. I would say that the spreadsheet-like data view is a must-do in the career of the UI person. But then this all, without proper back-end wired to it, means very little to the overall product experience. In fact - proper back-end with not-so-cool UI may deliver quite the experience...
- rowsncolumns 3y agoThe back-end can be opinionated, allowing developers to choose their preferred stack, whether it's Python, PHP, Node, or Go. In my view, a UI component should not be constrained or reliant on a specific back-end language.
- hitradostava 3y agowhile this is impressive technically I also get the feeling that we are back in 1982. Spreadsheets are great general purpose tools and useful for financial modeling. But I'd argue they provide a terrible UX for most other tasks. The default assumption that every cell is editable is demonstrably bad - even for financial modeling. Yes you can lock cells and columns, but this is a sticking plaster. Anyway I'm probably biased in this area as I'm working on a https://addmaple.com https://addmaple.com where we are attempting a very different UX for working with tabular data.
- swah 3y agocmd+d working was a surprise!
- rowsncolumns 3y ago♥
- mastersummoner 3y agoJust want to chime in, on a related note: I once wrote a React app with was essentially a spreadsheet view, except each sheet was a "table", and tables could be related to one another via columns which were belongs to/has many types. Writing the front end and back end for this was one of the most complicated things I've ever worked on. I'd love to try it again at my current stage of knowledge and experience.
- htk 3y agoGreat work! What about rendering it to SVG instead of canvas, with a buffer area around and let the scroll take care of itself?
- rowsncolumns 3y agoSVG or HTML adds a lot of DOM nodes when you are displaying lot of textual content. Personally I found canvas easier to work with, scroll performance was better, less browser bugs, drawing was cheaper and scales for large content (using virtualisation or multiple canvas layers)
- kamphey 3y ago"With escape hatches, you can access the internals and customize it to your liking." what are "escape hatches"?