This page covers a next version of Handsontable, and is not published yet.

This page covers a non-latest version of Handsontable.

# Using the HotColumn component in React

# Overview

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

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


    Handsontable's autoRowSize and 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 @handsontable/react.

        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 getValue, setValue, open, close, and 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 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 (opens new window) sums it up pretty well.

        The example below uses the react-native-listener (opens new window) library to utilize the native mousedown event.

          # Using the renderer/editor components in 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 react-redux's connect method.