Show HN: React SpreadSheet – Google Sheets-like performance

by rowsncolumns • 6 years ago

220 81 6 years ago

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

arjun27• 6 years ago

Awesome work and love the pricing model.

rowsncolumns25• 6 years ago

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.

basch• 6 years ago

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.

rowsncolumns25• 6 years ago

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

randiantech• 6 years ago

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

rowsncolumns25• 6 years ago

Thank you :)

mcs_2• 6 years ago

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

rowsncolumns25• 6 years ago

Thank you. Appreciate it.

sleepygardener• 6 years ago

same here

oscargrouch• 6 years ago

This is really well made. Congrats!

rowsncolumns25• 6 years ago

Awesome Glad you liked it.

uranium• 6 years ago

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.

artminister3• 6 years ago

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.

hutch1202• 6 years ago

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?

blisseyGo• 6 years ago

fund me style

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

shabda• 6 years ago

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

swyx• 6 years ago

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.

rowsncolumns25• 6 years ago

Thanks for the support :)

mmerlin• 6 years ago

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)

hartator• 6 years ago

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

pauljeba• 6 years ago

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

antisthenes2• 6 years ago

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

mcs_2• 6 years ago

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?

rowsncolumns25• 6 years ago

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.

antisthenes2• 6 years ago

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.

JSavageOne• 6 years ago

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.

robbiejs4• 6 years ago

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.

kbenson• 6 years ago

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.

artminister3• 6 years ago

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.

artminister3• 6 years ago

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

hpen• 6 years ago

Can you hide columns?

rowsncolumns25• 6 years ago

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

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

rosstex• 6 years ago

You had me at smooth scrolling. Take my money.

rowsncolumns25• 6 years ago

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

ramon• 6 years ago

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

rowsncolumns25• 6 years ago

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.

JMTQp8lwXL• 6 years ago

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

worldsayshi2• 6 years ago

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.

mmckelvy2• 6 years ago

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

sidthegeek• 6 years ago

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

rowsncolumns25• 6 years ago

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.

robbiejs4• 6 years ago

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

shobhit-singhal• 6 years ago

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?

rowsncolumns25• 6 years ago

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.

cloudking• 6 years ago

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

mottosso• 6 years ago

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

rowsncolumns25• 6 years ago

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)

arzel• 6 years ago

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.

liveranga• 6 years ago

Hotkeys in firefox don't seem to work properly.

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

rowsncolumns25• 6 years ago

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

airstrike2• 6 years ago

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

rowsncolumns25• 6 years ago

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

airstrike2• 6 years ago

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

fareesh• 6 years ago

Can't seem to select cells on android chrome

rowsncolumns25• 6 years ago

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

mmckelvy2• 6 years ago

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?

rowsncolumns25• 6 years ago

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

worldsayshi2• 6 years ago

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.

beilabs• 6 years ago

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.

rowsncolumns25• 6 years ago

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

rowsncolumns25• 6 years ago

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

jcelerier• 6 years ago

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.

arcturus172• 6 years ago

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

quickthrower2• 6 years ago

Excel > Google Sheets though

grandinj3• 6 years ago

(LO Dev) what is LO missing?

tuananh• 6 years ago

- 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

rowsncolumns25• 6 years ago

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.

robbiejs4• 6 years ago

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

rowsncolumns25• 6 years ago

Hey Robbert.. Thank you :)

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

techdata• 6 years ago

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?

rowsncolumns25• 6 years ago

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

robbiejs4• 6 years ago

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.

Show HN: React SpreadSheet – Google Sheets-like performance

Related Stories