3.1.0 of the
@handsontable/react wrapper introduces a new feature - a
It doesn't only allow to configure the column-related settings using the
attributes, but also create custom renderers and editors using React components.
Declaring column settings
To declare column-specific settings, simply pass the settings as
HotColumn props (either separately
or wrapped as a
settings prop, exactly as you would with
Declaring a custom renderer as a component
The wrapper allows creating custom renderers using React components.
Although it's possible to use class-based react components for this purpose, we strongly suggest using functional components, as the
state of a class-based component would
re-initialize on every Handsontable render.
To mark a component as a Handsontable renderer, simply add a
hot-renderer attribute to it.
autoColumnSizeoptions require calculating the widths/heights of some of the cells before rendering them into the table, it's not currently possible to use them alongside component-based renderers, as they're created after the table's initialization.
Be sure to turn those options off in your Handsontable config, as keeping them enabled may cause unexpected results (note that
autoColumnSizeis enabled by default).
Declaring a custom editor as a component
You can also utilize the React components to create custom editors. To do so, you'll need to create a component compatible with
Handsontable's editor class structure. The easiest way to do so is to extend
BaseEditorComponent - a base editor component exported from
This will give you a solid base to build upon. Note, that the editor component needs to tick all of the boxes that a regular editor does,
such as defining the
which are abstract in the
BaseEditor. For more info, check the documentation on
creating custom editors from scratch.
It's also worth noting, that editors in Handsontable will close after clicking on them if the
outsideClickDeselects option is enabled (and it is by default).
To prevent that,
mousedown event on the editor container must call
event.stopPropagation(). In React's case, however, it doesn't work out-of-the-box, because
of the way React handles events (this article by Eric Clemmons sums it up pretty well). In the example
below, we're using the react-native-listener library, to utilize the native
Using the renderer/editor components with React's Context
It this example we're using React's Context to pass the information available in the main app component all the way to the renderer. In this case we're using just the renderer, but the same principle works with editors just as well.
A more advanced example
In this example we will create a custom editor component with an external dependency, which will act as both renderer and editor. Information from that component will be used by another component (first column renderer)
to change the way it behaves.
The information will be passed using Redux and