0
# Tree Component
1

2
The main Tree component provides comprehensive tree functionality with extensive configuration options for rendering hierarchical data, managing state, and handling user interactions.
3

4
## Capabilities
5

6
### Tree Component
7

8
Main tree container component that renders hierarchical data with full control over appearance, behavior, and interactions.
9

10
```typescript { .api }
11
/**
12
 * Main Tree component for displaying hierarchical data with rich interactions
13
 * @param props - Tree configuration and event handlers
14
 * @returns React tree component
15
 */
16
declare class Tree<TreeDataType extends BasicDataNode = DataNode> extends React.Component<TreeProps<TreeDataType>>;
17

18
interface TreeProps<TreeDataType extends BasicDataNode = DataNode> {
19
  // Core Configuration
20
  prefixCls?: string; // Default: 'rc-tree'
21
  className?: string;
22
  style?: React.CSSProperties;
23
  focusable?: boolean;
24
  tabIndex?: number;
25
  disabled?: boolean;
26
  direction?: Direction;
27
  rootClassName?: string;
28
  rootStyle?: React.CSSProperties;
29

30
  // Data Configuration
31
  children?: React.ReactNode;
32
  treeData?: TreeDataType[];
33
  fieldNames?: FieldNames;
34

35
  // Display Configuration
36
  showLine?: boolean;
37
  showIcon?: boolean;
38
  icon?: IconType;
39
  switcherIcon?: IconType;
40
  motion?: any;
41

42
  // Selection Configuration
43
  selectable?: boolean;
44
  multiple?: boolean;
45
  selectedKeys?: Key[];
46
  defaultSelectedKeys?: Key[];
47
  activeKey?: Key | null;
48

49
  // Expansion Configuration
50
  expandAction?: ExpandAction;
51
  expandedKeys?: Key[];
52
  defaultExpandedKeys?: Key[];
53
  defaultExpandParent?: boolean;
54
  autoExpandParent?: boolean;
55
  defaultExpandAll?: boolean;
56

57
  // Checking Configuration
58
  checkable?: boolean | React.ReactNode;
59
  checkStrictly?: boolean;
60
  checkedKeys?: Key[] | { checked: Key[]; halfChecked: Key[] };
61
  defaultCheckedKeys?: Key[];
62

63
  // Drag & Drop Configuration
64
  draggable?: DraggableFn | boolean | DraggableConfig;
65
  allowDrop?: AllowDrop<TreeDataType>;
66

67
  // Async Loading Configuration
68
  loadData?: (treeNode: EventDataNode<TreeDataType>) => Promise<any>;
69
  loadedKeys?: Key[];
70

71
  // Filtering & Rendering
72
  filterTreeNode?: (treeNode: EventDataNode<TreeDataType>) => boolean;
73
  titleRender?: (node: TreeDataType) => React.ReactNode;
74
  dropIndicatorRender?: (props: DropIndicatorProps) => React.ReactNode;
75

76
  // Virtual Scrolling Configuration
77
  height?: number;
78
  itemHeight?: number;
79
  virtual?: boolean;
80
  scrollWidth?: number;
81
  itemScrollOffset?: number;
82

83
  // Event Handlers - Basic
84
  onFocus?: React.FocusEventHandler<HTMLDivElement>;
85
  onBlur?: React.FocusEventHandler<HTMLDivElement>;
86
  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
87
  onContextMenu?: React.MouseEventHandler<HTMLDivElement>;
88
  onScroll?: React.UIEventHandler<HTMLElement>;
89

90
  // Event Handlers - Node Interaction
91
  onClick?: NodeMouseEventHandler<TreeDataType>;
92
  onDoubleClick?: NodeMouseEventHandler<TreeDataType>;
93
  onRightClick?: (info: { event: React.MouseEvent; node: EventDataNode<TreeDataType> }) => void;
94

95
  // Event Handlers - State Changes
96
  onExpand?: (
97
    expandedKeys: Key[],
98
    info: {
99
      node: EventDataNode<TreeDataType>;
100
      expanded: boolean;
101
      nativeEvent: MouseEvent;
102
    },
103
  ) => void;
104
  onSelect?: (
105
    selectedKeys: Key[],
106
    info: {
107
      event: 'select';
108
      selected: boolean;
109
      node: EventDataNode<TreeDataType>;
110
      selectedNodes: TreeDataType[];
111
      nativeEvent: MouseEvent;
112
    },
113
  ) => void;
114
  onCheck?: (
115
    checked: { checked: Key[]; halfChecked: Key[] } | Key[],
116
    info: CheckInfo<TreeDataType>,
117
  ) => void;
118

119
  // Event Handlers - Async Loading
120
  onLoad?: (
121
    loadedKeys: Key[],
122
    info: {
123
      event: 'load';
124
      node: EventDataNode<TreeDataType>;
125
    },
126
  ) => void;
127

128
  // Event Handlers - Mouse Events
129
  onMouseEnter?: (info: NodeMouseEventParams<TreeDataType>) => void;
130
  onMouseLeave?: (info: NodeMouseEventParams<TreeDataType>) => void;
131

132
  // Event Handlers - Drag & Drop
133
  onDragStart?: (info: NodeDragEventParams<TreeDataType>) => void;
134
  onDragEnter?: (info: NodeDragEventParams<TreeDataType> & { expandedKeys: Key[] }) => void;
135
  onDragOver?: (info: NodeDragEventParams<TreeDataType>) => void;
136
  onDragLeave?: (info: NodeDragEventParams<TreeDataType>) => void;
137
  onDragEnd?: (info: NodeDragEventParams<TreeDataType>) => void;
138
  onDrop?: (
139
    info: NodeDragEventParams<TreeDataType> & {
140
      dragNode: EventDataNode<TreeDataType>;
141
      dragNodesKeys: Key[];
142
      dropPosition: number;
143
      dropToGap: boolean;
144
    },
145
  ) => void;
146

147
  // Internal/Advanced
148
  onActiveChange?: (key: Key) => void;
149
}
150
```
151

152
**Usage Examples:**
153

154
### Basic Tree Setup
155

156
```typescript
157
import React, { useState } from "react";
158
import Tree from "rc-tree";
159
import "rc-tree/assets/index.css";
160

161
const BasicTree = () => {
162
  const [expandedKeys, setExpandedKeys] = useState<string[]>(['0-0']);
163

164
  return (
165
    <Tree
166
      prefixCls="rc-tree"
167
      showLine
168
      showIcon
169
      expandedKeys={expandedKeys}
170
      onExpand={(keys) => setExpandedKeys(keys)}
171
    >
172
      <TreeNode key="0-0" title="Root Node">
173
        <TreeNode key="0-0-0" title="Child 1" />
174
        <TreeNode key="0-0-1" title="Child 2" />
175
      </TreeNode>
176
    </Tree>
177
  );
178
};
179
```
180

181
### Data-Driven Tree
182

183
```typescript
184
import React, { useState } from "react";
185
import Tree from "rc-tree";
186
import "rc-tree/assets/index.css";
187

188
const DataDrivenTree = () => {
189
  const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
190
  
191
  const treeData = [
192
    {
193
      key: '0-0',
194
      title: 'Parent Node',
195
      children: [
196
        { key: '0-0-0', title: 'Child Node 1' },
197
        { key: '0-0-1', title: 'Child Node 2' },
198
      ],
199
    },
200
  ];
201

202
  return (
203
    <Tree
204
      prefixCls="rc-tree"
205
      treeData={treeData}
206
      expandedKeys={expandedKeys}
207
      onExpand={(keys) => setExpandedKeys(keys)}
208
    />
209
  );
210
};
211
```
212

213
### Controlled Tree with All Features
214

215
```typescript
216
import React, { useState } from "react";
217
import Tree from "rc-tree";
218
import "rc-tree/assets/index.css";
219

220
const ControlledTree = () => {
221
  const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
222
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
223
  const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
224

225
  return (
226
    <Tree
227
      prefixCls="rc-tree"
228
      checkable
229
      selectable
230
      multiple
231
      showLine
232
      showIcon
233
      treeData={treeData}
234
      expandedKeys={expandedKeys}
235
      selectedKeys={selectedKeys}
236
      checkedKeys={checkedKeys}
237
      onExpand={(keys, info) => {
238
        console.log('Expanded:', keys, info);
239
        setExpandedKeys(keys);
240
      }}
241
      onSelect={(keys, info) => {
242
        console.log('Selected:', keys, info);
243
        setSelectedKeys(keys);
244
      }}
245
      onCheck={(checked, info) => {
246
        console.log('Checked:', checked, info);
247
        const keys = Array.isArray(checked) ? checked : checked.checked;
248
        setCheckedKeys(keys);
249
      }}
250
    />
251
  );
252
};
253
```
254

255
## Core Configuration Properties
256

257
### Prefix and Styling
258

259
```typescript { .api }
260
interface StylingProps {
261
  /** CSS class prefix for all tree elements */
262
  prefixCls: string;
263
  /** Additional CSS class for root element */
264
  className?: string;
265
  /** Inline styles for root element */
266
  style?: React.CSSProperties;
267
  /** Additional CSS class for tree container */
268
  rootClassName?: string;
269
  /** Inline styles for tree container */
270
  rootStyle?: React.CSSProperties;
271
}
272
```
273

274
### Data Source Configuration
275

276
```typescript { .api }
277
interface DataSourceProps<TreeDataType extends BasicDataNode = DataNode> {
278
  /** TreeNode elements as children (JSX approach) */
279
  children?: React.ReactNode;
280
  /** Array of tree data (data-driven approach) */
281
  treeData?: TreeDataType[];
282
  /** Custom field name mappings for data-driven trees */
283
  fieldNames?: FieldNames;
284
}
285
```
286

287
### Display Configuration
288

289
```typescript { .api }
290
interface DisplayProps {
291
  /** Show connecting lines between nodes */
292
  showLine?: boolean;
293
  /** Show icons for all nodes */
294
  showIcon?: boolean;
295
  /** Default icon renderer for all nodes */
296
  icon?: IconType;
297
  /** Default expand/collapse icon renderer */
298
  switcherIcon?: IconType;
299
  /** Animation configuration object */
300
  motion?: any;
301
  /** Layout direction */
302
  direction?: Direction;
303
}
304
```