return to table of content

Show HN: React Spreadsheet 2

torunar
15 replies
3d4h

Is it able to handle tables with 1,000,000+ rows?

rowsncolumns
7 replies
3d3h

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

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.

rowsncolumns
2 replies
1d20h

Could you share which phone you were using? We use virtual rendering at both row and column level.

mhitza
1 replies
1d20h

I'm on a Fairphone 4 with Firefox, but I guess it would be the same on any midrange phone.

rowsncolumns
0 replies
1d19h

Got it. I will try to do some performance testing on midrange phones and mobile firefox. Thanks

cdmckay
0 replies
1d21h

Feels pretty smooth on my iPhone 13.

wouldbecouldbe
1 replies
1d17h

The beauty of excel is you can load Million rows and do computations on them.

leptons
0 replies
22h55m

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

Oh you’re one of those users.

Prepares LART.

_istanbul_
2 replies
1d20h

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

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

How to you get immediate feedback while doing edits/calculations and also collaborate after you stash your data in anything else?

torunar
0 replies
1d4h

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

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

Which approach is more optimized in Chrome?

The_Colonel
11 replies
1d20h

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

I've used Slickgrid (open source, https://slickgrid.net/) with some success.

tomcam
1 replies
1d19h

Some?

msephton
0 replies
1d18h

YMMV

RyanHamilton
0 replies
1d9h
nhatcher
2 replies
1d16h

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

If that works for you, DM me

At which address? You're not listing an email on your profile

nhatcher
0 replies
1d14h

hn@theuniverse.today

csdvrx
1 replies
1d18h

This one points to https://github.com/rowsncolumns/spreadsheet but it's 404 and I couldn't see the license.

rowsncolumns
0 replies
1d

Its a private repository, only users with licenses can view this.

whacked_new
0 replies
1d11h
beejiu
0 replies
1d18h

Older (MIT) versions of Handsontable

koito17
8 replies
1d18h

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

Did you try to enter a date? Any sample text, so that i can try to pinpoint this issue?

koito17
6 replies
1d17h

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})\:(?<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
3 replies
1d17h

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

Yeah, I am currently in the US, using a MacBook with Japanese locale set.

rowsncolumns
1 replies
1d17h

Awesome. I have fixed this issue for you.

eigenvalue
0 replies
1d17h

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.

rowsncolumns
1 replies
1d17h

Thanks for the feedback. I will look into this.

Does the error go away if you just refresh the demo?

koito17
0 replies
1d17h

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.

bugsmith
8 replies
1d17h

Genuine question: Why would anyone purchase this for $299, without the ability to use it commercially? For open-source projects?

Too
5 replies
1d10h

In-house tools, reports, dashboards.

uxp8u61q
1 replies
1d4h

Let's be real - why would you use anything but excel for this?

Too
0 replies
23h23m

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.

liamkearney
1 replies
1d6h

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

Similar pricing, suspiciously https://jspreadsheet.com/pricing

wisty
0 replies
1d5h

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.

jraph
0 replies
1d12h

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.

jayde2767
0 replies
1d17h

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

iNic
7 replies
1d18h

The coop demo on the homescreen is a dubious idea

jewel
4 replies
1d18h

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
3 replies
1d17h

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

Seems like it's just being spammed with slurs currently. Might want to add a filter or censoring.

rowsncolumns
0 replies
1d17h

Created a single user demo for peaceful browsing

https://www.rowsncolumns.app/demo?collab=false

mst
0 replies
1d4h

Yet another reason that I sometimes wish we had Taze-over-IP.

qntmfred
0 replies
1d17h

*diabolical

JSavageOne
0 replies
1d5h

No it's a great idea

Waterluvian
6 replies
1d20h

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

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
4 replies
1d19h

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

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

Interesting. Can you elaborate how you measure performance? What's perfoemance? Framer ate, cpu/gpu usage, mem, scroll speed?

rowsncolumns
0 replies
1d6h

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

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.

philipwhiuk
4 replies
1d21h

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

Ah. Could you share more on how you got this error, Maybe i should setup sentry.io for the demo.

Scarbutt
1 replies
1d20h

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

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

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.

owenpalmer
4 replies
1d18h

Scrolling the sheet on my pixel 4a is very laggy. Is this server latency or client side lag?

rowsncolumns
1 replies
1d18h

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
0 replies
22h29m

I tried again later and it was smooth. I'm using Brave browser on mobile btw.

oslem
1 replies
1d18h

Buttery smooth on my iPhone 12

rishikeshs
0 replies
1d17h

I agree

dotandgtfo
3 replies
1d19h

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

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

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

The demo data is sourced partially from US Covid database.

AntonyGarand
3 replies
1d20h

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

Hi, Its not related to that project. Its an update to an already existing project under RownsColumns, hence the name.

edgyquant
1 replies
1d3h

So did you just steal the name of another component?

rowsncolumns
0 replies
1d3h

No. The component is named "Spreadsheet 2". It's based on React framework. Hence the title of this article "React Spreadsheet 2".

rowsncolumns
2 replies
3d8h

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

Curious: since you are rendering everything via canvas, how do you do accessibility?

rowsncolumns
0 replies
1d7h

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.

larodi
2 replies
1d9h

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

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.

hitradostava
0 replies
7h32m

while 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 where we are attempting a very different UX for working with tabular data.

dragonwriter
2 replies
1d17h

The frequency with which this page crashes with JS errors does not encourage me to use components from this source.

rowsncolumns
1 replies
1d17h

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

Appreciate the explanation.

DiabloD3
2 replies
1d19h

"Application error: a client-side exception has occurred (see the browser console for more information)."

Shame.

hypercube33
1 replies
1d19h

same

Application error: a client-side exception has occurred (see the browser console for more information).

rowsncolumns
0 replies
1d19h

Sorry about that. The demo does not persist data on the server, hence sheet deletions can throw errors.

swah
1 replies
1d7h

cmd+d working was a surprise!

rowsncolumns
0 replies
1d5h

scsteps
1 replies
1d18h

This is so cool! Wish you the best

rowsncolumns
0 replies
1d18h

Thank you :)

notpushkin
1 replies
1d18h

Cool project! Perhaps tag as Show HN?

rowsncolumns
0 replies
1d17h

Please add collab=false to the URL to disable collaboration mode

https://www.rowsncolumns.app/demo?collab=false

jbverschoor
1 replies
1d20h

Amazing

rowsncolumns
0 replies
1d20h

Thank you :)

htk
1 replies
1d

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
0 replies
21h51m

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)

glinkot
1 replies
1d21h

Looking good! Would have loved this to have treegrid functionality, please consider it.

rowsncolumns
0 replies
1d20h

Yes. We are working on adding support for aggregation and pivoting using https://github.com/finos/perspective

burcs
1 replies
1d21h

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

Thank you. Collaboration is always a hard-one which requires both UI and database sync.

auggierose
1 replies
1d17h

suppport -> support

rowsncolumns
0 replies
1d17h

Oops... Thank you for letting me know :)

arendtio
1 replies
1d19h

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

This looks great, thanks for sharing!

AntonyGarand
1 replies
1d20h

The Twitter link in the footer points to an unrelated account with the "rowsncolumns" handle

rowsncolumns
0 replies
1d20h

Oops. Fixed, thats the handle i wanted, but it was taken :)

Aeolun
1 replies
1d16h

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

Agreed. Interested in giving this a go, but current pricing is quite the turn off.

38
1 replies
1d17h

how do you stop the demo from animating? that is really annoying and makes me not want to use the product

rowsncolumns
0 replies
1d16h

The link to single user mode is https://www.rowsncolumns.app/demo?collab=false

Thank you

zem
0 replies
1d19h

looks great, nice to see real time collaboration built in!

tomasreimers
0 replies
1d16h

As one who spent a large part of today searching for a domain, I have to say this domain is great.

seattle_spring
0 replies
1d14h

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.

rowsncolumns
0 replies
1d17h

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

mastersummoner
0 replies
1d2h

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.

lucgagan
0 replies
1d17h

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

kamphey
0 replies
13h3m

"With escape hatches, you can access the internals and customize it to your liking."

what are "escape hatches"?

iddan
0 replies
1d17h

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/

cuuupid
0 replies
1d18h

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

creativenolo
0 replies
1d18h

Expensive or perhaps more kindly premium.

cjonas
0 replies
1d17h

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