import { Tree } from 'rsuite';
Examples
Basic
Quality
Planner
Earline
Iliana
Alexis
Georgette
Producer
Callie
Bradford
Jakayla
Johnathon
Coordinator
Show Indent Lines
docs
pages
components
tree
fragments
async
index.tsx
styles.css
packages
rsuite
src
components
Tree
index.tsx
styles.css
node_modules
rsuite
src
components
Tree
index.tsx
package.json
README.md
LICENSE
package.json
tsconfig.json
webpack.config.js
Draggable
Communications
Engineer
Garrison
Colleen
Dixie
Dolly
Orchestrator
Easton
Camille
Malcolm
Danyka
Designer
Audreanne
Lizeth
Hettie
Ashlynn
Functionality
Strategist
Mattie
Hubert
Jarod
Clare
Representative
Eleanora
Jarod
Finn
Al
Orchestrator
Chloe
Jennifer
Irma
Elijah
Markets
Assistant
Felicia
Triston
Irwin
River
Designer
Cody
Meggie
Kamren
Aubrey
Administrator
Roberto
Raquel
Zackery
Jaydon
Async
Folder owner
Folder exile
File usage
File whelp
File frame
Props
<Tree>
Property | Type (Default) |
Description |
---|---|---|
childrenKey | string ('children') |
Tree data structure Children property name |
classPrefix | string('picker') |
The prefix of the component CSS class |
data * | ItemDataType[] | Tree Data |
defaultExpandAll | boolean | Expand all nodes By default |
defaultExpandItemValues | string[] | Set the value of the default expanded node |
defaultValue | string | Default selected Value |
disabledItemValues | string[] | Disable item by value |
draggable | boolean | Setting drag node |
expandItemValues | string[] | Set the value of the expanded node (controlled) |
getChildren | (item: ItemDataType) => Promise<ItemDataType > | load node children data asynchronously |
height | number (360px) |
Height of tree. When virtualize is true, you can set the height of tree |
labelKey | string ('label') |
Tree data structure Label property name |
listProps | ListProps | Properties of virtualized lists. |
onChange | (value:string) => void | Callback function for data change |
onDragEnd | (item: ItemDataType, event) => void | Called when node drag end |
onDragEnter | (item: ItemDataType, event) => void | Called when node drag enter |
onDragLeave | (item: ItemDataType, event) => void | Called when node drag leave |
onDragOver | (item: ItemDataType, event) => void | Called when node drag over |
onDragStart | (item: ItemDataType, event) => void | Called when node drag start |
onDrop | (dropData: [DropDataType][drop], event) => void | Called when node drop |
onExpand | (expandItemValues: string[], item: ItemDataType, concat:(data, children) => Array) => void | Callback When tree node is displayed |
onSelect | (item:ItemDataType, value, event) => void | Callback function after selecting tree node |
renderTreeIcon | (item: ItemDataType) => ReactNode | Custom Render icon |
renderTreeNode | (item: ItemDataType) => ReactNode | Custom Render tree Node |
searchKeyword | string | searchKeyword (Controlled) |
showIndentLine | boolean | Whether to show indent line |
value | string | Selected value |
valueKey | string ('value') |
Tree data Structure Value property name |
virtualized | boolean | Whether using Virtualized List |
ts:ItemDataType
interface ItemDataType {
/** The value of the option corresponds to the `valueKey` in the data. **/
value: string;
/** The content displayed by the option corresponds to the `labelKey` in the data. **/
label: ReactNode;
/**
* The data of the child option corresponds to the `childrenKey` in the data.
* Properties owned by tree structure components, such as TreePicker, Cascader.
*/
children?: ItemDataType[];
/**
* Properties of grouping functional components, such as CheckPicker, InputPicker
*/
groupBy?: string;
/**
* The children under the current node are loading.
* Used for components that have cascading relationships and lazy loading of children. E.g. Cascader, MultiCascader
*/
loading?: boolean;
}
ts:ListProps
interface ListProps {
/**
* Size of a item in the direction being windowed.
*/
itemSize?: number | ((index: number) => number);
/**
* Scroll offset for initial render.
*/
initialScrollOffset?: number;
/**
* Called when the items rendered by the list change.
*/
onItemsRendered?: (props: ListOnItemsRenderedProps) => void;
/**
* Called when the list scroll positions changes, as a result of user scrolling or scroll-to method calls.
*/
onScroll?: (props: ListOnScrollProps) => void;
}
ts:DropDataType
type DropDataType = {
/** drag node data */
dragNode: any;
/** dropNode data */
dropNode: any;
/** node drop position */
dropNodePosition: TREE_NODE_DROP_POSITION;
/** Update Data when drop node */
createUpdateDataFunction: (data: any[]) => any[];
};
enum TREE_NODE_DROP_POSITION {
DRAG_OVER = 0, // drag node in tree node
DRAG_OVER_TOP = 1, // drag node on tree node
DRAG_OVER_BOTTOM = 2 // drag node under tree node
}
Related components
<CheckTree>
Selector component, which supports a Checkbox on the TreePicker node for multiple selections.<TreePicker>
Used to show a tree-structured data.<CheckTreePicker>
Used to show a tree-structured data while supporting Checkbox selection.