[HN Gopher] Show HN: React Spreadsheet 2
___________________________________________________________________
Show HN: React Spreadsheet 2
Author : rowsncolumns
Score : 344 points
Date : 2023-11-23 08:37 UTC (2 days ago)
(HTM) web link (www.rowsncolumns.app)
(TXT) w3m dump (www.rowsncolumns.app)
| rowsncolumns wrote:
| Create 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/
| mattlondon wrote:
| Curious: since you are rendering everything via canvas, how do
| you do accessibility?
| rowsncolumns wrote:
| For 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 wrote:
| Is it able to handle tables with 1,000,000+ rows?
| rowsncolumns wrote:
| I 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 wrote:
| I'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 wrote:
| Feels pretty smooth on my iPhone 13.
| rowsncolumns wrote:
| Could you share which phone you were using? We use virtual
| rendering at both row and column level.
| mhitza wrote:
| I'm on a Fairphone 4 with Firefox, but I guess it would
| be the same on any midrange phone.
| rowsncolumns wrote:
| Got it. I will try to do some performance testing on
| midrange phones and mobile firefox. Thanks
| wouldbecouldbe wrote:
| The beauty of excel is you can load Million rows and do
| computations on them.
| leptons wrote:
| Excel 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 wrote:
| Oh you're one of _those_ users.
|
| _Prepares LART._
| _istanbul_ wrote:
| I 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 wrote:
| It'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 wrote:
| How to you get immediate feedback while doing
| edits/calculations and also collaborate after you stash
| your data in anything else?
| torunar wrote:
| Oh 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 wrote:
| Actually, 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 wrote:
| Which approach is more optimized in Chrome?
| glinkot wrote:
| Looking good! Would have loved this to have treegrid
| functionality, please consider it.
| rowsncolumns wrote:
| Yes. We are working on adding support for aggregation and
| pivoting using https://github.com/finos/perspective
| philipwhiuk wrote:
| It 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 wrote:
| Ah. Could you share more on how you got this error, Maybe i
| should setup sentry.io for the demo.
| Scarbutt wrote:
| I 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 wrote:
| Yes, 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 wrote:
| Found 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 wrote:
| This 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 wrote:
| Thank you. Collaboration is always a hard-one which requires
| both UI and database sync.
| AntonyGarand wrote:
| Is 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
| rowsncolumns wrote:
| Hi, Its not related to that project. Its an update to an
| already existing project under RownsColumns, hence the name.
| edgyquant wrote:
| So did you just steal the name of another component?
| rowsncolumns wrote:
| No. The component is named "Spreadsheet 2". It's based on
| React framework. Hence the title of this article "React
| Spreadsheet 2".
| AntonyGarand wrote:
| The Twitter link in the footer points to an unrelated account
| with the "rowsncolumns" handle
| rowsncolumns wrote:
| Oops. Fixed, thats the handle i wanted, but it was taken :)
| The_Colonel wrote:
| Is 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.
| jz391 wrote:
| I've used Slickgrid (open source, https://slickgrid.net/) with
| some success.
| tomcam wrote:
| Some?
| msephton wrote:
| YMMV
| RyanHamilton wrote:
| Slick grid is awesome https://www.timestored.com/data/slick-
| grid-review
| csdvrx wrote:
| This one points to https://github.com/rowsncolumns/spreadsheet
| but it's 404 and I couldn't see the license.
| rowsncolumns wrote:
| Its a private repository, only users with licenses can view
| this.
| beejiu wrote:
| Older (MIT) versions of Handsontable
| nhatcher wrote:
| I'm working hard to open source (MIT)
| https://www.equalto.com/suresheet/ By Jan 10th. If that works
| for you, DM me. Will be in https://www.ironcalc.com
| csdvrx wrote:
| > If that works for you, DM me
|
| At which address? You're not listing an email on your profile
| nhatcher wrote:
| hn@theuniverse.today
| whacked_new wrote:
| https://ui.toast.com/tui-grid is MIT
| jbverschoor wrote:
| Amazing
| rowsncolumns wrote:
| Thank you :)
| Waterluvian wrote:
| Performance 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 wrote:
| Yes 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 wrote:
| You 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 wrote:
| I 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 wrote:
| Interesting. Can you elaborate how you measure
| performance? What's perfoemance? Framer ate, cpu/gpu
| usage, mem, scroll speed?
| rowsncolumns wrote:
| There are quite a few methods to measure performance
|
| We start of with the FPS monitoring tool which measure
| the frame rate, memory consumption and GPU sange
|
| We switch to devtools->Performance analysis to measure
| function call times, layout thrashes and shifts, RAF
| bottleneck, memory consumption and CPU time.
|
| We also use React devtools to measure re-rendering.
|
| Scrolling is wrapped in Request animation frame loop,
| hence its being controlled by the browsers frame rate.
| doix wrote:
| It's usually the scaling. If you're on 27" at 4k, you
| probably have some scaling enabled, anywhere from 1.25x to
| 2x, so less stuff fits on the screen. Since less stuff fits
| on the screen, less stuff gets rendered and performance
| should be better.
|
| At 42" 4k, there's probably no scaling, so more stuff fits
| on the screen.
| Hakashiro wrote:
| I scrolled and was met with an exception.
|
| Solid software.
| rowsncolumns wrote:
| Thanks. Possibly related to collaboration. I need to handle a
| scenario where user deletes another user's active sheet.
| mcgooiggy wrote:
| i only got this with my adblocker turned on fyi, ublock
| origin
| dotandgtfo wrote:
| Seconding this Edit: Happened again. Might not be related.
| rowsncolumns wrote:
| Please try again. We don't persist data to a database in
| this demo, hence some of these errors. Pushed a temporary
| fix
| DiabloD3 wrote:
| "Application error: a client-side exception has occurred (see the
| browser console for more information)."
|
| Shame.
| hypercube33 wrote:
| same
|
| Application error: a client-side exception has occurred (see
| the browser console for more information).
| rowsncolumns wrote:
| Sorry about that. The demo does not persist data on the
| server, hence sheet deletions can throw errors.
| arendtio wrote:
| A 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
|
| Demo: 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 wrote:
| This looks great, thanks for sharing!
| dotandgtfo wrote:
| The 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 wrote:
| The 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 wrote:
| Admittedly, 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 wrote:
| The demo data is sourced partially from US Covid database.
| zem wrote:
| looks great, nice to see real time collaboration built in!
| cuuupid wrote:
| Saw 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 :)
| owenpalmer wrote:
| Scrolling the sheet on my pixel 4a is very laggy. Is this server
| latency or client side lag?
| oslem wrote:
| Buttery smooth on my iPhone 12
| rishikeshs wrote:
| I agree
| rowsncolumns wrote:
| I 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 wrote:
| I tried again later and it was smooth. I'm using Brave
| browser on mobile btw.
| scsteps wrote:
| This is so cool! Wish you the best
| rowsncolumns wrote:
| Thank you :)
| iNic wrote:
| The coop demo on the homescreen is a dubious idea
| jewel wrote:
| As 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 wrote:
| Nothing 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 wrote:
| Seems like it's just being spammed with slurs currently.
| Might want to add a filter or censoring.
| rowsncolumns wrote:
| Created a single user demo for peaceful browsing
|
| https://www.rowsncolumns.app/demo?collab=false
| mst wrote:
| Yet another reason that I sometimes wish we had Taze-
| over-IP.
| qntmfred wrote:
| *diabolical
| JSavageOne wrote:
| No it's a great idea
| notpushkin wrote:
| Cool project! Perhaps tag as Show HN?
| rowsncolumns wrote:
| Please add collab=false to the URL to disable collaboration
| mode
|
| https://www.rowsncolumns.app/demo?collab=false
| creativenolo wrote:
| Expensive or perhaps more kindly premium.
| koito17 wrote:
| Anyone 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 wrote:
| Did you try to enter a date? Any sample text, so that i can try
| to pinpoint this issue?
| koito17 wrote:
| Using 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})\:(?<sec
| ond>\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 wrote:
| Thanks for the feedback. I will look into this.
|
| Does the error go away if you just refresh the demo?
| koito17 wrote:
| Yeah, 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 wrote:
| Ah. 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.
| koito17 wrote:
| Yeah, I am currently in the US, using a MacBook with
| Japanese locale set.
| rowsncolumns wrote:
| Awesome. I have fixed this issue for you.
| eigenvalue wrote:
| Cool, real-time debugging and deploying a fix in minutes.
| We've come a long way since the days of shrinkwrapped
| spreadsheet software sold in a store.
| iddan wrote:
| Just 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/
| 38 wrote:
| how do you stop the demo from animating? that is really annoying
| and makes me not want to use the product
| rowsncolumns wrote:
| The link to single user mode is
| https://www.rowsncolumns.app/demo?collab=false
|
| Thank you
| lucgagan wrote:
| Is 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 wrote:
| Genuine question: Why would anyone purchase this for $299,
| without the ability to use it commercially? For open-source
| projects?
| jayde2767 wrote:
| Best 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...
| jraph wrote:
| Open 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 wrote:
| In-house tools, reports, dashboards.
| liamkearney wrote:
| Seconding 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 wrote:
| Similar pricing, suspiciously
| https://jspreadsheet.com/pricing
| wisty wrote:
| That 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.
| uxp8u61q wrote:
| Let's be real - why would you use anything but excel for
| this?
| Too wrote:
| Not dissing excel, it's fantastic, depending on your shop
| there are plenty of scenarios it doesn't fit. Windows only,
| this can be a big one. Deployment and auth difficulties
| when having connections to custom data sources. Customizing
| visualization. Displaying side-by-side with some other
| data. Excel isn't free either, unless you are already fully
| invested in it. Your shop has better skills in js than
| vbscript.
| auggierose wrote:
| suppport -> support
| rowsncolumns wrote:
| Oops... Thank you for letting me know :)
| dragonwriter wrote:
| The frequency with which this page crashes with JS errors does
| not encourage me to use components from this source.
| rowsncolumns wrote:
| We 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
| dragonwriter wrote:
| Appreciate the explanation.
| rowsncolumns wrote:
| The collaboration mode is getting spammed right now. If you are
| looking for Single-user mode, its here.
|
| https://www.rowsncolumns.app/demo?collab=false
| cjonas wrote:
| Who 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...
| Aeolun wrote:
| This 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.
| tylerlh wrote:
| Agreed. Interested in giving this a go, but current pricing is
| quite the turn off.
| tomasreimers wrote:
| As one who spent a large part of today searching for a domain, I
| have to say this domain is great.
| seattle_spring wrote:
| What 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 wrote:
| This 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 wrote:
| The 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.
| swah wrote:
| cmd+d working was a surprise!
| rowsncolumns wrote:
| mastersummoner wrote:
| Just 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 wrote:
| Great work! What about rendering it to SVG instead of canvas,
| with a buffer area around and let the scroll take care of itself?
| rowsncolumns wrote:
| SVG 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)
___________________________________________________________________
(page generated 2023-11-25 23:01 UTC)