9 ms·
Show HN: React SpreadSheet – Google Sheets-like performance
- rowsncolumns 6y agoHi 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 :)
- arjun27 6y agoAwesome work and love the pricing model.
- rowsncolumns 6y agoGood 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 6y 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.
- rowsncolumns 6y agoHi, 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/ARIA/ARIA_Live_Regions https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...
- randiantech 6y agoAmazing job, this is fantastic. And also great that you can get access to the code.
- rowsncolumns 6y agoThank you :)
- mcs_ 6y agoIncredible job, I just shared it with our React team. I hope to see it somewhere into our code.
- rowsncolumns 6y agoThank you. Appreciate it.
- sleepygardener 6y agosame here
- oscargrouch 6y agoThis is really well made. Congrats!
- rowsncolumns 6y agoAwesome Glad you liked it.
- uranium 6y agoA 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.
- artminister 6y agoAh. 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.
- hutch120 6y agoHi, 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 6y ago> fund me style Mind educating me on this? I am new to this. Any examples and what they use?
- hutch120 6y agoA "fund me style" could be something like https://opencollective.com/ https://opencollective.com/
- shabda 6y agoHas there been any significant success stories wherein people made a fair return on their time under the "fund me" model?
- swyx 6y agolove 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.
- rowsncolumns 6y agoThanks for the support :)
- mmerlin 6y agoIf 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)
- rowsncolumns 6y agoThanks.. 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/grid/src/hooks/useCopyPaste.ts#L139 https://github.com/rowsncolumns/grid/blob/master/packages/gr... Hope to get to it soon
- temptemptemp111 6y agoThoughts on crypt.ee?
- hartator 6y agoIf you ever need a job! julien at serpapi.com
- pauljeba 6y agoThis is definitely something I will use in one of my apps. Thanks for building.
- antisthenes 6y agoI'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_ 6y agoNot 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 6y agoFor 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.
- antisthenes 6y agoI 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 6y agoWhat 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.
- robbiejs 6y agoGoogle Sheets performance is terrible indeed. I carefully studied G. Sheets for our data grid product DatagridXL (https://datagridxl.com 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 6y agoI 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 6y agoHi, 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 6y agoFor the parser, we will be using https://github.com/LesterLyu/fast-formula-parser https://github.com/LesterLyu/fast-formula-parser
- hpen 6y agoCan you hide columns?
- rowsncolumns 6y agoYes 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.
- rosstex 6y agoYou had me at smooth scrolling. Take my money.
- rowsncolumns 6y agoThis 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 6y agoDoesn’t work on the iOS please make it mobile friendly.
- rowsncolumns 6y agoOn 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 6y agoIf you consider tablets a mobile device, it certainly sounds plausible.
- worldsayshi 6y agoSometimes 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.
- mmckelvy 6y agoNot many people use spreadsheets on a phone. OP, beyond some basic view only functionality, I wouldn't prioritize mobile.
- sidthegeek 6y agoWould 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-grid-for-millions-of-rows https://stackoverflow.com/questions/2402953/javascript-data-...
- rowsncolumns 6y agoI 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 6y agoDOM 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://news.ycombinator.com/item?id=23909894, https://datagridxl.com https://datagridxl.com
- shobhit-singhal 6y agoAwesome 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 6y agoThank 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 6y agoWorks well. What are the use cases for this library? Why use it over Google Sheets?
- mottosso 6y agoThis was my first thought as well, as someone who uses Google Sheets (also free) almost daily to manage personal and business information.
- rowsncolumns 6y agoThis 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 6y agoI 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 6y agoHotkeys in firefox don't seem to work properly. Pgup/Pgdn, ctrl-down etc just inputs the keycode on my machine.
- rowsncolumns 6y agoGood find. Tracking the issue here https://github.com/rowsncolumns/grid/issues/62 https://github.com/rowsncolumns/grid/issues/62
- airstrike 6y agoLooks 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 6y agoHi, 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 6y agoThanks. 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 6y agoCan't seem to select cells on android chrome
- rowsncolumns 6y agoOn 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 :)
- mmckelvy 6y agoThis 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 6y agoHi, 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 6y agoI 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 6y agoYes. If you are able to write custom formulas and async handlers for these formulas, I think this is certainly possible.
- beilabs 6y agoSupport 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 6y agoFormula 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 :)
- rowsncolumns 6y agoImages 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
- jcelerier 6y agothere'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 6y agoI’d still take Google Docs over LibreOffice any time of the day.
- quickthrower2 6y agoExcel > Google Sheets though
- grandinj 6y ago(LO Dev) what is LO missing?
- londons_explore 6y agoVery 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.
- tuananh 6y 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
- rowsncolumns 6y agoThanks 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.
- robbiejs 6y agoCongrats on your launch and front page mention! Must have been a lot of hard work, I can relate. Best of luck!
- rowsncolumns 6y agoHey Robbert.. Thank you :) And congrats on your launch too. Wish you all the best.
- techdata 6y agoThis 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 6y agoThanks. 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
- robbiejs 6y agoAnother 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.