A controlled environment provides more flexibility and more possibilities for customization, but you need to implement your own logic for managing and retaining the view state of each tree, i.e. which items are expanded, selected, focused etc.
Furthermore, you need to provide all items directly and, if not all items are available at the start, implement custom logic to asynchronously load items if they need to be displayed.
As you can see from the example, you can focus the tree and even search for items, but not change the focused or selected item.
Managing the view state of the tree
To implement this, provide an implementation for the TreeChangeHandlers interface and provide it as spreaded props to the controlled environment, then provide a viewState prop that defines the visual state of each tree by providing a individual viewState for every tree in your environment.
Lazy loading items
As with the uncontrolled environment, you can provide an incomplete tree structure with
missing items that are referenced in other items as children. The
will be invoked if an item is expanded whose children are not yet loaded, so you can
implement logic to load the items if that handler is invoked, and provide them alongside existing
children in the next render iteration.
The props for the
ControlledTreeEnvironment are as follows: