Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web

github.com

Post reply on HN
Print view View original

51–60 of 108 posts

Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web

#51

Post by chatmasta »

kybernetikos wrote: post #49

Here's a canvas datagrid that I've come across in case anyone is interested in the genre: https://tonygermaneri.github.io/canvas-datagrid/

Related note, I would warn people to stay away from this one, which I've hacked around in production for the past year: https://github.com/adazzle/react-data-grid

It's a very solid project, also based on canvas, and works (mostly) as advertised, but there are some strange procedures around repo maintenance and releases, and it's a massive dependency bundle. Docs can also out of date or missing information. If you don't require much customization and intend to release it as an internal tool, it will suit your purposes. But anything beyond that, I would look elsewhere. Nothing against adazzle, it's just an old repo and they inherited quite a bit of technical debt.

Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web

#52

Post by Technetium_Hat »

microcolonel wrote: post #7
kevsim wrote: post #4

I think a description of why canvas was used would be nice in the README. My (probably naive) view is that browsers are pretty good at table-ish layouts so it’d be great to know why canvas was chosen.

> My (probably naive) view is that browsers are pretty good at table-ish layouts so it’d be great to know why canvas was chosen. The browser certainly makes this convenient... until you have more than a few thousand cells. At some point even just having the whole table loaded into the DOM is too layout and memory intensive (except on servo, sometimes). When you try, then, to work around those limitations, continuing…

Tables are also extremely performant in internet explorer, where table rendering is gpu accelerated.

Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web

#53

Post by _bxg1 »

I've theorized for a while about what it would look like to try and build a generic, app-focused layout engine on Canvas. The DOM gives you lots of things for free and has a long history of backward-compatibility, but both of those things come with huge costs in terms of performance and (to a degree) complexity. The fact that the DOM a) is stateful and b) was originally designed for documents, not apps, causes lots of challenges when what you want to build are apps. The entire reason React exists is to try and force the stateful DOM back into a functional paradigm.

I'd be very curious to learn how generic this project's layout system is.

Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web

#54

Post by deckar01 »

stronglikedan wrote: post #34
deckar01 wrote: post #29

The cells need to have some kind of hover styling. Without it the demo feels non-interactive.

I'm not sure I've ever seen hover styling in any spreadsheet app, whether native or online. I think it would detract from the user's focus. This certainly feels interactive when I interact with it like I would any other spreadsheet. Are you unable to select cells and/or type in them?

I think part of the problem was the canvas is being rendered below native resolution on a retinal display, so the blurry upscaling made it look like a screenshot.

None of the spreadsheet apps I tested have hover styling, but that seems like a violation of basic UX principles. Cells are the primary element of interaction, so I would expect some visual indicator to communicate interactivity (even if it is just the cursor changing).

Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web

#55

Post by rkangel »

_bxg1 wrote: post #53

I've theorized for a while about what it would look like to try and build a generic, app-focused layout engine on Canvas. The DOM gives you lots of things for free and has a long history of backward-compatibility, but both of those things come with huge costs in terms of performance and (to a degree) complexity. The fact that the DOM a) is stateful and b) was originally designed for documents, not apps, causes lots o…

What you describe is similar to what the flutter developers are trying to achieve with their web port 'Hummingbird'. Flutter is currently almost entirely aimed at mobile apps, but it would be wonderful to be able to share UI code between apps and web frontend, with a consistent layout model.

This post is a good read: https://medium.com/flutter-io/hummingbird-building-flutter-f...

Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web

#56

Post by voctor »

This is really interesting! I've hoped of a scenegraph based web in the past, all rendered in a canvas (indexing can be done by serving a simplified html representation by checking the user agent). I think the most challenging part is text rendering, but some people have done some work in this area (https://github.com/astiopin/webgl_fonts). Also, we may need some sort of API to trigger keyboard showing on mobile device. Anyway, congratulations!

Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web

#57

Post by selimthegrim »

y4mi wrote: post #45
dartf wrote: post #44

Earlier quoted context omitted.

It looks like it's case sensitive. Worked for me with "=SUM(A5:A8)"

i was about to say the same thing... to anyone else wondering: you can browse the available function with the button to the right. ( SUM, AVERAGE, MIN, MAX and CONCAT )

Wonder how much demand there will be for SUMPRODUCT

Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web

#59

Post by tobyhinloopen »

myliang wrote: post #16
kevsim wrote: post #4

I think a description of why canvas was used would be nice in the README. My (probably naive) view is that browsers are pretty good at table-ish layouts so it’d be great to know why canvas was chosen.

1 canvas performance is higher than dom rendering 2 easy to write code github.com/xspreadsheet used table

How is canvas rendering performance higher than dom rendering when you’re rendering boxes and text...

Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web

#60

Post by tobyhinloopen »

microcolonel wrote: post #7
kevsim wrote: post #4

I think a description of why canvas was used would be nice in the README. My (probably naive) view is that browsers are pretty good at table-ish layouts so it’d be great to know why canvas was chosen.

> My (probably naive) view is that browsers are pretty good at table-ish layouts so it’d be great to know why canvas was chosen. The browser certainly makes this convenient... until you have more than a few thousand cells. At some point even just having the whole table loaded into the DOM is too layout and memory intensive (except on servo, sometimes). When you try, then, to work around those limitations, continuing…

You don’t have to render 1000s of table cells. You only render the visible cells and replace the content when scrolling.
Post reply on HN