HNHacker News
TopNewBestAskShowJobs

rowsncolumns

327 karma · joined July 17, 2020

Spreadsheet 2 - Composable, declarative Spreadsheet component.

www.rowsncolumns.app

submissionscomments
rowsncolumns··on Show HN: React Spreadsheet 2
Yes. We are working on adding support for aggregation and pivoting using https://github.com/finos/perspective
rowsncolumns··on Show HN: React Spreadsheet 2
Thank you :)
rowsncolumns··on Show HN: React Spreadsheet 2
Ah. Could you share more on how you got this error, Maybe i should setup sentry.io for the demo.
rowsncolumns··on Show HN: React Spreadsheet 2
Oops. Fixed, thats the handle i wanted, but it was taken :)
rowsncolumns··on Show HN: React Spreadsheet 2
Could you share which phone you were using? We use virtual rendering at both row and column level.
rowsncolumns··on Show HN: React Spreadsheet 2
Thank you. Collaboration is always a hard-one which requires both UI and database sync.
rowsncolumns··on Show HN: React Spreadsheet 2
Hi, Its not related to that project. Its an update to an already existing project under RownsColumns, hence the name.
rowsncolumns··on Show HN: React Spreadsheet 2
I think the question can be will a user wants to see 1M rows at a time. Probably no.

Spreadsheet uses virtualisation to display data, ie only data viewable in a Row x Column viewport is displayed. This improves rendering performance.

Data performance can be improved by 1. Lazy loading data or Infinite scrolling. We have a built-in async hook that does this. 2. Only save pointers to data that is being displayed. So if you have 1M rows, on the JavaScript side, you only load 100 rows in memory and when user scrolls, you can replace this rows with new data. This will make the browser happy. 3. Streaming data from the server similar to google sheets.

But to answer your question, we have a Max row limit of 1_048_576 and max column limit of 16_384

rowsncolumns··on Show HN: React Spreadsheet 2
Create your own Google sheets like Spreadsheet UI in your application using RowsnColumns Spreadsheet 2.

Declaratively render cells, embed external content, use custom formulas, collaborate with other users all using composable ReactJS UI components.

https://www.rowsncolumns.app/

rowsncolumns··on Show HN: React SpreadSheet – Google Sheets-like performance
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

rowsncolumns··on Show HN: React SpreadSheet – Google Sheets-like performance
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

rowsncolumns··on Show HN: React SpreadSheet – Google Sheets-like performance
Hey Robbert.. Thank you :)

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

rowsncolumns··on Show HN: React SpreadSheet – Google Sheets-like performance
Yes. If you are able to write custom formulas and async handlers for these formulas, I think this is certainly possible.
rowsncolumns··on Show HN: React SpreadSheet – Google Sheets-like performance
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.

rowsncolumns··on Show HN: React SpreadSheet – Google Sheets-like performance
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 :)

rowsncolumns··on Show HN: React SpreadSheet – Google Sheets-like performance
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)

rowsncolumns··on Show HN: React SpreadSheet – Google Sheets-like performance
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 :)
rowsncolumns··on Show HN: React SpreadSheet – Google Sheets-like performance
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

rowsncolumns··on Show HN: React SpreadSheet – Google Sheets-like performance
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

rowsncolumns··on Show HN: React SpreadSheet – Google Sheets-like performance
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

rowsncolumns··on Show HN: React SpreadSheet – Google Sheets-like performance
Good find. Tracking the issue here https://github.com/rowsncolumns/grid/issues/62
rowsncolumns··on Show HN: React SpreadSheet – Google Sheets-like performance
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.

rowsncolumns··on Show HN: React SpreadSheet – Google Sheets-like performance
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.

rowsncolumns··on Show HN: React SpreadSheet – Google Sheets-like performance
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.

rowsncolumns··on Show HN: React SpreadSheet – Google Sheets-like performance
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 :)

rowsncolumns··on Show HN: React SpreadSheet – Google Sheets-like performance
Thanks for the support :)
rowsncolumns··on Show HN: React SpreadSheet – Google Sheets-like performance
Yes you can https://rowsncolumns.app/docs/features/hidden-rows-columns

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

rowsncolumns··on Show HN: React SpreadSheet – Google Sheets-like performance
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.

rowsncolumns··on Show HN: React SpreadSheet – Google Sheets-like performance
Awesome Glad you liked it.
rowsncolumns··on Show HN: React SpreadSheet – Google Sheets-like performance
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.

:)

← PreviousPage 2 of 3Next →