16 TreeView Examples with ReactJS

Learn how to create a tree view in React.js with 16 different examples. This article covers a variety of tree view components, including drag-and-drop, sortable, and editable tree views.

1.React Simple Tree Menu

React Simple Tree Menu
Inspired by Downshift, a simple, data-driven, light-weight React Tree Menu component that:

does not depend on any UI framework
fully customizable with render props and control props
allows search
supports keyboard browsing
Check Storybook Demo.

View on GitHub

2.React Sortable Tree

A React component for Drag-and-drop sortable representation of hierarchical data. Checkout the demo for a demonstration of some basic features. Checkout the storybook for advanced usage.

React Sortable Tree

Demo: https://frontend-collective.github.io/react-sortable-tree/

GitHub: https://github.com/frontend-collective/react-sortable-tree

3.Eeact dropdown tree select

Lightweight, accessible, customizable and fast Dropdown Tree Select component for React

A lightweight and fast control to render a select component that can display hierarchical tree data. In addition, the control shows the selection in pills and allows user to search the options for quick filtering and selection. Also supports displaying partially selected nodes.

Eeact dropdown tree select

Demo: https://dowjones.github.io/react-dropdown-tree-select/

View on GitHub

4.React tree graph

A simple react component which renders data as a tree using svg.

React tree graph

Demo: https://jpb12.github.io/tree-viewer/

View on GitHub

5.React Treeview

Customizable Treeviewer built in react for visualizing hierarchical data.
React Treeview

Features

Customize expand and collapse icons
Add custom icons to each node
Expand nodes by clicking text if selectable is not true.
Draggable nodes.
Double Click a node to expand or collapse all the children
Test suite with 100% coverage

View on GitHub

6.Deni react treeview

A modern, themable and configurable treeview for React.

Deni react treeview

Features

Cross-Browser.
Binding to a JSON (locally, remotely and lazy-load)
Predefined Themes
Theme Customization
Events
Checkboxes
And so on…

Demo: https://denimar.github.io/deni-react-treeview/

View on GitHub

7.React checkbox tree

A simple and elegant checkbox tree for React.
React checkbox tree

View on GitHub

8.React Redux Grid

A Grid and Tree Component written in React using the Redux Pattern with plenty of open source examples, and an interesting backstory.

React Redux Grid

Features

Flat List or Tree Structure ➖ 🌲
Local and/or Remote Data Source
Local and/or Remote Pagination
Extensive Column Definitions 💪
Draggable Column Width/Resizing
Draggable Column Ordering
Sortable Columns
Grid Action Menus
Bulk Action Toolbar
Selection Model (Single, MultiSelect, Checkbox)
Event Handling for all kinds of DOM Events (List Below)
Extendable and Modular Style Built with JavaScript :bowtie:
Loading Mask
Built-in Error Handling Module
Handles Huge amount of Records (1000000+) ⭐️

View on GitHub

9.Cp React Tree Table

A fast, efficient tree table component for ReactJS.

Cp React Tree Table

Live Demo | Documentation

View on GitHub

10.React TreeSelect Component.

React TreeSelect Component.

Demo: http://react-component.github.io/tree-select/

GitHub: https://github.com/react-component/tree-select

11.rc Tree

tree ui component for react. React Tree http://react-component.github.io/tree/

rc Tree

View on GitHub

12.React animated tree

Simple to use, configurable tree view with full support for drop-in animations

React animated tree

Demo: https://codesandbox.io/embed/rrw7mrknyp

View on GitHub

13.React virtualized sticky tree

A React component for efficiently rendering tree like structures with support for position: sticky. react-virtualized-sticky-tree uses a similar API to react-virtualized.

React virtualized sticky tree