JavaScript Data Grid Cell functions
Render, edit, and validate the contents of your cells, using Handsontable's cell functions. Quickly set up your cells, using cell types.
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
Related articles
Related guides
Related API reference
- Configuration options:
- Core methods:
- Hooks: