React Arborist Demos

React arborist is a tree view component library for react. It provides the behavior most tree views need and leaves the styling up to you.

If you are using it in your project, send me a screenshot on Twitter! Also leave a star on GitHub.

Custom Styles

Gmail Sidebar Clone

In this demo, we recreate the Gmail sidebar to demonstrate how you can style a tree any way you want.

30,000 Nodes

In this demo, we populate the tree with US cities grouped by state to demonstrate how the tree performs with over 30,000 nodes.

Per-Row Sizing

In this demo, we pass a function to the rowHeight prop so each row is sized based on its node.

Cross-Source DnD

In this demo, we drag nodes onto a drop target outside the tree, which reads the dragged node's data from the react-dnd item.

Derived Data

In this demo, folders of expenses show the sum of their children, and the totals update as you drag expenses between folders.