Show HN: React SpreadSheet – Google Sheets-like performance | Hacker News Reader

Show HN: React SpreadSheet – Google Sheets-like performance

rowsncolumns.app

220 pointsrowsncolumns81 comments

Hi HN,

I am the developer behind SpreadSheet Grid. It's a React Library for users who want to develop an Excel-like DataGrid in their application.

The reality is it's very hard to get users off Microsoft Excel, and especially during these times, it's good to have an online Excel viewer and editor in your, private and secure.

Demo - https://rowsncolumns.app/demo

1. The library is built using React, and due to its declarative nature, it is very easy to customise and integrate it within your app

2. It is fast. Canvas is used for rendering.

3. Supports Autofilters, Frozen rows, columns, data validation, conditional formatting etc

4. Custom cell renderer

5. Formula support is coming soon with web worker support

6. Grouping Columns and Rows is coming soon

We support 2 licenses. Non-commercial use (FREE) and Commercial use (USD 199 with 1 year support)

Would love to answer any questions you have :)

Awesome work and love the pricing model.

Good to hear. I didn't want to price it too steep and compete with Handsontable and ag-grid. They are wonderful products, but if you need a highly customisable, performance driven spreadsheet, which is declarative, I would highly suggest trying our product.

> Canvas is used for rendering.

Does that mean accessibility tools are out the window? How much of it is rendered to canvas? When i double clicked a cell, and right clicked the text, the normal browser menu appeared.

I noticed I get both context menus, yours and the browsers when I right click the font size.

Hi, The data is rendered in canvas. When you are editing, you will see an html text input. Custom cell editors can be used too.

We are planning to use Aria Live Region to support a11y

https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...

Amazing job, this is fantastic. And also great that you can get access to the code.

Thank you :)

Incredible job, I just shared it with our React team. I hope to see it somewhere into our code.

Thank you. Appreciate it.

same here

This is really well made. Congrats!

Awesome Glad you liked it.

A landing page that's completely blank if cookies are blocked by default isn't the greatest sell, especially for a dev tool.

Cool idea, though, once I could see it.

Ah. I wasn't aware of this. The website is built on docusaurus. I will check if there is workaround.

Thanks for letting me know and sorry u were not able to access the site.

Hi, good job the sheet looks great. I was wondering why you choose the licencing model over the fund me style that many are choosing?

> fund me style

Mind educating me on this? I am new to this. Any examples and what they use?

A "fund me style" could be something like https://opencollective.com/

Has there been any significant success stories wherein people made a fair return on their time under the "fund me" model?

love it! you could probably charge more for commercial, you could probably go up to 1k and people would not blink for the amount of time you save.

Thanks for the support :)

If you are a solo developer with $1000 budget then Handsontable is more mature and $790 for perpetual license with 1 year support.

I do like the feel of this rowsncolumns.app

Copying columns between Excel and rowsncolumns.app works nicely (minus formatting)

Thanks.. There are some areas of improvement with Copy/Paste, especially formatting.

Right now, i strip out formatting during paste

https://github.com/rowsncolumns/grid/blob/master/packages/gr...

Hope to get to it soon

If you ever need a job! julien at serpapi.com

This is definitely something I will use in one of my apps. Thanks for building.

there's something that I'm definitely missing if people refer to google sheets (or any kind of google product really, except google.com homepage.. maybe) as stuff with "good performance". Every action, keystroke, menu opening, whatever, is laggy to a frustrating degree in these software compared to non-browser-engine-based apps.

Like, I just did a test, and it takes, more than 5 seconds from a "refresh" to all the UI elements of gdocs showing up, versus less than 3 seconds from a fresh start of libreoffice, and less than 2 seconds if I'm having the LO daemon running in the background. And LO is much more featureful, & my install has a few additional plug-ins, some of them using freaking java. It also takes 4-5 seconds to make an export of that doc from docx to odt while it's pretty instantaneous with LO.

And, before anyone comments on my specs, I have gigabit fiber internet, an HEDT i7, 64 gigs of RAM and a GTX 1080. Everything should be instant on these specs.

I’d still take Google Docs over LibreOffice any time of the day.

Excel > Google Sheets though

(LO Dev) what is LO missing?

Very occasional non-professional user here...

LO feels like it's from the 90's - the UI feels outdated and hard to use. It's probably great as a regular user, but I have probably only three 10 minute sessions per year of use. At least half of that time is spent hunting for some feature that I know where to locate in Google Sheets or Excel.

I use it just because it's default on my Ubuntu machine for some file types, and would use it more if I found it more effective.

Try the latest releases, and maybe try switching themes. We have quite an active UI design team, but for every person like you who hates the "old" look, there is another person that hates the "new" looks.

<shrug> what is a team to do ? :-)

Also come hang out on the #libreoffice IRC channel if you need help.

I'm the kind of user who probably wouldn't switch themes or ask for help on IRC - I'd just find another way to solve the issue I have at hand right now.

To cater for users like me, you need to do user studies (watch a user try to complete a task, and time how long it takes them). Then adjust the software to minimize that time.

There are a lot of users like me, but each user isn't super valuable - we're the ones who would fire up LO Writer, type "Party Next Tuesday", set the font size big, hit print, then close without saving. Then don't open LO again for a few weeks.

You may decide I'm not the type of user LO is designed for, and that's a perfectly valid choice, especially for an opensource project with limited resources.

We're in the process of doing that - our design team periodically moves things around, and tries to do that. But as you note, we have very limited resources, so a lot of the design teams suggestions get parked.

We're also fighting the usual battles - people for whom the "old" way is perfect and they hate change - people for whom anything other than 100% the same as Microsoft is wrong

But feel free to log issues in our bugtracker if you have concrete suggestions.

Cloud collaboration features. About half of the documents and sheets I create on a daily basis are for sharing with clients and friends. There’s a UX aspect and one of network effects.

I'm probably not the target audience for this, but "Google Sheets-like performance" does not sound like a selling point to me.

Historically, their performance has been downright awful (especially in non-Chrome browsers).

Not in my experience. I copy and paste large datasets directly from other sources. Performance is constant with multiple tabs. At work, we strongly rely on G Sheets as a daily base tool for accounting, data reconciliation, reporting in general.

How many rows do you usually manipulate at the same time?

For a web based excel tool, Google Sheets has really good performance IMO. Other alternative is Microsoft Online Excel, which is quite slow, bloated and cough horrible.

If you have highly interactive data in cells, (eg: svg graphs), scroll performance can be improved by enabling `snap`. With this only one row/column will scroll at a time.

I tried manipulating small datasets (overclocking results by CPU), under 500 rows, and the performance was abysmal.

Maybe not performance, but responsiveness ? The UI was lagging.

It was in Firefox, a few years ago, and I never went back to it.

MS Office 2010 is much snappier.

What bothers me is the startup time. The Time to Interactive is about 10 seconds on my Google Sheet with 850 rows and 3 columns. This is just for personal use to store the names of songs that I like, so the slowness is annoying enough to where I'm looking for alternatives.

Google Sheets performance is terrible indeed. I carefully studied G. Sheets for our data grid product DatagridXL (https://datagridxl.com) and many times I was shocked by how slow and old it feels when performing basic operations.

You get to feel a certain kind of pride when your bootstrapped business product has better performance than the multi billion dollar company product.

Of course, nowhere near the amount of features G sheets has.

You had me at smooth scrolling. Take my money.

This is something i was very particular about from Day 1. It's quite hard to get smooth scrolling, even in canvas.

Still lots of optimisations to be done, but i will never sacrifice anything for a smooth scrolling experience :)

Doesn’t work on the iOS please make it mobile friendly.

On mobile, we support view only mode. Edit mode is not compatible. But we can add it to our roadmap if more users ask for this.

I doubt a lot of people edit excel files on mobile. I maybe wrong.

If you consider tablets a mobile device, it certainly sounds plausible.

Sometimes spreadsheets are used for collecting data from many people. Then it needs to be accessible. Example: At work we often use spreadsheet to coordinate employees plans for vacation days.

In those use cases you just want to be able to click a link to the spreadsheet and quickly fill your information, regardless of what device you're using.

Not many people use spreadsheets on a phone. OP, beyond some basic view only functionality, I wouldn't prioritize mobile.

Would someone elaborate on the choice of canvas vs DOM for grids like this? There is this older stackoverflow discussion[1] that seems to indicate that one can get decent performance with large data volumes by maintaining DOM cells for just the viewport area and managing the grid content in response to scroll events. Since the row heights are fixed, the scrolling algorithm should be manageable. So why a canvas rather than DOM?

[1] https://stackoverflow.com/questions/2402953/javascript-data-...

I can only give you the reasons why I picked canvas. So here you go.

1. Scroll performance is much better than HTML

2. Drawing on canvas is cheap compared to modifying DOM or attributes

3. Streaming updates are much smoother in canvas as drawing is quick. I had used Canvas as an interface for high-frequency trading

4. Canvas is easy to work with. And with Konva - https://github.com/konvajs/react-konva/, any React developer will find it at home

5. No Browser bugs :)

6. Performance tuning is quicker with Canvas

7. In the future, we can decide to use WebGL (using PixiJS)

Some problems with canvas IMO

1. There is no relative positioning :(. It sounds silly, but coming from HTML, any element can be positioned relative to its parent.

2. Styling/Pixel ratio/Stroke - can be hard to figure out first. And the 0.5px crisp stroke workaround on DPR 1 devices. Took me a long time to figure out

There are pros and cons for both, I guess it all comes down to your personal preference and picking the right tools for the task in hand.

DOM can be even faster than canvas as long as you’re smart about it, as discussed in last week’s Show HN of DatagridXL: https://news.ycombinator.com/item?id=23909894, https://datagridxl.com

Another plug - https://datagridxl.com It's a fully HTML SpreadSheet, no downsides that come with canvas. The Grid works even without any frameworks.

You can see a demo here of One Million Cells - https://www.datagridxl.com/demos/one-million-cells.

Granted, it does not have as many features as the React grid, but it's super fast & super reliable and comes with decent touch support.

Looks good, but feels wonky when you actually use it.

When I type =SUM( in cell A1 and hit arrow right (before hitting enter or tab), I expect the address of the formula to change to =SUM(A2

F2 should work for editing formulas instead of actually entering "F2" into the cell's content

Many other little "expected behaviors" need to be implemented for this to be a frustration-free experience. You should get a team of experienced Excel users involved so you can see how they work / or they can tell you how they work

Hi, I have not shipped Core support for formula yet. Working on it actively

Multi-Selection mode is a WIP

https://rowsncolumns.app/docs/formula#multi-selection-mode

Thanks. I suggest you look into Excel's behavior while in formula mode and the difference between the Enter and Edit modes which you can toggle with F2 after already being in formula mode

So F2 once to switch to editing a cell, then F2 again to switch between edit and enter, then start typing a formula and click around

I can't seem to figure out how to reference another cell. I Also can't seem to get it to use the "=SUM(1,2)" example in the documentation page for formula.

Am I doing something wrong?

Edit: Okay, I can use formulas in the demo spreadsheet on the Formula documentation page, but not the demo linked from the main page. I'm not sure how to reference other cells though.

Hi, I have not shipped Core support for formula yet. Working on it actively

In the demo you see, I am using hot-formula-parser to parse formula during render. This won't scale for large applications, cos any parent render will re-render the grid and trigger a recalc

Am working on adding a Directed Acyclic Graph to manage cell dependencies, so that Grid knows which cells needs to be re-rendered.

For the parser, we will be using https://github.com/LesterLyu/fast-formula-parser

Support for formulas is the killer feature here. Formula that update when you cut / add rows & columns. Would be a happy paying customer once that's live and reliable.

Proper keybindings for copy and paste, undo, redo, column insert as well as image support inside cells. Get in touch with me via my bio if you can implement.

Formula support is in our roadmap.

Keybindings can be added easily. I disabled global key handler for copy/paste/undo/redo for now, but that can be enabled.

Images inside cells are pretty straightforward. I will update the docs.

Please signup for our newsletter and I will keep you updated on formula support

https://rmdort.typeform.com/to/H5TjLoun

I will keep u updated too. Saved your bio :)

Images are now supported in cells. Global key handlers for copy paste is now optional, you can pass a prop to enable it.

https://rowsncolumns.app/demo

This is huge. I’ve been looking for a way to easily use a spreadsheet interface for data intensive applications, and was starting to look at making API calls from the Google Sheets API. This would be much better.

What is the timing for adding formulas / calculations?

Hi, I don't have an exact timeline yet. If you are looking for simple calculations, you can try this workaround - https://rowsncolumns.app/docs/formula

Do note that this wont scale for larger applications. You would not want to calculate formulas everytime during render.

You could signup for our newsletter and I will keep you updated

https://rmdort.typeform.com/to/H5TjLoun

I really like the prospect of "pluggable" formula parsers. I've thought many times about the possibilities of custom formula languages.

Imagine populating the table using a graphql query to the backend for example. Not sure if that would make sense as a formula by itself but I can see that there are many nice possibilities here.

Yes. If you are able to write custom formulas and async handlers for these formulas, I think this is certainly possible.

Awesome work, and good luck!

Some questions:

1. Is commercial pricing (USD 199) per developer or per application?

2. Is there a different license needed for SaaS products? handsontable needs something like that.

3. `fast-formula-parser` looks great. How do you plan to handle writing complex formulas on the front-end?

Thank you.

1. Commercial pricing is per developer. Otherwise it can be misused

2. No

3. Formula parsing module that I am building is capable of running in a Web Worker or in the same UI thread. For lag-free calculations, Web Worker is preferred.

Basically Calculations are async. The calc engine can also reside in your own server (future :P)

`fast-formula-parser` does support adding custom formulas, So i think you will have control over it.

Works well. What are the use cases for this library? Why use it over Google Sheets?

This was my first thought as well, as someone who uses Google Sheets (also free) almost daily to manage personal and business information.

This is mainly targetted at companies who wants to have an in house web-based excel-like grid in their application.

1. It can be a used to build Apps that render multiple tables in a Sheet. Or a CryptoCurrency trading app where numbers tick at high frequency.

2. It can be used to edit and download Excel files

3. Quick slice/dice of csv/excel data for DataScience projects

4. Formula can be used to run Custom calculations or to fetch data from a third-party server and display them on a Sheet.

Most corporates do not allow Google Suites in the workplace due to privacy concerns. The only alternative is Microsoft Excel, which are not shareable. (unless u send them as attachment :P)

- i type 1 character into a cell and click somewhere else, that cell will be empty.

2 or more characters, the value is set like expected

- select all (ctrl A) and change font, it freeze for a few seconds

Thanks for reporting.

1. Fixed

2. Thats because React State of all the cells are updated. One way is to reduce the number of columns. Currently the grid size is 1000 x 1000, which means 1 million objects needs to change.

Need to think of a proper optimization technique.

I was making something similar today to integrate into a dashboard, looks like I don’t need to anymore. This is very nice and well executed, thanks a million.

This is awesome! I was searching the net to find excel like grid and now I have finally found it. Any chance it has pivot table feature?

Thanks. Pivot table is a hard one. Doable. In a new Sheet, like how google sheets does.

Some kind of a Layout Component that has top/left/right/bottom bounds, and access to sheet data

Can't seem to select cells on android chrome

On Mobile, you can view and scroll through the data, but lacks support for selection and editing. This is something that I am looking at. Will come back to this depending on urgency :)

Congrats on your launch and front page mention! Must have been a lot of hard work, I can relate. Best of luck!

Hey Robbert.. Thank you :)

And congrats on your launch too. Wish you all the best.

Hotkeys in firefox don't seem to work properly.

Pgup/Pgdn, ctrl-down etc just inputs the keycode on my machine.

Good find. Tracking the issue here https://github.com/rowsncolumns/grid/issues/62

Can you hide columns?

Yes you can https://rowsncolumns.app/docs/features/hidden-rows-columns

I did not add this options to the Context Menu yet.

Reply on news.ycombinator.com