/ S

React 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.

In this article

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

TIP

To use the Handsontable API, you'll need access to the Handsontable instance. You can do that by utilizing a reference to the HotTable component, and reading its hotInstance property.

For more information, see the Instance methods page.

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:

export const ExampleComponent = () => {
  const hotRef = useRef(null);

  useEffect(() => {
    const hot = hotRef.current.hotInstance;

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

    cellProperties.renderer; // "numeric"
    cellProperties.editor; // "numeric"
    cellProperties.validator; // "numeric"
    cellProperties.type; // "numeric"
  });

  return (
    <HotTable
      ref={hotRef}
      // set a cell type for the entire grid
      type="numeric"
    />
  );
};

← Cell renderer →