[HN Gopher] React Spreadsheet 2 - Your Own Google Sheets
___________________________________________________________________
React Spreadsheet 2 - Your Own Google Sheets
Author : rowsncolumns
Score : 162 points
Date : 2023-11-23 08:37 UTC (1 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/
| 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
| 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.
| 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.
| 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.
| 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?
| csdvrx wrote:
| This one points to https://github.com/rowsncolumns/spreadsheet
| but it's 404 and I couldn't see the license.
| 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).
| 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
| 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
| 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
| 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
| notpushkin wrote:
| Cool project! Perhaps tag as Show HN?
| creativenolo wrote:
| Expensive or perhaps more kindly premium.
___________________________________________________________________
(page generated 2023-11-24 23:00 UTC)