{"meta":"<h2 id=\"Guide\">Guide <a class=\"header-anchor scroll-count-item\" href=\"#Guide\" data-scroll-id=\"Guide\">#</a></h2>\n<h3 id=\"When To Use\">When To Use <a class=\"header-anchor scroll-count-item\" href=\"#When To Use\" data-scroll-id=\"When To Use\">#</a></h3>\n<p>Folders, organizational structures, taxonomy, countries, regions, etc. Most of the structures in the world are tree structures. The use of Tree can fully reveal the hierarchical relationships among them, and have interactive functions such as expanding and closing, selections.</p>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Tree\">Tree <a class=\"header-anchor scroll-count-item\" href=\"#Tree\" data-scroll-id=\"Tree\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n<th>Supported Version</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>Chidren of the tree component</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>dataSource</td>\n<td>Data source of the tree component</td>\n<td>TreeDataType[]</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>showLine</td>\n<td>Show line or not</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>selectable</td>\n<td>Selectable nodes or not</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>selectedKeys</td>\n<td>Selected keys array (controlled)</td>\n<td>string[]</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>defaultSelectedKeys</td>\n<td>Default selected keys array</td>\n<td>string[]</td>\n<td>[]</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onSelect</td>\n<td>Callback function when selected or unselected a node<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>selectedKeys</em>: Array of selected keys<br><em>extra</em>: Extra parameters<br><strong>return</strong>:<br>Void</td>\n<td>(<br> selectedKeys: string[],<br> extra: {<br> selectedNodes: Array&lt;NodeInstance&gt;;<br> node: NodeInstance;<br> selected: boolean;<br> event: React.KeyboardEvent | React.MouseEvent;<br> }<br> ) =&gt; void</td>\n<td>() =&gt; {}</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>multiple</td>\n<td>Multiple selectable</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>checkable</td>\n<td>Checkable nodes or not</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>checkedKeys</td>\n<td>Checked keys array or <code>{checked: Array, indeterminate: Array}</code> object (controlled)</td>\n<td>| {<br> checked: string[];<br> indeterminate: string[];<br> }<br> | string[]</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>defaultCheckedKeys</td>\n<td>Default checked keys array (uncontrolled)</td>\n<td>| {<br> checked: string[];<br> indeterminate: string[];<br> }<br> | string[]</td>\n<td>[]</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>checkStrictly</td>\n<td>Whether the checkbox is fully controlled (parent</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>checkedStrategy</td>\n<td>Define how to fill the checked state when selected</td>\n<td>&apos;all&apos; | &apos;parent&apos; | &apos;child&apos;</td>\n<td>&apos;all&apos;</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onCheck</td>\n<td>Callback function when checked or unchecked a checkbox<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>checkedKeys</em>: Array of checked keys<br><em>extra</em>: Extra parameters<br><strong>return</strong>:<br>Void</td>\n<td>(<br> checkedKeys: string[],<br> extra: {<br> checkedNodes: Array&lt;NodeInstance&gt;;<br> checkedNodesPositions: Array&lt;NodeInstance&gt;;<br> indeterminateKeys: string[];<br> node: NodeInstance;<br> checked: boolean;<br> key: Key;<br> }<br> ) =&gt; void</td>\n<td>() =&gt; {}</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>expandedKeys</td>\n<td>Expanded keys array (controlled)</td>\n<td>string[]</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>defaultExpandedKeys</td>\n<td>Default expanded keys array (uncontrolled)</td>\n<td>string[]</td>\n<td>[]</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>defaultExpandAll</td>\n<td>Whether to expand all nodes by default</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>autoExpandParent</td>\n<td>Whether to automatically expand parent nodes</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onExpand</td>\n<td>Callback function when expanded or collapsed a node<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>expandedKeys</em>: Array of expanded keys<br><em>extra</em>: Extra parameters<br><strong>return</strong>:<br>Void</td>\n<td>(<br> expandedKeys: string[],<br> extra: {<br> node: NodeInstance;<br> expanded: boolean;<br> }<br> ) =&gt; void</td>\n<td>() =&gt; {}</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>editable</td>\n<td>Editable nodes or not</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onEditFinish</td>\n<td>Callback function when edit finish<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>key</em>: Node key<br><em>label</em>: Node label<br><em>node</em>: Node instance<br><strong>return</strong>:<br>Void</td>\n<td>(key: Key, label: string, node: NodeInstance) =&gt; void</td>\n<td>() =&gt; {}</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>draggable</td>\n<td>Draggable nodes or not</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onDragStart</td>\n<td>Callback function when drag start<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>info</em>: Extra parameters<br><strong>return</strong>:<br>Void</td>\n<td>(info: {<br> event: React.MouseEvent;<br> node: NodeInstance;<br> expandedKeys: string[];<br> }) =&gt; void</td>\n<td>() =&gt; {}</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onDragEnter</td>\n<td>Callback function when drag enter<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>info</em>: Extra parameters<br><strong>return</strong>:<br>Void</td>\n<td>(info: {<br> event: React.MouseEvent;<br> node: NodeInstance;<br> expandedKeys: Array&lt;string&gt;;<br> }) =&gt; void</td>\n<td>() =&gt; {}</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onDragOver</td>\n<td>Callback function when drag over<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>info</em>: Extra parameters<br><strong>return</strong>:<br>Void</td>\n<td>(info: { event: React.MouseEvent; node: NodeInstance }) =&gt; void</td>\n<td>() =&gt; {}</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onDragLeave</td>\n<td>Callback function when drag leave<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>info</em>: Extra parameters<br><strong>return</strong>:<br>Void</td>\n<td>(info: { event: React.MouseEvent; node: NodeInstance }) =&gt; void</td>\n<td>() =&gt; {}</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onDragEnd</td>\n<td>Callback function when drag end<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>info</em>: Extra parameters<br><strong>return</strong>:<br>Void</td>\n<td>(info: { event: React.MouseEvent; node: NodeInstance }) =&gt; void</td>\n<td>() =&gt; {}</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onDrop</td>\n<td>Callback function when drop<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>info</em>: Extra parameters<br><strong>return</strong>:<br>Void</td>\n<td>(info: {<br> event: React.MouseEvent;<br> node: NodeInstance;<br> dragNode: NodeInstance;<br> dragNodesKeys: Array&lt;string&gt;;<br> dropPosition: number;<br> }) =&gt; void</td>\n<td>() =&gt; {}</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>canDrop</td>\n<td>Whether the node can be a target node for drag<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>info</em>: Extra parameters<br><strong>return</strong>:<br>Whether can be a target node</td>\n<td>(info: {<br> event?: React.MouseEvent;<br> node: NodeInstance;<br> dragNode: NodeInstance;<br> dragNodesKeys: Array&lt;string&gt;;<br> dropPosition: number;<br> }) =&gt; boolean</td>\n<td>() =&gt; {}</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>loadData</td>\n<td>Asynchronous load data function<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>node</em>: Node instance</td>\n<td>(node: NodeInstance) =&gt; Promise&lt;unknown&gt;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>filterTreeNode</td>\n<td>Highlight the node<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>node</em>: Node instance<br><strong>return</strong>:<br>Whether is filtered</td>\n<td>(node: NodeInstance) =&gt; boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onRightClick</td>\n<td>Callback function when right click a node<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>info</em>: Extra parameters<br><strong>return</strong>:<br>Void</td>\n<td>(info: { event: React.MouseEvent; node: NodeInstance }) =&gt; void</td>\n<td>() =&gt; {}</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>isLabelBlock</td>\n<td>Whether the node occupies the remaining space</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>isNodeBlock</td>\n<td>Whether the node occupies a line</td>\n<td>boolean | Record&lt;string, unknown&gt;</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>animation</td>\n<td>Whether to open the animation</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>focusedKey</td>\n<td>Current focused submenu or menu item key</td>\n<td>Key</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>renderChildNodes</td>\n<td>Render child nodes<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>nodes</em>: All child nodes<br><strong>return</strong>:<br>Child nodes</td>\n<td>(nodes: NodeElement[]) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>labelRender</td>\n<td>Render a single child node<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>node</em>: Node data<br><strong>return</strong>:<br>Return node</td>\n<td>(node: Record&lt;string, unknown&gt;) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>1.25</td>\n</tr>\n<tr>\n<td>immutable</td>\n<td>Whether it is immutable data</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>1.23</td>\n</tr>\n<tr>\n<td>useVirtual</td>\n<td>Whether to open virtual scrolling</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Tree Node\">Tree.Node <a class=\"header-anchor scroll-count-item\" href=\"#Tree Node\" data-scroll-id=\"Tree Node\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>Chidren</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>label</td>\n<td>Label of the node</td>\n<td>React.ReactNode</td>\n<td>&apos;--</td>\n<td></td>\n</tr>\n<tr>\n<td>selectable</td>\n<td>Whether the node is selectable or not (overrides Tree&apos;s selectable)</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>checkable</td>\n<td>Whether the node has a checkbox or not (overrides Tree&apos;s checkable)</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>editable</td>\n<td>Whether the node is editable or not (overrides Tree&apos;s editable)</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>draggable</td>\n<td>Whether the node is draggable or not (overrides Tree&apos;s draggable)</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Whether the node is disabled or not</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>checkboxDisabled</td>\n<td>Whether the checkbox is disabled or not</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>isLeaf</td>\n<td>Whether the node is a leaf node or not</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n"}