Handsontable

a minimalistic Excel-like data grid editor for HTML, JavaScript & jQuery

Cell types

This page is an introduction to Handsontable cell types:

Preview of built-in and custom cell types
Anatomy of a cell type

Preview of built-in and custom cell types

The below example shows all built-in cell types (in other words, combinations of cell renderers and editors) available in Handsontable:

text
numeric
checkbox
date
autocomplete

The same example also shows the declaration of custom cell renderers, namely yellowRenderer and greenRenderer.

Edit in jsFiddle

Anatomy of a cell type

A cell type is a predefined set of cell properties. Cell type defines what renderer and editor should be used for a cell. They can also define any different cell property that will be assumed for each matching cell.

For example writing:


        columns: [
          {
            type: 'text'
          }
        ]

Equals:


        columns: [
          {
            renderer: Handsontable.TextRenderer,
            editor: Handsontable.TextEditor
          }
        ]

This mapping is defined in file src/cellTypes.js

For more examples, head back to the main page.