react_vt_tree_virtualized_treeview_with_custom_node_rendering.ts

1import React from 'react';
2import { TreeView, ITreeNodeData } from 'react-vt-tree';
3
4interface MyNodeData extends ITreeNodeData {
5  name: string;
6  children?: MyNodeData[];
7}
8
9const treeData: MyNodeData[] = [
10  {
11    id: '1',
12    name: 'Root Node',
13    expanded: true,
14    children: [
15      { id: '2', name: 'Child Node 1' },
16      { id: '3', name: 'Child Node 2' },
17    ],
18  },
19];
20
21const App: React.FC = () => {
22  return (
23    <div style={{ height: '400px', width: '300px', border: '1px solid #ccc' }}>
24      <TreeView<MyNodeData>
25        data={treeData}
26        itemHeight={30}
27      >
28        {({ node, style, toggle }) => (
29          <div
30            style={{
31              ...style,
32              display: 'flex',
33              alignItems: 'center',
34              paddingLeft: node.level * 20,
35              cursor: 'pointer',
36            }}
37            onClick={() => toggle(node)}
38          >
39            {node.children && node.children.length > 0 && (
40              <span>{node.expanded ? '▼' : '▶'} </span>
41            )}
42            {node.name}
43          </div>
44        )}
45      </TreeView>
46    </div>
47  );
48};
49
50export default App;