JavaScript Data Grid Cell functions

JavaScript Data GridCell functions

Render, edit, and validate the contents of your cells, using Handsontable's cell functions. Quickly set up your cells, using cell types.

On this page

Overview

With every cell in the Handsontable there are 3 associated functions:

Each of those functions are responsible for a different cell behavior. You can define them separately or use a cell type to define all three at once.

Renderer

Handsontable does not display the values stored in the data source directly. Instead, every time a value from data source needs to be displayed in a table cell, it is passed to the cell renderer function, together with the table cell object of type HTMLTableCellElement (DOM node), along with other useful information.

Renderer is expected to format the passed value and place it as a content of the cell object. Renderer can also alter the cell class list, i.e. it can add a htInvalid class to let the user know, that the displayed value is invalid.

Editor

Cell editors are the most complex cell functions. We have prepared a separate page custom cell editor explaining how cell edit works and how to write your own cell editor.

Validator

Cell validator can be either a function or a regular expression. A cell is considered valid, when the validator function calls a callback (passed as one of the validator arguments) with true or the validation regex test() (opens new window) method returns true. Because the validity of a value is determined only by the argument that is passed to callback, validator function can be synchronous or asynchronous.

Contrary to renderer and editor functions, the validator function doesn't have to be defined for each cell. If the validator function is not defined, then a cell value is always valid.

Cell type

Manually defining those functions for cells or columns would be tedious, so to simplify the configuration, Handsontable introduced cell types.

Cell functions getters

If, for some reason, you need to get the renderer, editor or validator function of a specific cell, you can use the standard getCellMeta() method to get all properties of a cell, and then refer to the cell functions like this:

// get cell properties for cell [0, 0]
const cellProperties = hot.getCellMeta(0, 0);

cellProperties.renderer; // get cell renderer
cellProperties.editor; // get cell editor
cellProperties.validator; // get cell validator
cellProperties.type; // get cell type

You can also get specific cell functions by using the following getters:

If a cell's functions are defined through a cell type, the getters will return the renderer, editor or validator functions defined for that cell type. For example:

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

const container = document.querySelector('#container');
const hot = new Handsontable(container, {
  columns: [{
    // set a cell type for the entire grid
    type: 'numeric'
  }]
});

// get cell properties for cell [0, 0]
const cellProperties = hot.getCellMeta(0, 0);

cellProperties.renderer; // numericRenderer
cellProperties.editor; // NumericEditor
cellProperties.validator; // numericValidator
cellProperties.type; // numeric