title: Having a tree structure on both sides of the Transfer component
body: <p>I am using <a href="https://ant.design/components/transfer/" rel="nofollow noreferrer">antd's Transfer</a> component. Using the examples given in the documentation, I am able to create a tree transfer box that looks similar to:
  <a href="https://i.stack.imgur.com/OEPPK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OEPPK.png" alt="enter image description here"></a></p>
  
  <p>Is there a way I could have a tree structure also on the right side? Currently, as I select <code>0-1-0</code> under <code>0-1</code>, it appears flat on the right side.</p>
  
  <p>The code as also given in the <a href="https://codesandbox.io/s/7z4j4w5zk6" rel="nofollow noreferrer">Sandbox example</a>, is given below:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import 'antd/dist/antd.css';
  import './index.css';
  import { Transfer, Tree } from 'antd';
  
  const { TreeNode } = Tree;
  
  // Customize Table Transfer
  const isChecked = (selectedKeys, eventKey) =&gt; {
      return selectedKeys.indexOf(eventKey) !== -1;
  };
  
  const generateTree = (treeNodes = [], checkedKeys = []) =&gt; {
      return treeNodes.map(({ children, ...props }) =&gt; (
          &lt;TreeNode {...props} disabled={checkedKeys.includes(props.key)}&gt;
          {generateTree(children, checkedKeys)}
          &lt;/TreeNode&gt;
      ));
  };
  
  const TreeTransfer = ({ dataSource, targetKeys, ...restProps }) =&gt; {
      const transferDataSource = [];
      function flatten(list = []) {
          list.forEach(item =&gt; {
          transferDataSource.push(item);
          flatten(item.children);
          });
      }
      flatten(dataSource);
  
      return (
          &lt;Transfer
          {...restProps}
          targetKeys={targetKeys}
          dataSource={transferDataSource}
          className="tree-transfer"
          render={item =&gt; item.title}
          showSelectAll={false}
          &gt;
          {({ direction, onItemSelect, selectedKeys }) =&gt; {
              if (direction === 'left') {
              const checkedKeys = [...selectedKeys, ...targetKeys];
              return (
                  &lt;Tree
                  blockNode
                  checkable
                  checkStrictly
                  defaultExpandAll
                  checkedKeys={checkedKeys}
                  onCheck={(
                      _,
                      {
                      node: {
                          props: { eventKey },
                      },
                      },
                  ) =&gt; {
                      onItemSelect(eventKey, !isChecked(checkedKeys, eventKey));
                  }}
                  onSelect={(
                      _,
                      {
                      node: {
                          props: { eventKey },
                      },
                      },
                  ) =&gt; {
                      onItemSelect(eventKey, !isChecked(checkedKeys, eventKey));
                  }}
                  &gt;
                  {generateTree(dataSource, targetKeys)}
                  &lt;/Tree&gt;
              );
              }
          }}
          &lt;/Transfer&gt;
      );
  };
  
  const treeData = [
      { key: '0-0', title: '0-0' },
      {
          key: '0-1',
          title: '0-1',
          children: [{ key: '0-1-0', title: '0-1-0' }, { key: '0-1-1', title: '0-1-1' }],
      },
      { key: '0-2', title: '0-3' },
  ];
  
  class App extends React.Component {
      state = {
          targetKeys: [],
      };
  
      onChange = targetKeys =&gt; {
          console.log('Target Keys:', targetKeys);
          this.setState({ targetKeys });
      };
  
      render() {
          const { targetKeys } = this.state;
          return (
          &lt;div&gt;
              &lt;TreeTransfer dataSource={treeData} targetKeys={targetKeys} onChange={this.onChange} /&gt;
          &lt;/div&gt;
          );
      }
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('container'));
  </code></pre>
  
  <p>The way I want to transfer is depicted in the images below.</p>
  
  <ul>
  <li>I want to be able to transfer the children</li>
  <li>When a child is transferred the left table should have the remaining children under it parent and the right table should have the transferred children under it parent name.</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/REfbY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/REfbY.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/xdulj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xdulj.png" alt="enter image description here"></a></p>