rc-tree

Basic Tree Structure

This feature allows the creation of a basic tree structure with nested nodes. The `treeData` prop defines the hierarchical structure of the tree.

import Tree from 'rc-tree';

const treeData = [{
  title: 'parent 1',
  key: '0-0',
  children: [{
    title: 'child 1-1',
    key: '0-0-1',
    children: [{
      title: 'leaf',
      key: '0-0-1-1'
    }]
  }, {
    title: 'child 1-2',
    key: '0-0-2',
    children: [{
      title: 'leaf',
      key: '0-0-2-1'
    }]
  }]
}];

<Tree treeData={treeData} />

Drag-and-Drop

Enables drag-and-drop functionality within the tree, allowing users to reorder nodes by dragging them. Event handlers like `onDragEnter` and `onDrop` can be used to manage the drag-and-drop process.

import Tree from 'rc-tree';

<Tree
  treeData={treeData}
  draggable
  onDragEnter={info => console.log('enter:', info)}
  onDrop={info => console.log('drop:', info)}
/>

Checkable Nodes

This feature adds checkboxes to tree nodes, making them selectable. The `onCheck` event handler is triggered when checkboxes are checked or unchecked, allowing for custom handling of these events.

import Tree from 'rc-tree';

<Tree
  checkable
  onCheck={checkedKeys => console.log('onCheck', checkedKeys)}
  treeData={treeData}
/>

Async Data Loading

Supports loading data asynchronously for nodes. This is useful for loading child nodes on demand, for example, when a node is expanded. The `loadData` function is called to fetch child nodes asynchronously.

import Tree from 'rc-tree';

const loadData = treeNode =>
  new Promise(resolve => {
    setTimeout(() => {
      resolve();
    }, 1000);
  });

<Tree loadData={loadData} treeData={treeData} />