Tree

PropTypeDefaultRequiredDescription
nodesObject{}trueNodes
configIConfiguration{}trueTree 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:

PropTypeDefaultRequiredDescription
textString""falseText displayed in the node
childrenArray[]falseArray of children
stateINodeStatenullfalseState of the node
{
    text: "text example",
    children: [ "childrenid1", "childrenid2" ],
    state: {
        opened: true,
        disabled: false
        ...
    }
}

State

Type: Object
Default: Empty Object

PropTypeDefaultRequiredDescription
openedBooleanfalsefalseOpen or close the node
disabledBooleanfalsefalseDisable checkbox, node edition and Drag and drop
editableBooleantruefalseNode field can be edited
draggableBooleantruefalseDetermine if a node is draggable or not
dropableBooleantruefalseDetermine if a node is dropable or not
checkedBooleanfalsefalseNode checkbox state
indeterminateBooleanfalsefalseNode checkbox indeterminate state
isLoadingBooleanfalsefalseUsed for async loading

Configuration

Tree Configuration Type: Object
Default: Empty Object

PropTypeDefaultRequiredDescription
rootsArray[]trueRoots of the tree, this property is mandaroty to build the tree
leavesArray[]falseLeaves of the tree, if empty leaves will be nodes without children. Leaves does not have any Open / Close icon
paddingNumber25falsePadding for each new level
editableBooleanfalsefalseDetermine globally if nodes are editable. When false, no node is editable even if node state is editable
editingStringnullfalseThe id of the current editing node
editableClassString"editable"falseCustomize node class when node is editable
checkboxesBooleanfalsefalseShow or hide checkboxes
checkModeString"manual"falseCheckmode can be "manual" or "auto". When auto mode is enabled, it triggers an event to check children
dragAndDropBooleanfalsefalseEnable or disable globally drag and drop
keyboardNavigationBooleanfalsefalseEnable or disable keyboard navigation.
enter: edit
esc: stop edit
up: previous
down: next
space: check
disabledBooleanfalsefalseDisable all tree nodes
disabledClassString"disabled"falseCustomize node class when node is disabled
openedIconIIcon{}falseCustomize icon when node is opened
closedIconIIcon{}falseCustomize icon when node is closed
focusClassString"focused"falseCustomize node class when node is focused
checkedClassString"checked"falseCustomize node class when node is checked
indeterminateClassString"indeterminate"falseCustomize 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.

PropTypeDefaultRequiredDescription
typeString"shape"falsetype can be "shape", "class", "img"
widthNumbernullfalsewidth of the icon
heightNumbernullfalseheight of the icon
classString / ArraynullfalseEven if your icon is drawn you can add a class to it
styleString / ObjectnullfalseInline icon style
viewboxStringnullfalseViewbox of the drawn icon, for more information check svg icon doc
dStringnullfalseIcon drawn coordinates
fillStringnullfalseFill color of the svg icon
strokeStringnullfalseSVG 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

PropTypeDefaultRequiredDescription
typeString"class"falsetype can be "shape", "class", "img"
classString / ArraynullfalseThe corresponding svg class
styleString / Object

img

You can also decide to use an image as Icon.

PropTypeDefaultRequiredDescription
typeString"img"falsetype can be "shape", "class", "img"
srcStringnullfalseThe image source
altStringnullfalseThe alt tag
widthNumbernullfalsewidth of the icon
heightNumbernullfalseheight of the icon
classString / Arraynullfalseven if your icon is an image you can add a class to it
styleString / ObjectnullfalseInline icon style