Tools: Building Complex Tree Views with react-complex-tree in React

Prerequisites ## Installation ## Project Setup ## First Example / Basic Usage ## Understanding the Basics ## Practical Example / Building Something Real ## Common Issues / Troubleshooting ## Next Steps ## Summary ## SEO Keywords react-complex-tree is an unopinionated, accessible, and feature-rich tree component for React with multi-select and drag-and-drop capabilities. It offers full keyboard controls, zero dependencies, and a flexible API for building complex tree structures like file explorers, directory browsers, and hierarchical data displays. This guide walks through setting up and creating complex tree views using react-complex-tree with React, from installation to a working implementation. Before you begin, make sure you have: Install react-complex-tree using your preferred package manager: After installation, your package.json should include: react-complex-tree requires wrapping your tree in an environment component and providing a data provider. Let's create a simple tree view. Create a new file src/TreeExample.jsx: This creates a basic tree view with expandable nodes and keyboard navigation. react-complex-tree provides tree view components: Here's an example with more features: Let's build a file explorer with selection and actions: This example demonstrates: Tree not rendering: Make sure your data structure is correct. Each item needs index and data properties. Check that rootItem matches an item index in your data. Items not expanding: Verify that items with children have a children array. Check that viewState is being managed correctly. Selection not working: Ensure onSelectItems handler is provided. Check that items have canMove or canRename set to true. Drag and drop not working: Make sure drag and drop is enabled in the environment. Check browser console for errors related to drag events. Performance issues: For large trees, consider using virtual rendering. Ensure you're not rendering too many items at once. Styling issues: react-complex-tree provides default styles. Override with custom CSS or use the className prop. Check that styles aren't being overridden by global CSS. Now that you have an understanding of react-complex-tree: You've successfully set up react-complex-tree in your React application and created complex tree views with multi-select, drag-and-drop, and keyboard navigation. react-complex-tree provides a powerful, accessible solution for building hierarchical data displays in React applications. react-complex-tree react-complex-tree tree view React complex tree component react-complex-tree installation React tree view library react-complex-tree tutorial React hierarchical data react-complex-tree example React drag and drop tree react-complex-tree setup React multi-select tree react-complex-tree getting started React accessible tree react-complex-tree advanced usage Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to ? It will become hidden in your post, but will still be visible via the comment's permalink. as well , this person and/or COMMAND_BLOCK: npm install react-complex-tree COMMAND_BLOCK: npm install react-complex-tree COMMAND_BLOCK: npm install react-complex-tree CODE_BLOCK: yarn add react-complex-tree CODE_BLOCK: yarn add react-complex-tree CODE_BLOCK: yarn add react-complex-tree CODE_BLOCK: pnpm add react-complex-tree CODE_BLOCK: pnpm add react-complex-tree CODE_BLOCK: pnpm add react-complex-tree CODE_BLOCK: { "dependencies": { "react-complex-tree": "^5.0.0", "react": "^18.0.0", "react-dom": "^18.0.0" } } CODE_BLOCK: { "dependencies": { "react-complex-tree": "^5.0.0", "react": "^18.0.0", "react-dom": "^18.0.0" } } CODE_BLOCK: { "dependencies": { "react-complex-tree": "^5.0.0", "react": "^18.0.0", "react-dom": "^18.0.0" } } COMMAND_BLOCK: // src/TreeExample.jsx import React from 'react'; import { UncontrolledTreeEnvironment, Tree, StaticTreeDataProvider } from 'react-complex-tree'; const treeData = { items: { root: { index: 'root', canMove: true, canRename: false, data: 'Root', children: ['child1', 'child2'] }, child1: { index: 'child1', canMove: true, canRename: true, data: 'Child 1', children: ['grandchild1'] }, child2: { index: 'child2', canMove: true, canRename: true, data: 'Child 2' }, grandchild1: { index: 'grandchild1', canMove: true, canRename: true, data: 'Grandchild 1' } } }; function TreeExample() { return ( <div style={{ padding: '20px', maxWidth: '400px' }}> <h2>Basic Tree Example</h2> <div style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '10px' }}> <UncontrolledTreeEnvironment dataProvider={new StaticTreeDataProvider(treeData.items, (item, data) => ({ ...item, data }))} getItemTitle={item => item.data} viewState={{}} > <Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" /> </UncontrolledTreeEnvironment> </div> </div> ); } export default TreeExample; COMMAND_BLOCK: // src/TreeExample.jsx import React from 'react'; import { UncontrolledTreeEnvironment, Tree, StaticTreeDataProvider } from 'react-complex-tree'; const treeData = { items: { root: { index: 'root', canMove: true, canRename: false, data: 'Root', children: ['child1', 'child2'] }, child1: { index: 'child1', canMove: true, canRename: true, data: 'Child 1', children: ['grandchild1'] }, child2: { index: 'child2', canMove: true, canRename: true, data: 'Child 2' }, grandchild1: { index: 'grandchild1', canMove: true, canRename: true, data: 'Grandchild 1' } } }; function TreeExample() { return ( <div style={{ padding: '20px', maxWidth: '400px' }}> <h2>Basic Tree Example</h2> <div style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '10px' }}> <UncontrolledTreeEnvironment dataProvider={new StaticTreeDataProvider(treeData.items, (item, data) => ({ ...item, data }))} getItemTitle={item => item.data} viewState={{}} > <Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" /> </UncontrolledTreeEnvironment> </div> </div> ); } export default TreeExample; COMMAND_BLOCK: // src/TreeExample.jsx import React from 'react'; import { UncontrolledTreeEnvironment, Tree, StaticTreeDataProvider } from 'react-complex-tree'; const treeData = { items: { root: { index: 'root', canMove: true, canRename: false, data: 'Root', children: ['child1', 'child2'] }, child1: { index: 'child1', canMove: true, canRename: true, data: 'Child 1', children: ['grandchild1'] }, child2: { index: 'child2', canMove: true, canRename: true, data: 'Child 2' }, grandchild1: { index: 'grandchild1', canMove: true, canRename: true, data: 'Grandchild 1' } } }; function TreeExample() { return ( <div style={{ padding: '20px', maxWidth: '400px' }}> <h2>Basic Tree Example</h2> <div style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '10px' }}> <UncontrolledTreeEnvironment dataProvider={new StaticTreeDataProvider(treeData.items, (item, data) => ({ ...item, data }))} getItemTitle={item => item.data} viewState={{}} > <Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" /> </UncontrolledTreeEnvironment> </div> </div> ); } export default TreeExample; CODE_BLOCK: // src/App.jsx import React from 'react'; import TreeExample from './TreeExample'; import './App.css'; function App() { return ( <div className="App"> <TreeExample /> </div> ); } export default App; CODE_BLOCK: // src/App.jsx import React from 'react'; import TreeExample from './TreeExample'; import './App.css'; function App() { return ( <div className="App"> <TreeExample /> </div> ); } export default App; CODE_BLOCK: // src/App.jsx import React from 'react'; import TreeExample from './TreeExample'; import './App.css'; function App() { return ( <div className="App"> <TreeExample /> </div> ); } export default App; COMMAND_BLOCK: // src/AdvancedTreeExample.jsx import React, { useState } from 'react'; import { UncontrolledTreeEnvironment, Tree, StaticTreeDataProvider } from 'react-complex-tree'; const advancedTreeData = { items: { root: { index: 'root', canMove: true, canRename: false, data: 'Documents', children: ['folder1', 'folder2', 'file1'] }, folder1: { index: 'folder1', canMove: true, canRename: true, data: 'Projects', children: ['project1', 'project2'] }, folder2: { index: 'folder2', canMove: true, canRename: true, data: 'Images' }, file1: { index: 'file1', canMove: true, canRename: true, data: 'readme.txt' }, project1: { index: 'project1', canMove: true, canRename: true, data: 'Project 1' }, project2: { index: 'project2', canMove: true, canRename: true, data: 'Project 2' } } }; function AdvancedTreeExample() { const [viewState, setViewState] = useState({}); return ( <div style={{ padding: '20px', maxWidth: '500px' }}> <h2>Advanced Tree Example</h2> <div style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '10px' }}> <UncontrolledTreeEnvironment dataProvider={new StaticTreeDataProvider(advancedTreeData.items, (item, data) => ({ ...item, data }))} getItemTitle={item => item.data} viewState={viewState} onViewStateChange={setViewState} > <Tree treeId="tree-1" rootItem="root" treeLabel="File Explorer" /> </UncontrolledTreeEnvironment> </div> </div> ); } export default AdvancedTreeExample; COMMAND_BLOCK: // src/AdvancedTreeExample.jsx import React, { useState } from 'react'; import { UncontrolledTreeEnvironment, Tree, StaticTreeDataProvider } from 'react-complex-tree'; const advancedTreeData = { items: { root: { index: 'root', canMove: true, canRename: false, data: 'Documents', children: ['folder1', 'folder2', 'file1'] }, folder1: { index: 'folder1', canMove: true, canRename: true, data: 'Projects', children: ['project1', 'project2'] }, folder2: { index: 'folder2', canMove: true, canRename: true, data: 'Images' }, file1: { index: 'file1', canMove: true, canRename: true, data: 'readme.txt' }, project1: { index: 'project1', canMove: true, canRename: true, data: 'Project 1' }, project2: { index: 'project2', canMove: true, canRename: true, data: 'Project 2' } } }; function AdvancedTreeExample() { const [viewState, setViewState] = useState({}); return ( <div style={{ padding: '20px', maxWidth: '500px' }}> <h2>Advanced Tree Example</h2> <div style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '10px' }}> <UncontrolledTreeEnvironment dataProvider={new StaticTreeDataProvider(advancedTreeData.items, (item, data) => ({ ...item, data }))} getItemTitle={item => item.data} viewState={viewState} onViewStateChange={setViewState} > <Tree treeId="tree-1" rootItem="root" treeLabel="File Explorer" /> </UncontrolledTreeEnvironment> </div> </div> ); } export default AdvancedTreeExample; COMMAND_BLOCK: // src/AdvancedTreeExample.jsx import React, { useState } from 'react'; import { UncontrolledTreeEnvironment, Tree, StaticTreeDataProvider } from 'react-complex-tree'; const advancedTreeData = { items: { root: { index: 'root', canMove: true, canRename: false, data: 'Documents', children: ['folder1', 'folder2', 'file1'] }, folder1: { index: 'folder1', canMove: true, canRename: true, data: 'Projects', children: ['project1', 'project2'] }, folder2: { index: 'folder2', canMove: true, canRename: true, data: 'Images' }, file1: { index: 'file1', canMove: true, canRename: true, data: 'readme.txt' }, project1: { index: 'project1', canMove: true, canRename: true, data: 'Project 1' }, project2: { index: 'project2', canMove: true, canRename: true, data: 'Project 2' } } }; function AdvancedTreeExample() { const [viewState, setViewState] = useState({}); return ( <div style={{ padding: '20px', maxWidth: '500px' }}> <h2>Advanced Tree Example</h2> <div style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '10px' }}> <UncontrolledTreeEnvironment dataProvider={new StaticTreeDataProvider(advancedTreeData.items, (item, data) => ({ ...item, data }))} getItemTitle={item => item.data} viewState={viewState} onViewStateChange={setViewState} > <Tree treeId="tree-1" rootItem="root" treeLabel="File Explorer" /> </UncontrolledTreeEnvironment> </div> </div> ); } export default AdvancedTreeExample; COMMAND_BLOCK: // src/FileExplorer.jsx import React, { useState } from 'react'; import { UncontrolledTreeEnvironment, Tree, StaticTreeDataProvider } from 'react-complex-tree'; const fileExplorerData = { items: { root: { index: 'root', canMove: true, canRename: false, data: 'My Files', children: ['docs', 'images', 'downloads'] }, docs: { index: 'docs', canMove: true, canRename: true, data: 'Documents', children: ['doc1', 'doc2'] }, images: { index: 'images', canMove: true, canRename: true, data: 'Images', children: ['img1', 'img2'] }, downloads: { index: 'downloads', canMove: true, canRename: true, data: 'Downloads' }, doc1: { index: 'doc1', canMove: true, canRename: true, data: 'Report.pdf' }, doc2: { index: 'doc2', canMove: true, canRename: true, data: 'Presentation.pptx' }, img1: { index: 'img1', canMove: true, canRename: true, data: 'photo1.jpg' }, img2: { index: 'img2', canMove: true, canRename: true, data: 'photo2.png' } } }; function FileExplorer() { const [viewState, setViewState] = useState({}); const [selectedItems, setSelectedItems] = useState([]); const handleSelectItems = (items) => { setSelectedItems(items); console.log('Selected items:', items); }; return ( <div style={{ display: 'flex', height: '500px', padding: '20px' }}> <div style={{ width: '300px', border: '1px solid #ddd', borderRadius: '4px', padding: '10px' }}> <h3>File Explorer</h3> <UncontrolledTreeEnvironment dataProvider={new StaticTreeDataProvider(fileExplorerData.items, (item, data) => ({ ...item, data }))} getItemTitle={item => item.data} viewState={viewState} onViewStateChange={setViewState} onSelectItems={handleSelectItems} > <Tree treeId="tree-1" rootItem="root" treeLabel="Files" /> </UncontrolledTreeEnvironment> </div> <div style={{ flex: 1, marginLeft: '20px', padding: '20px', border: '1px solid #ddd', borderRadius: '4px' }}> <h3>Selected Items</h3> {selectedItems.length > 0 ? ( <ul> {selectedItems.map(item => ( <li key={item}>{item}</li> ))} </ul> ) : ( <p>No items selected</p> )} </div> </div> ); } export default FileExplorer; COMMAND_BLOCK: // src/FileExplorer.jsx import React, { useState } from 'react'; import { UncontrolledTreeEnvironment, Tree, StaticTreeDataProvider } from 'react-complex-tree'; const fileExplorerData = { items: { root: { index: 'root', canMove: true, canRename: false, data: 'My Files', children: ['docs', 'images', 'downloads'] }, docs: { index: 'docs', canMove: true, canRename: true, data: 'Documents', children: ['doc1', 'doc2'] }, images: { index: 'images', canMove: true, canRename: true, data: 'Images', children: ['img1', 'img2'] }, downloads: { index: 'downloads', canMove: true, canRename: true, data: 'Downloads' }, doc1: { index: 'doc1', canMove: true, canRename: true, data: 'Report.pdf' }, doc2: { index: 'doc2', canMove: true, canRename: true, data: 'Presentation.pptx' }, img1: { index: 'img1', canMove: true, canRename: true, data: 'photo1.jpg' }, img2: { index: 'img2', canMove: true, canRename: true, data: 'photo2.png' } } }; function FileExplorer() { const [viewState, setViewState] = useState({}); const [selectedItems, setSelectedItems] = useState([]); const handleSelectItems = (items) => { setSelectedItems(items); console.log('Selected items:', items); }; return ( <div style={{ display: 'flex', height: '500px', padding: '20px' }}> <div style={{ width: '300px', border: '1px solid #ddd', borderRadius: '4px', padding: '10px' }}> <h3>File Explorer</h3> <UncontrolledTreeEnvironment dataProvider={new StaticTreeDataProvider(fileExplorerData.items, (item, data) => ({ ...item, data }))} getItemTitle={item => item.data} viewState={viewState} onViewStateChange={setViewState} onSelectItems={handleSelectItems} > <Tree treeId="tree-1" rootItem="root" treeLabel="Files" /> </UncontrolledTreeEnvironment> </div> <div style={{ flex: 1, marginLeft: '20px', padding: '20px', border: '1px solid #ddd', borderRadius: '4px' }}> <h3>Selected Items</h3> {selectedItems.length > 0 ? ( <ul> {selectedItems.map(item => ( <li key={item}>{item}</li> ))} </ul> ) : ( <p>No items selected</p> )} </div> </div> ); } export default FileExplorer; COMMAND_BLOCK: // src/FileExplorer.jsx import React, { useState } from 'react'; import { UncontrolledTreeEnvironment, Tree, StaticTreeDataProvider } from 'react-complex-tree'; const fileExplorerData = { items: { root: { index: 'root', canMove: true, canRename: false, data: 'My Files', children: ['docs', 'images', 'downloads'] }, docs: { index: 'docs', canMove: true, canRename: true, data: 'Documents', children: ['doc1', 'doc2'] }, images: { index: 'images', canMove: true, canRename: true, data: 'Images', children: ['img1', 'img2'] }, downloads: { index: 'downloads', canMove: true, canRename: true, data: 'Downloads' }, doc1: { index: 'doc1', canMove: true, canRename: true, data: 'Report.pdf' }, doc2: { index: 'doc2', canMove: true, canRename: true, data: 'Presentation.pptx' }, img1: { index: 'img1', canMove: true, canRename: true, data: 'photo1.jpg' }, img2: { index: 'img2', canMove: true, canRename: true, data: 'photo2.png' } } }; function FileExplorer() { const [viewState, setViewState] = useState({}); const [selectedItems, setSelectedItems] = useState([]); const handleSelectItems = (items) => { setSelectedItems(items); console.log('Selected items:', items); }; return ( <div style={{ display: 'flex', height: '500px', padding: '20px' }}> <div style={{ width: '300px', border: '1px solid #ddd', borderRadius: '4px', padding: '10px' }}> <h3>File Explorer</h3> <UncontrolledTreeEnvironment dataProvider={new StaticTreeDataProvider(fileExplorerData.items, (item, data) => ({ ...item, data }))} getItemTitle={item => item.data} viewState={viewState} onViewStateChange={setViewState} onSelectItems={handleSelectItems} > <Tree treeId="tree-1" rootItem="root" treeLabel="Files" /> </UncontrolledTreeEnvironment> </div> <div style={{ flex: 1, marginLeft: '20px', padding: '20px', border: '1px solid #ddd', borderRadius: '4px' }}> <h3>Selected Items</h3> {selectedItems.length > 0 ? ( <ul> {selectedItems.map(item => ( <li key={item}>{item}</li> ))} </ul> ) : ( <p>No items selected</p> )} </div> </div> ); } export default FileExplorer; CODE_BLOCK: // src/App.jsx import React from 'react'; import FileExplorer from './FileExplorer'; import './App.css'; function App() { return ( <div className="App"> <FileExplorer /> </div> ); } export default App; CODE_BLOCK: // src/App.jsx import React from 'react'; import FileExplorer from './FileExplorer'; import './App.css'; function App() { return ( <div className="App"> <FileExplorer /> </div> ); } export default App; CODE_BLOCK: // src/App.jsx import React from 'react'; import FileExplorer from './FileExplorer'; import './App.css'; function App() { return ( <div className="App"> <FileExplorer /> </div> ); } export default App; - Node.js version 14.0 or higher installed - npm, yarn, or pnpm package manager - A React project (version 16.8 or higher) or create-react-app setup - Basic knowledge of React hooks (useState, useEffect) - Familiarity with JavaScript/TypeScript - Understanding of tree data structures - UncontrolledTreeEnvironment: Environment wrapper for uncontrolled trees - Tree: Main tree component - StaticTreeDataProvider: Data provider for static tree data - ControlledTreeEnvironment: Environment for controlled trees - TreeItem: Individual tree item component - Data provider: Provides tree data to the environment - Tree ID: Unique identifier for each tree instance - Root item: Starting point of the tree - Item structure: Each item has index, data, and optional children - View state: Controls expanded/collapsed state - File explorer interface - Item selection - View state management - Keyboard navigation - Expandable folders - Custom data provider - Tree not rendering: Make sure your data structure is correct. Each item needs index and data properties. Check that rootItem matches an item index in your data. - Items not expanding: Verify that items with children have a children array. Check that viewState is being managed correctly. - Selection not working: Ensure onSelectItems handler is provided. Check that items have canMove or canRename set to true. - Drag and drop not working: Make sure drag and drop is enabled in the environment. Check browser console for errors related to drag events. - Performance issues: For large trees, consider using virtual rendering. Ensure you're not rendering too many items at once. - Styling issues: react-complex-tree provides default styles. Override with custom CSS or use the className prop. Check that styles aren't being overridden by global CSS. - Explore controlled tree environments - Learn about custom data providers - Implement drag and drop - Add search and filtering - Create custom item renderers - Integrate with state management - Check the official repository: https://github.com/lukasbach/react-complex-tree