ember-simple-tree
Lightweight, composable tree component for Ember without any dependency.
Compatibility
Compatibility
- Ember.js v3.16 or above
- Ember CLI v2.13 or above
- Node.js v12 or above
If you are using 0.5.x and would like to upgrade to 0.6.0, please note there are BREAKING CHANGES. For details, see Upgrading.
Installation
ember install ember-simple-tree
Usage
Basic example:
Standard example:
Ember Octane example:
Available actions
onCheck
Returns: node
Fired when a checkbox state changes.
onContextMenu
Returns: node
Fired on contextMenu event.
onHover
Returns: node
Fired when a mouse enters the node.
onHoverOut
Returns: node
Fired when a mouse leaves the node.
onSelect
Returns: node
Fired when a node is selected.
Available options
checkable
Default: false
Accepts: boolean
Displays a checkbox for each node.
Use in conjunction with model.isChecked
.
chosenId
Default: undefined
Accepts: id
Applies 'chosen' styling (font-weight: bold;
) to the specified node.
A tree will also auto-expand to a the chosen node if a valid chosenId
is provided.
chosenId
should relate to a node's model.id
.
expandDepth
Default: 0
Accepts: number
Expands the tree to a given depth.
0
will not expand the tree at all, a negative number will fully expand a tree, a positive number will expand a tree to the given depth.
recursiveCheck
Default: false
Accepts: boolean
When enabled, checking a box will also check children's boxes as well. Also enables indeterminate state for checkboxes.
Has no effect if checkable
is not enabled.
expandedIcon
Default: x-tree-expanded-icon
,
Accepts: string
or Component
or
Component to use for expanded icon
collapsedIcon
Default: x-tree-collapsed-icon
,
Accepts: string
or
Component to use for collapsed icon
Blocks
You may optionally pass a block to the x-tree
component to render each node area with custom HTML.
Model structure
The component uses recursion to display the tree. The model requires specific properties to properly function:
-
id
- unique identifier -
name
-string
used to display a node -
children
-array
of other nodes -
isChecked
-boolean
used for checkbox state -
isDisabled
-boolean
used to disable actions on a node (onSelect/onCheck) -
isExpanded
-boolean
used to expand a node (children) -
isIndeterminate
-boolean
used for checkbox "indeterminate" state -
isSelected
-boolean
optionally used for hover state -
isVisible
-boolean
used to display or hide a node
[{
id: 0,
name: 'Root',
isExpanded: true,
isSelected: false,
isVisible: true,
children: [
{
id: 1,
name: 'First Child',
isExpanded: true,
isSelected: false,
isVisible: true,
children: []
},
{
id: 2,
name: 'Second Child',
isExpanded: true,
isSelected: false,
isVisible: true,
children: [
{
id: 3,
name: 'First Grand Child',
isExpanded: true,
isSelected: true,
isVisible: true,
children: []
}
]
}
]
}]
A utility class is provided to convert a flat structure into a tree structure and vice-versa.