For up-to-date Handsontable documentation, see handsontable.com/docs.

Handsontable easily handles several types of data that can be applied to particular cells, rows, columns, or the entire grid at once.

Regardless of the type of application you have built, cell types will always come in handy and are true value add for your end users. Read further to learn more about one of the most important features of Handsontable.

What is a cell type?

A cell type is a combined shortcut for an editor and a renderer. For example, a date cell type will use a datepicker as a visual editor, and the output will be a properly formatted date.

The cell type defines which editor and renderer will be used for a cell. In other words, writing:

    columns: [{
        type: 'text'
    }]

achieves exactly the same as:

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

Handsontable includes nine built-in cell types, and these are all defined in cellTypes catalog

• Autocomplete
• Checkbox
• Date
• Dropdown
• Handsontable in Handsontable
• Numeric
• Password
• Text
• Time

But you aren’t limited to only using the existing cell types as creating a new cell type is relatively painless.

Defining a column, row or a cell

To define a column type you will use the columns option. The columns option takes an array of objects as a source for the table settings, where each object is a new column. In the following example, we want the cells in the first column to accept numbers as an input, and then render them as formatted currency.

Defining a row type is a bit trickier as it requires us to first find its index. To do that we add two conditions to a cell , which will provide coordinates that we will use later to set the type of cells inside that row. Let’s say we want the first row to be a date type and the third to use text as an editor and password as a renderer. Take a look at how it might be done:

To turn a single cell into a useful dropdown editor with a numeric renderer we need to pass the correct coordinates of the target cell. Remember Handsontable requires x and y coordinates, so cell A1 would be defined as 0,0.

Defining a merged cell

A merged cell is no different than a regular cell in terms of defining the types, but it does require clarifying that the first cell in the set of merged cells defines the cell type. For instance, if you merge 4 cells ranging from A1 to B2, you should set the cell type only for cell A1 (0,0), as shown in the following example:

Using a context menu to change the type

The cell type can be changed by the end-user using a context menu. As you already know, a context menu can easily be adjusted to your needs, so we will use it to add some additional settings there. In the following example, we add an option to switch between a password and text type column.

Using a dropdown menu to change the type

If you are using the Pro version of Handsontable, you can add a dropdown menu to your column header. It is based on a context menu plugin, so the configuration of both is nearly identical. Use the dropdown menu below to change the type from text to password.

Conclusion

Defining a cell type allows you to enrich your app in minutes. However, the current pre-defined types won’t cover every user case. And although creating your own is relatively simple, we would still love to hear your ideas for new types of editors and renderers in the comments below.