There is a newer version of Handsontable available. Switch to the latest version ⟶

React Data Grid Integration with Redux

Maintain the data and configuration options of your grid by using the Redux state container.

Integrate with Redux

TIP

Before using any state management library, make sure you know how Handsontable handles data: see the Binding to data page.

The following example implements the @handsontable/react component with a readOnly toggle switch and the Redux state manager.

Simple example

Advanced example

This example shows:

  • A custom editor component (built with an external dependency, HexColorPicker). This component acts both as an editor and as a renderer.
  • A custom renderer component, built with an external dependency (StarRatingComponent).

The editor component changes the behavior of the renderer component, by passing information through Redux (and the connect() method of react-redux).