`<TreeMenu/>`

Check out the code for this demo here.

Dynamic (Array)

This menu is built dynamically using the data prop (array)
It is collapsible (the default), so expand/collapse icons show
It has no identifier prop for the TreeMenu, so it uses the array index when emitting events

Declarative

This menu is built w/ nested TreeNode components
It has collapsible=false, so no expand/collapse icons show
It has identifier="id", so it uses the 'id' prop when emitting events

Unbound: Won't Update UI State

This menu doesn't have any handlers applied that update UI state, so it's static.

Stateful, manages its own UI state

This menu has stateful=true, so it manages its own state w/o help from the Controller-View.

Waiting for interaction

Waiting for interaction

Waiting for interaction

Waiting for interaction

Dynamic (Object)

This menu is built dynamically using the data prop (object)
It is collapsible (the default), so expand/collapse icons show
It has no identifier prop for the TreeMenu, so it uses the object key when emitting events

Dynamic - No Checkboxes

This menu is built dynamically using the data prop (object)
It doesn't have checkboxes, but does have selection state

Label Filter

This menu has a labelFilter prop that truncates the displayed label

Renderers

Using renderer (node factory) methods as arguments

Selection w/o Checkboxes Menu

Option 1

Sub Option 1

Sub Option 2

Sub-Sub Option 1

Sub-Sub Option 2

Option 2

Label Filter Menu

Option 1 w...

Option 2 a...

Option A w...

Option B w...

Option 3 w...

Option 4 w...

Label/Checkbox Renderers Menu

Option 1 w... <span/>

Option 2 a... <span/>

Option A w... <span/>

Option B w... <span/>

Option 3 w... <span/>

Option 4 w... <span/>

Waiting for interaction

Waiting for interaction