Tree ui component for react

Jun 05, 2018
Tree ui component for react


tree ui component for react.

View demo Download Source


  • Support all popular browsers, including Internet Explorer 9 and above.


http://localhost:8018/examples/ online example:




see examples


Tree props

prefixClsprefix classString'rc-tree'
classNameadditional css class of root dom nodeString''
disabledwhether disabled the treeboolfalse
showLinewhether show lineboolfalse
showIconwhether show iconbooltrue
selectablewhether can be selectedbooltrue
multiplewhether multiple selectboolfalse
checkablewhether support checkedbool/React Nodefalse
defaultExpandAllexpand all treeNodesboolfalse
defaultExpandedKeysexpand specific treeNodesString[]-
expandedKeysControlled expand specific treeNodesString[]-
defaultExpandParentauto expand parent treeNodes when initbooltrue
autoExpandParentwhether auto expand parent treeNodesboolfalse
defaultCheckedKeysdefault checked treeNodesString[][]
checkedKeysControlled checked treeNodes(After setting, defaultCheckedKeys will not work). Note: parent and children nodes are associated, if the parent node's key exists, it all children node will be checked, and vice versa. When set checkable and checkStrictly, it should be an object, which contains checked array and halfChecked array.String[]/{checked:Array,halfChecked:Array}[]
checkStrictlycheck node precisely, parent and children nodes are not associatedboolfalse
defaultSelectedKeysdefault selected treeNodesString[][]
iconcustomize icon. When you pass component, whose render will receive full TreeNode props as component propselement/Function(props)-
selectedKeysControlled selected treeNodes(After setting, defaultSelectedKeys will not work)String[][]
onExpandfire on treeNode expand or notfunction(expandedKeys, {expanded: bool, node, nativeEvent})-
onCheckclick the treeNode/checkbox to firefunction(checkedKeys, e:{checked: bool, checkedNodes, node, event, nativeEvent})-
onSelectclick the treeNode to firefunction(selectedKeys, e:{selected: bool, selectedNodes, node, event, nativeEvent})-
filterTreeNodefilter some treeNodes as you need. it should return truefunction(node)-
loadDataload data asynchronously and the return value should be a promisefunction(node)-
onRightClickselect current treeNode and show customized contextmenufunction({event,node})-
onMouseEntercall when mouse enter a treeNodefunction({event,node})-
onMouseLeavecall when mouse leave a treeNodefunction({event,node})-
draggablewhether can drag treeNode. (drag events are not supported in Internet Explorer 8 and earlier versions or Safari 5.1 and earlier versions.)boolfalse
onDragStartit execs when fire the tree's dragstart eventfunction({event,node})-
onDragEnterit execs when fire the tree's dragenter eventfunction({event,node,expandedKeys})-
onDragOverit execs when fire the tree's dragover eventfunction({event,node})-
onDragLeaveit execs when fire the tree's dragleave eventfunction({event,node})-
onDropit execs when fire the tree's drop eventfunction({event, node, dragNode, dragNodesKeys})-
onDragEndit execs when fire the tree's dragend eventfunction({event,node})-

TreeNode props

note: if you have a lot of TreeNode, like more than 1000,
make the parent node is collapsed by default, will obvious effect, very fast.
Because the children hide TreeNode will not insert into dom.

classNameadditional class to treeNodeString''
disabledwhether disabled the treeNodeboolfalse
disableCheckboxwhether disable the treeNode' checkboxboolfalse
titletree/subTree's titleString/element'---'
keyit's used with tree props's (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. you'd better to set it, and it must be unique in the tree's all treeNodesStringtreeNode's position
isLeafwhether it's leaf nodeboolfalse
iconcustomize icon. When you pass component, whose render will receive full TreeNode props as component propselement/Function(props)-


The number of treeNodes can be very large, but when enable checkable,
it will spend more computing time, so we cached some calculations(e.g. this.treeNodesStates),
to avoid double computing. But, this bring some restrictions,
when you async load treeNodes, you should render tree like this
{this.state.treeData.length ? <Tree ...>{ => <TreeNode ... />)}</Tree> : 'loading tree'}


npm install npm start