Show HN: React SpreadSheet – Google Sheets-like performance(rowsncolumns.app)
rowsncolumns.app
Show HN: React SpreadSheet – Google Sheets-like performance
http://rowsncolumns.app
82 comments
> 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.
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...
We are planning to use Aria Live Region to support a11y
https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...
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
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.
:)
:)
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.
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)
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
Right now, i strip out formatting during paste
https://github.com/rowsncolumns/grid/blob/master/packages/gr...
Hope to get to it soon
Thanks for the support :)
Amazing job, this is fantastic. And also great that you can get access to the code.
Thank you :)
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?
Has there been any significant success stories wherein people made a fair return on their time under the "fund me" model?
> fund me style
Mind educating me on this? I am new to this. Any examples and what they use?
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/
This is definitely something I will use in one of my apps. Thanks for building.
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.
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.
Thanks for letting me know and sorry u were not able to access the site.
If you ever need a job! julien at serpapi.com
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.
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.
(LO Dev) what is LO missing?
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.
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.
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.
<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.
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.
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.
Excel > Google Sheets though
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).
Historically, their performance has been downright awful (especially in non-Chrome browsers).
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 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.
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?
How many rows do you usually manipulate at the same time?
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.
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.
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.
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.
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 :)
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.
Not many people use spreadsheets on a phone. OP, beyond some basic view only functionality, I wouldn't prioritize mobile.
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.
I doubt a lot of people edit excel files on mobile. I maybe wrong.
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.
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.
If you consider tablets a mobile device, it certainly sounds plausible.
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-...
[1] https://stackoverflow.com/questions/2402953/javascript-data-...
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
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.
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.
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.
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
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
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
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.
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.
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.
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 :)
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
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?
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
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.
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?
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.
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)
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
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.
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
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.
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.
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.
I did not add this options to the Context Menu yet.
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 :)