Developer Tutorials

Component State in Adaptable Options

Summary

  • How to pass component state into Adaptable Options when using AdapTable React
  • Applies when options must react to React state (e.g. custom menu items that read or update app state)

The Adaptable Options object, once passed to the Adaptable instance at creation, is evaluated only once.

Caution

  • This means that any changes made to Adaptable Options after this point will not be recognized
  • Nor will they be reflected in the AdapTable instance

If you need to have dynamic options that can change based on the component state, you should not directly change the AdaptableOptions object.

Instead, you should define functions within the AdaptableOptions object that reference the latest values of the component state.

These functions will be evaluated at runtime, ensuring that the most recent state values are used.

Note

This pattern is for configuration held in Adaptable Options. When you render bespoke UI with ReactFrameworkComponent (custom toolbars, tool panels, and so on), you can often share state via React context instead — see Using State in Building Custom Components.

Passing Component State in AdaptableOptions
Fork
  • This example shows how to correctly pass component state in the AdaptableOptions parameter
  • We create a reference (useRef()) to the up-to-date custom menu item and use it in the AdaptableOptions object
  • The custom menu item:
    • displays the current value of the componentState
    • updates the componentState when clicked
PreviousUsing HotkeysNextSupporting AdapTable