To start using the
<TreeView /> component, all you need to import is
React, the code and styles of the component itself:
This is the most basic setup for a
<TreeView />. In the following sections we'll explore how to use the
<TreeView /> in various scenarios, styling and supported props.
In the example above, we've specified
in order to have some tree nodes render collapsed by default. Skip that if you don't want this behaviour.
Try using keyboard
to navigate between tree nodes and
to expand/collapse non-leaf nodes. For more details, see the Keyboard navigation page
Probably the most important prop of the
- an array with objects that have
properties. Further, the
property should be an array of the same shape - ad infinitum.
property of nodes in the
doesn't have to be a string - it can be any valid
(anything renderable by React). It can even be a function (will be called with the nodeProps
object) that should return a valid
Async tree nodes are another highlight feature of the
<TreeView />, so here's a basic demo of it:
Another very important concept to understand is how node paths are built and can be used, so make sure you continue by reading the Using node path property