Super-easy integration of complex tree components into React. Supports ordered and unordered drag-and-drop, extensive keybindings, search, renaming and more. Fully customizable and accessible. Headless Tree is the official successor for react-complex-tree.

It aims to bring the many features of complex tree views, like multi-select, drag-and-drop, keyboard navigation, tree search, renaming and more, while being unopinionated about the styling and rendering of the tree itself. Accessibility is ensured by default, and the integration is extremely simple and flexible.

The interface gives you a flat list of tree nodes that you can easily render yourself, which keeps the complexity of the code low and allows you to customize the tree to your needs. This flat structure also allows you to virtualize the tree with any virtualization library you want. The library automatically provides the necessary aria tags to emulate a nested tree structure, so that accessibility requirements are met despite the flat structure.

Dive into the Get Started page to find out how to use Headless Tree, or have a look at the samples on the Headless Tree Homepage to get an idea of what you can do with it.

Features

• Simple Interface: Easy integration in React with full customizability of DOM
• Drag and Drop: Powerful ordered drag-and-drop, that can interact with external drag events
• Scalable: Headless Tree remains performant even with large trees
• Virtualization Support: Compatible with common virtualization library to support 100k+ items
• Hotkeys!: Lots of hotkeys, fully customizable
• Search Support: Typeahead anywhere in the tree to quickly search the entire tree
• Rename items: Optionally allow users to rename items inside the tree
• Manage State: Let Headless Tree manage tree state internally, or manage any part of it yourself
• Customize Behavior: Easily overwrite internal behavior like requiring double clicks on items to expand
• Customize Logic: Overwrite or expand any internal behavior of Headless Tree
• Async Data Support: Use synchronous or asynchronous data sources for your tree. Headless Tree comes with optional caching for async data
• Free of dependencies
• Or check out this comprehensive playground that has most of the capabilities enabled.

Bundle Size

Headless Tree exports individual features in a tree-shaking-friendly way, allowing you to only include what you need to keep your bundle size small. Listed bundle sizes are based on min+gzipped bundles, and are based on the Bundlephobia report as of Headless Tree v0.0.15.

Total bundle size is 9.5kB plus 0.4kB for the React bindings. Note that the sum of features is bigger than the total bundle size, because several features share code. Tree-shaking will ensure that the minimum amount of code is included in your bundle.