Editable grid using html Canvas

javascript canvas grid library
canvas grid github
react-canvas grid
canvas-datagrid react
canvas based grid
canvas grid js
slickgrid
openfin grid

I was recently very surprised when I noticed that in the latest iteration of Google Spreadsheets they are rendering the spreadsheet grid using a canvas tag, whereas in the past they used the tried and true <table><tr><td> to render the grid.

In the previous version only a fraction of actual rows are rendered at any one point in time using a virtual rows technique (similar to what's done in slickgrid). Which gives pretty good performance (slickgrid has a demo of 500,000 rows).

My Questions:

  1. How is canvas able to be so much more effective than the virtual DOM elements technique?
  2. When working with canvas in this fashion, how could one ensure the canvas renders at the same speed as scrolling, since unlike the virtual rows technique there is no pre-rendered buffer?
  3. Does anyone know of an open source example using html canvas to create an editable grid, or any other code example that accomplishes something similar?

Thanks.

To answer your question 3: Does anyone know of an open source example using html canvas to create an editable grid, or any other code example that accomplishes something similar?

Yes: Hypergrid. It's open source. It uses canvas and Google's Polymer. Have a look:

Hypergrid demo

Hypergrid in Github

Editable grid using html Canvas, To answer your question 3: Does anyone know of an open source example using html canvas to create an editable grid, or any other code example that� Canvas Examples. A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content. The markup looks like this:

I can only answer one of your questions for sure:

  1. Drawing on a Canvas is a simple process, it's just a simple big old bunch of colored bits. On the other hand DOM Elements have much more things like event handlers, mouse interactivity etc. All this sums up and makes DOM elements way heavier than just drawing on a canvas.

  2. There are quite some techniques for this, one of them is drawing onto an offscreen canvas then copy the relevant portions via putImageData. This is mostly combined with requestAnimationFrame so you just draw whenever the browser requests that. As I said I can not answer this 100%

  3. I'm pretty sure there is no such thing done already, but I can't tell for sure.

API Documentation - Canvas Datagrid, Canvas based data grid web component. Capable of dist/canvas-datagrid.js in your web page using a script tag that points to the source or use webpack. EditableGrid is an open source JavaScript library aimed at turning tables into fully editable components. Its API is focused on simplicity : only a few lines of code are necessary to get your first editable grid up and running. Originally, EditableGrid was a component developed for Hiflow Suite. Thereafter, we decided to factorize it into an

How can canvas be more effective at displaying a spreadsheet than using a DOM table?

Canvas is a write-only element so it has much less overhead than read-write elements. After you've drawn the visible portion of the spreadsheet on the canvas the canvas does not "remember" where it put the pixels.

Is canvas able to keep up with spreadsheet navigation (scrolling, etc)

You can display a large spreadsheet with scrollbars by creating a very large canvas element and wrapping the canvas in a smaller div element with the div set to overflow:scroll.

Also, Canvas is very fast and might be able to scroll & redraw a dynamically created spreadsheet. Canvas actually is natively double buffered and also uses any available GPU to speed drawings. If more speed is necessary you programmatically create additional "memory only" canvases which can be quickly drawn to the on-screen canvas as needed.

Do you know of any canvas based editable spreadsheets.

No, I don't know of any.

Canvas is write-only. A canvas spreadsheet becomes editable only with great programming effort. So canvas is probably the wrong tool for editing.

Chuckle...seems as I was typing my response Alexander Kludt was responding similarly--Ditto what he says!

TonyGermaneri/canvas-datagrid: Canvas based data grid , You can quickly edit the table layout using the Table Context Menu. With the Click the HTML Editor link to view the HTML Editor. Select the� When working with canvas in this fashion, how could one ensure the canvas renders at the same speed as scrolling, since unlike the virtual rows technique there is no pre-rendered buffer? Does anyone know of an open source example using html canvas to create an editable grid, or any other code example that accomplishes something similar? Thanks.

For people looking for another easy-to-use alternative that is quite similar to Hypergrid, take a look at: Canvas Datagrid

It is usable with only a few lines of code:

var container = document.getElementById('container')
var dataGrid = canvasDatagrid({
  parentNode: container
})

dataGrid.data = [
  {col1: 'row 1 column 1', col2: 'row 1 column 2', col3: 'row 1 column 3'},
  {col1: 'row 2 column 1', col2: 'row 2 column 2', col3: 'row 2 column 3'}
]

How do I insert a table using the Rich Content , Tip: You can also use the isContentEditable property to find out if the content of an element is editable or not. Browser Support. The numbers in the table specifies� Using a grid-view is very helpful when designing web pages. It makes it easier to place elements on the page. A responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink and expand as you resize the browser window.

FYI, Google Docs/Drive Spreadsheet uses canvas for the main spreadsheet/table display.

HTML DOM contentEditable Property, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java� JavaScript Grid Editable Cells. To make the grid editable simply set the editable property to true for a particular column definition in the configuration. All records in this column will become

How To Create an Expanding Grid, A simple lightweight JavaScript library for creating an easily editable data grid like the spreadsheet. Easy Editable Data Grid with Vanilla JavaScript – GridEdit HTML5 Canvas Range Slider With JavaScript – CanvasSlider. To edit the data displayed in a read-only grid, you have to click the record in the grid to open the form, edit the data, and then save. Editable grids : In addition to displaying data in a tabular format, provides rich inline editing capabilities on web and mobile clients including the ability to group, sort, and filter data within the same

Easy Editable Data Grid with Vanilla JavaScript, Editing Table Layout. You can quickly edit the table layout using the Table Context Menu. With the table selected you can� In an earlier post, I described how to use and configure editable grids in Dynamics 365. In this post I intend to dive a little deeper to look at how to add JavaScript. If you missed my earlier post, you can view it here. Note: Before I start to explain JavaScript, I want to point out that entity level business rules will apply to editable grids.

Managing Tables in the Rich Content Editor: Canvas@Cornell , Edit Table Properties. Click anywhere in the table. Click the Table icon in the menu bar, then click Table Properties. Edit the general properties of�

Comments
  • As of July/2015 there is an open source example. See my answer below.
  • Just a P.S.- I ended up (June '14) creating my own really simple [closed source :(] read-only grid with sort and drag and drop capabilities. I only mention it because it's not so hard to do. It has fixed row height- so I just made a an empty div with full height to get the scroll bar. I listen for a (throttled) scroll event and recreate the canvas each time, based on calculation of which rows to show. Drawing the canvas is really fast <50ms. For D&D I overlay canvas rows with div's. I then listen for drag events on those rows and associate it with real data. But now that I see hypergrid...
  • Wow! That demo is pretty phenomenal. Pushing the boundaries of what thought possible. Thanks for adding the link.
  • Thanks. Like you said to make the canvas completely interactive and editable requires a whole lot of work. It's not an obvious choice for something for this scale. But I guess that same simplicity is what allows it to be so fast. I wonder if we are going to see more canvas based "fake" DOM UI in the near future.
  • Native Canvas UX is growing in popularity as it takes market share from Flash (r.i.p Flash). However, canvas based text input will likely not replace DOM text-inputs. Cheers!
  • The OP's first sentence was "I noticed that in the latest iteration of Google Spreadsheets they are rendering the spreadsheet grid using a canvas tag".