4 ms·
The Cells example is super interesting to me, because I've longed for an open source, liberally licensed, spreadsheet component for the web, similar to what exi
by benatkin 5y ago
The Cells example is super interesting to me, because I've longed for an open source, liberally licensed, spreadsheet component for the web, similar to what exists for rich editing (ProseMirror, Slate, Quill). Some UI frameworks like Material UI have a neat table component, but the pro version gets the fancy data grid, and it isn't designed to be able to function as a spreadsheet anyway.
Besides lacking an open source version, spreadsheets and data grids haven't been studied as well as they should be.
It is also difficult to build one using just the DOM. For instance, you can't have a table be horizontally scrollable with the scrollbar fixed at the bottom and also have a fixed header.
Here's something I played around with a while back that has keyboard navigation between cells. Going between pages isn't great. The default focus scrolling in Chrome skips a few rows, and it doesn't respect the fixed header when scrolling up to the top after scrolling down. https://table-edit-20210409.vercel.app/ https://table-edit-20210409.vercel.app/ https://gitlab.com/ResourcesCo/table-edit-20210409 https://gitlab.com/ResourcesCo/table-edit-20210409 I tried making it with CSS Grid just to see if it could be done, and it turns out, only with Firefox. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La... I'm thinking of drawing it with JavaScript, perhaps with a combination of canvas and DOM elements.
Back to the 7 GUIs - what's great about it is trying to build stuff from scratch. So much of web development is just putting components together and customizing them, but there is a lot of lower level work to do, and the more developers that attempt it, the more progress will be made.
Edit: found this, pretty interesting: https://github.com/TonyGermaneri/canvas-datagrid https://github.com/TonyGermaneri/canvas-datagrid
- csande17 5y ago> For instance, you can't have a table be horizontally scrollable with the scrollbar fixed at the bottom and also have a fixed header. You might actually be able to do that with position:sticky now: https://jsfiddle.net/0ydsve3x/1/ https://jsfiddle.net/0ydsve3x/1/
- benatkin 5y agoI couldn't get it to work with a table - only with having to scroll all the way to the bottom to find the horizontal scrollbar. Edit: hmm, it's working in the CodePen here: https://css-tricks.com/a-table-with-both-a-sticky-header-and-a-sticky-first-column/ https://css-tricks.com/a-table-with-both-a-sticky-header-and... I'll have to fully revisit what I was trying to do and see if I can get it working. Edit 2: Oh, I realized that I wanted the horizontal scrollbar to be sticky when it is an element taking part of the vertical space of a page, but more than a screenful. I found this that solves it but not for a table with a fixed header: https://amphiluke.github.io/handy-scroll/ https://amphiluke.github.io/handy-scroll/ To see what I'm talking about, go to the top of the demo, horizontally scroll, and note that horizontal scrollbar is shown when scrolling horizontally. Then click disable, and note that it isn't shown when scrolling horizontally, unless you go all the way to the bottom. Or, if you don't have a trackpad, you actually have to go all the way to the bottom to scroll it horizontally.
- jhgb 5y ago> because I've longed for an open source, liberally licensed, spreadsheet component for the web I assume SlickGrid (https://github.com/6pac/SlickGrid/wiki/Examples https://github.com/6pac/SlickGrid/wiki/Examples) didn't satisfy your requirements?
- benatkin 5y agoI hadn't checked it out in a while. Thanks. It satisfies some but not others, and is a bit more monolithic. I found a project called slickgrid-universal by one of the recent contributors. This looks neat except it takes a while to scroll: https://ghiscoding.github.io/slickgrid-universal/#/example11 https://ghiscoding.github.io/slickgrid-universal/#/example11