5 ms·

Another plug - https://rowsncolumns.app https://rowsncolumns.app It's a canvas based SpreadSheet. The Grid works with React and Konva - https://konvajs.org/ ht

Another plug - https://rowsncolumns.app https://rowsncolumns.app It's a canvas based SpreadSheet. The Grid works with React and Konva - https://konvajs.org/ https://konvajs.org/ You can see the demo here - https://rowsncolumns.app/demo https://rowsncolumns.app/demo And a whole bunch of features and upcoming roadmap - https://rowsncolumns.app/#features https://rowsncolumns.app/#features We are launching formula support with Web Workers soon.

coopsmgoops 6y ago
Genuinely curious. Why go with canvas over HTMl elements? Isn't it reinventing the wheel a bit for things like input fields
- rowsncolumns 6y ago
  Sure. Input elements are still HTML FYI, we dont use canvas to simulate that. I have been working with DataGrids for more than 4-5 years. So I consider myself at a position to compare HTML and Canvas performance We went with Canvas because of the following reasons 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 https://konvajs.org/ https://konvajs.org/, any React developer will find it at home 5. No more 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
  - robbiejs 6y ago
    I wish you best of luck. I understand your decision to go with canvas. I have experimented with canvas quite a bit as well, as I could not get HTML DOM performance quite right initially. How I solved this for DataGridXL: Only columns are DOM nodes. Rows are not actually nodes, but values are spaced vertically using CSS and with a simple newline (\n) character in between. The grid lines are just that: they're grid lines that are repositioned using CSS animation when the user is scrolling. This means that when a user is scrolling, the DOM does not have to update by, let's say 20 rows x 10 columns = 200 DOM nodes. Only 10 column DOM nodes need to be redrawn. That's how DGXL works with DOM & HTML but is still in many cases faster than a canvas implementation. Plus it still is accessible. Try zooming the page or use CTRL+F. You can find and select any (visible) value inside the data grid. No problems there.
    - rowsncolumns 6y ago
      Interesting. Wonder how you can get cell level control for styling when you are rendering text nodes. Positioning elements by line-height may not be the best way. Canvas can be made fully accessible and screen reader friendly. See how Google Sheets has done. But yes, its not natively accessible like HTML.
      - robbiejs 6y ago
        That's the biggest trade-off I had to make. DXGL does not implement HTML markup in cells: see Features & Limits (https://www.datagridxl.com/docs/features-limits https://www.datagridxl.com/docs/features-limits). That's why I try to make it clear that DGXL is meant for input, editing values. It's not meant for templating or making tables look all pretty for presentation means. It was a tough decision I had to make, but in the end I am very happy with it. If people are looking for a data table with 100+ features (including markup), I will gladly refer them to 100 other products. But if they're looking for performance & reliability, I am quite convinced that DGXL is the best choice really.
xyzzy_plugh 6y ago
On mobile it _looks_ like a spreadsheet but seems entirely unresponsive to, for example, selecting a cell.
- rowsncolumns 6y ago
  Yeah. We may use learnings from Google Sheets on Mobile to design mobile interactions. Cell Editing will be moved to the bottom Cell-selection handles will be changed. Formatting Toolbar will be displayed On-demand Few more enhancements to make it touch friendly. We didnt receive any requests yet for mobile-support. When we do, it will be in our roadmap
- robbiejs 6y ago
  For a moment I thought you were talking about DataGridXL, but your comment is on the canvas grid? I actually made quite an effort to make DGXL work on touch screens. It's not there yet. It's basically read-only on touch for now, but you should have no problem selecting cells and copying values.
  - dkersten 6y ago
    For me, DGXL on iOS lets me select and scroll beautifully, but I cannot actually edit (I guess because the cells aren’t text fields, the device doesn’t know to open the on screen keyboard). So it works very well for output but doesn’t work for input.
    - robbiejs 6y ago
      You're right, the editor does not open on touch screens in this version. It's still possible to enable editing on touch screen, but it asks for a custom <input> element on the page that interacts with the grid, using methods setCellValues & getCellValues. It's certainly possible. Will put up a demo for it when I find the time.
      - dkersten 6y ago
        I just saw you actually do say its readonly in your documentation: https://www.datagridxl.com/docs/touchscreen-support https://www.datagridxl.com/docs/touchscreen-support That solution would actually work perfectly well for me: tap a cell and an edit widget pops up.
dkersten 6y ago
Just an observation: on iOS I can scroll through the table, but I cannot select any cells.

coopsmgoops 6y ago

Genuinely curious. Why go with canvas over HTMl elements? Isn't it reinventing the wheel a bit for things like input fields

rowsncolumns 6y ago
Sure. Input elements are still HTML FYI, we dont use canvas to simulate that. I have been working with DataGrids for more than 4-5 years. So I consider myself at a position to compare HTML and Canvas performance We went with Canvas because of the following reasons 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 https://konvajs.org/ https://konvajs.org/, any React developer will find it at home 5. No more 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
- robbiejs 6y ago
  I wish you best of luck. I understand your decision to go with canvas. I have experimented with canvas quite a bit as well, as I could not get HTML DOM performance quite right initially. How I solved this for DataGridXL: Only columns are DOM nodes. Rows are not actually nodes, but values are spaced vertically using CSS and with a simple newline (\n) character in between. The grid lines are just that: they're grid lines that are repositioned using CSS animation when the user is scrolling. This means that when a user is scrolling, the DOM does not have to update by, let's say 20 rows x 10 columns = 200 DOM nodes. Only 10 column DOM nodes need to be redrawn. That's how DGXL works with DOM & HTML but is still in many cases faster than a canvas implementation. Plus it still is accessible. Try zooming the page or use CTRL+F. You can find and select any (visible) value inside the data grid. No problems there.
  - rowsncolumns 6y ago
    Interesting. Wonder how you can get cell level control for styling when you are rendering text nodes. Positioning elements by line-height may not be the best way. Canvas can be made fully accessible and screen reader friendly. See how Google Sheets has done. But yes, its not natively accessible like HTML.
    - robbiejs 6y ago
      That's the biggest trade-off I had to make. DXGL does not implement HTML markup in cells: see Features & Limits (https://www.datagridxl.com/docs/features-limits https://www.datagridxl.com/docs/features-limits). That's why I try to make it clear that DGXL is meant for input, editing values. It's not meant for templating or making tables look all pretty for presentation means. It was a tough decision I had to make, but in the end I am very happy with it. If people are looking for a data table with 100+ features (including markup), I will gladly refer them to 100 other products. But if they're looking for performance & reliability, I am quite convinced that DGXL is the best choice really.

xyzzy_plugh 6y ago

On mobile it _looks_ like a spreadsheet but seems entirely unresponsive to, for example, selecting a cell.

rowsncolumns 6y ago
Yeah. We may use learnings from Google Sheets on Mobile to design mobile interactions. Cell Editing will be moved to the bottom Cell-selection handles will be changed. Formatting Toolbar will be displayed On-demand Few more enhancements to make it touch friendly. We didnt receive any requests yet for mobile-support. When we do, it will be in our roadmap
robbiejs 6y ago
For a moment I thought you were talking about DataGridXL, but your comment is on the canvas grid? I actually made quite an effort to make DGXL work on touch screens. It's not there yet. It's basically read-only on touch for now, but you should have no problem selecting cells and copying values.
- dkersten 6y ago
  For me, DGXL on iOS lets me select and scroll beautifully, but I cannot actually edit (I guess because the cells aren’t text fields, the device doesn’t know to open the on screen keyboard). So it works very well for output but doesn’t work for input.
  - robbiejs 6y ago
    You're right, the editor does not open on touch screens in this version. It's still possible to enable editing on touch screen, but it asks for a custom <input> element on the page that interacts with the grid, using methods setCellValues & getCellValues. It's certainly possible. Will put up a demo for it when I find the time.
    - dkersten 6y ago
      I just saw you actually do say its readonly in your documentation: https://www.datagridxl.com/docs/touchscreen-support https://www.datagridxl.com/docs/touchscreen-support That solution would actually work perfectly well for me: tap a cell and an edit widget pops up.

dkersten 6y ago

Just an observation: on iOS I can scroll through the table, but I cannot select any cells.