# Using the
HotColumn component in React
You can configure the column-related settings using the
HotColumn component's attributes. You can also create custom renderers and editors using React components.
# Declaring column settings
To declare column-specific settings, pass the settings as
HotColumn properties, either separately or wrapped as a
settings property, 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 using 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.
autoColumnSize options require calculating the widths/heights of some of the cells before rendering them into the table. For this reason, 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. Please note that
autoColumnSize is enabled by default.
# Object data source
When you use object data binding for
HotColumn, you need to provide precise information about the data structure for columns. To do so, refer to the data for a column in properties as
data, for example,
<HotColumn data="id" />:
# 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 on. Note that the editor component needs to tick all of the boxes that a regular editor does, such as defining the
focus methods, 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 - default setting.
To prevent that, the
mousedown event on the editor container must call
If you are using React 17 and newer,
event.stopPropagation() should work for you as expected. See the React 17 release notes (opens new window) for details about event delegation.
Note that in case of React 16 and older, it wouldn't work out of the box because of the way how React used to handle events. This article by Eric Clemmons (opens new window) sums it up pretty well and presents a solution (react-native-listener (opens new window)).
# Using the renderer/editor components within React's Context
In this example, React's Context is used to pass the information available in the main app component to the renderer. In this case, we're using just the renderer, but the same principle works with editors just as well.
# An advanced example
In this example, the custom editor component is created with an external dependency. This acts as both renderer and editor. The renderer uses information from that component in the first column to change the way it behaves. Information is passed using Redux and