Tree
Introduction
A Tree
displays hierarchical data.
The below information is a snippet from the
related section in the Blueprint reference documentation.
Examples
Empty Folder
Usage
The state of a Tree
is determined by its contents
prop. To make an
interactive Tree
it must be wrapped in a stateful component to handle updates
to contents
.
API Reference
Tree
Prop Name | Required? | Type | Description |
---|---|---|---|
className | false | string | A space-delimited list of class names to pass along to a child element. |
contents | true | Array<ITreeNode<T>> | The data specifying the contents and appearance of the tree. |
onNodeClick | false | TreeEventHandler<T> | Invoked when a node is clicked anywhere other than the caret for expanding/collapsing the node. |
onNodeCollapse | false | TreeEventHandler<T> | Invoked when caret of an expanded node is clicked. |
onNodeContextMenu | false | TreeEventHandler<T> | Invoked when a node is right-clicked or the context menu button is pressed on a focused node. |
onNodeDoubleClick | false | TreeEventHandler<T> | Invoked when a node is double-clicked. Be careful when using this in combination with an `onNodeClick` (single-click) handler, as the way this behaves can vary between browsers. See http://stackoverflow.com/q/5497073/3124288 |
onNodeExpand | false | TreeEventHandler<T> | Invoked when the caret of a collapsed node is clicked. |
onNodeMouseEnter | false | TreeEventHandler<T> | Invoked when the mouse is moved over a node. |
onNodeMouseLeave | false | TreeEventHandler<T> | Invoked when the mouse is moved out of a node. |
TreeNode
Prop Name | Required? | Type | Description |
---|---|---|---|
childNodes | false | Array<ITreeNode<T>> | Child tree nodes of this node. |
children | false | React.ReactNode | |
className | false | string | A space-delimited list of class names to pass along to a child element. |
contentRef | false | (node: TreeNode<T>, element: HTMLDivElement | null) => void | |
depth | true | number | |
disabled | false | boolean | Whether this tree node is non-interactive. Enabling this prop will ignore mouse event handlers (in particular click, down, enter, leave). |
hasCaret | false | boolean | Whether the caret to expand/collapse a node should be shown. If not specified, this will be true if the node has children and false otherwise. |
icon | false | IconName | MaybeElement | The name of a Blueprint icon (or an icon element) to render next to the node's label. |
id | true | string | number | A unique identifier for the node. |
isExpanded | false | boolean | |
isSelected | false | boolean | Whether this node is selected. |
key | false | string | number | |
label | true | string | Element | The main label for the node. |
nodeData | false | T | An optional custom user object to associate with the node. This property can then be used in the `onClick`, `onContextMenu` and `onDoubleClick` event handlers for doing custom logic per node. |
onClick | false | (node: TreeNode<T>, e: MouseEvent<HTMLDivElement>) => void | |
onCollapse | false | (node: TreeNode<T>, e: MouseEvent<HTMLSpanElement>) => void | |
onContextMenu | false | (node: TreeNode<T>, e: MouseEvent<HTMLDivElement>) => void | |
onDoubleClick | false | (node: TreeNode<T>, e: MouseEvent<HTMLDivElement>) => void | |
onExpand | false | (node: TreeNode<T>, e: MouseEvent<HTMLSpanElement>) => void | |
onMouseEnter | false | (node: TreeNode<T>, e: MouseEvent<HTMLDivElement>) => void | |
onMouseLeave | false | (node: TreeNode<T>, e: MouseEvent<HTMLDivElement>) => void | |
path | true | number[] | |
secondaryLabel | false | string | MaybeElement | A secondary label/component that is displayed at the right side of the node. |
Related Reading
Blueprint Reference