Tree

Prop	Type	Default	Required	Description
nodes	Object	{}	true	Nodes
config	IConfiguration	{}	true	Tree configuration

Nodes

Type: { [id]: Node }
Default: Empty Object

If no node defined nothing will be displayed

{
    id1: {
        text: "textid1",
        children: ["id11"],
        state: { ... }
    },
    id11: {
        text: "textid11",
        children: [],
        state: { ... }
    },
    id2: {
        text
    }
}

Node

Type: Object
Default: Empty Object

A node has the following structure:

Prop	Type	Default	Required	Description
text	String	""	false	Text displayed in the node
children	Array	[]	false	Array of children
state	INodeState	null	false	State of the node

{
    text: "text example",
    children: [ "childrenid1", "childrenid2" ],
    state: {
        opened: true,
        disabled: false
        ...
    }
}

State

Type: Object
Default: Empty Object

Prop	Type	Default	Required	Description
opened	Boolean	false	false	Open or close the node
disabled	Boolean	false	false	Disable checkbox, node edition and Drag and drop
editable	Boolean	true	false	Node field can be edited
draggable	Boolean	true	false	Determine if a node is draggable or not
dropable	Boolean	true	false	Determine if a node is dropable or not
checked	Boolean	false	false	Node checkbox state
indeterminate	Boolean	false	false	Node checkbox indeterminate state
isLoading	Boolean	false	false	Used for async loading

Configuration

Tree Configuration Type: Object
Default: Empty Object

Prop	Type	Default	Required	Description
roots	Array	[]	true	Roots of the tree, this property is mandaroty to build the tree
leaves	Array	[]	false	Leaves of the tree, if empty leaves will be nodes without children. Leaves does not have any Open / Close icon
padding	Number	25	false	Padding for each new level
editable	Boolean	false	false	Determine globally if nodes are editable. When false, no node is editable even if node state is editable
editing	String	null	false	The id of the current editing node
editableClass	String	"editable"	false	Customize node class when node is editable
checkboxes	Boolean	false	false	Show or hide checkboxes
checkMode	String	"manual"	false	Checkmode can be "manual" or "auto". When auto mode is enabled, it triggers an event to check children
dragAndDrop	Boolean	false	false	Enable or disable globally drag and drop
keyboardNavigation	Boolean	false	false	Enable or disable keyboard navigation. enter: edit esc: stop edit up: previous down: next space: check
disabled	Boolean	false	false	Disable all tree nodes
disabledClass	String	"disabled"	false	Customize node class when node is disabled
openedIcon	IIcon	{}	false	Customize icon when node is opened
closedIcon	IIcon	{}	false	Customize icon when node is closed
focusClass	String	"focused"	false	Customize node class when node is focused
checkedClass	String	"checked"	false	Customize node class when node is checked
indeterminateClass	String	"indeterminate"	false	Customize node class when node is indeterminate

Icons

Type: Object
Default: Empty Object

Open and close icons are customizable Icons can be:

"shape" you can import a custom SVG shape.
"class" class svg icon (fontawsome like)
"image" a classic image coming from web or local image

The following table describe properties by "type" but they are all included in the same interface

shape

Shape is a custom drawn shape. For more information you can consult SVG icon docs.

Prop	Type	Default	Required	Description
type	String	"shape"	false	type can be "shape", "class", "img"
width	Number	null	false	width of the icon
height	Number	null	false	height of the icon
class	String / Array	null	false	Even if your icon is drawn you can add a class to it
style	String / Object	null	false	Inline icon style
viewbox	String	null	false	Viewbox of the drawn icon, for more information check svg icon doc
d	String	null	false	Icon drawn coordinates
fill	String	null	false	Fill color of the svg icon
stroke	String	null	false	SVG icon stroke property

Class

A simple way to use svg icons is to design them with classes. To se how it work you can check Front Awsome

Prop	Type	Default	Required	Description
type	String	"class"	false	type can be "shape", "class", "img"
class	String / Array	null	false	The corresponding svg class
style	String / Object

img

You can also decide to use an image as Icon.

Prop	Type	Default	Required	Description
type	String	"img"	false	type can be "shape", "class", "img"
src	String	null	false	The image source
alt	String	null	false	The alt tag
width	Number	null	false	width of the icon
height	Number	null	false	height of the icon
class	String / Array	null	false	ven if your icon is an image you can add a class to it
style	String / Object	null	false	Inline icon style

Introduction

Events

# Tree

# Nodes

# Node

# State

# Configuration

# Icons

# shape

# Class

# img

Tree

Nodes

Node

State

Configuration

Icons

shape

Class

img