Tutorial: Cell types

Cell types


Edit this page

Preview of built-in and custom cell types

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

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

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.renderers.TextRenderer,
  editor: Handsontable.editors.TextEditor
}]

This mapping is defined in file src/cellTypes.js