
Show HN: React SpreadSheet – Google Sheets-like performance - rowsncolumns
http://rowsncolumns.app
======
rowsncolumns
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](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 :)

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

~~~
rowsncolumns
Thank you. Appreciate it.

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

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

~~~
grandinj
(LO Dev) what is LO missing?

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

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

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

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

------
antisthenes
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_
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?

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

------
rosstex
You had me at smooth scrolling. Take my money.

~~~
rowsncolumns
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
Doesn’t work on the iOS please make it mobile friendly.

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

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

------
sidthegeek
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-...](https://stackoverflow.com/questions/2402953/javascript-data-grid-
for-millions-of-rows)

~~~
rowsncolumns
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/](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.

------
robbiejs
Another plug - [https://datagridxl.com](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](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.

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

~~~
rowsncolumns
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](https://rowsncolumns.app/docs/formula#multi-selection-mode)

~~~
airstrike
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

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

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

~~~
artminister
For the parser, we will be using [https://github.com/LesterLyu/fast-formula-
parser](https://github.com/LesterLyu/fast-formula-parser)

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

~~~
rowsncolumns
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](https://rmdort.typeform.com/to/H5TjLoun)

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

------
mmckelvy
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?

~~~
rowsncolumns
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](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](https://rmdort.typeform.com/to/H5TjLoun)

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

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

------
shobhit-singhal
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?

~~~
rowsncolumns
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
Works well. What are the use cases for this library? Why use it over Google
Sheets?

~~~
rowsncolumns
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)

------
tuananh
\- 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

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

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

------
techdata
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?

~~~
rowsncolumns
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

------
fareesh
Can't seem to select cells on android chrome

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

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

~~~
rowsncolumns
Hey Robbert.. Thank you :)

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

------
liveranga
Hotkeys in firefox don't seem to work properly.

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

~~~
rowsncolumns
Good find. Tracking the issue here
[https://github.com/rowsncolumns/grid/issues/62](https://github.com/rowsncolumns/grid/issues/62)

------
hpen
Can you hide columns?

~~~
rowsncolumns
Yes you can [https://rowsncolumns.app/docs/features/hidden-rows-
columns](https://rowsncolumns.app/docs/features/hidden-rows-columns)

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

