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.
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.
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.
Demo: https://frontend-collective.github.io/react-sortable-tree/
GitHub: https://github.com/frontend-collective/react-sortable-tree
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.
Demo: https://dowjones.github.io/react-dropdown-tree-select/
A simple react component which renders data as a tree using svg.
Demo: https://jpb12.github.io/tree-viewer/
Customizable Treeviewer built in react for visualizing hierarchical data.
Features
A modern, themable and configurable treeview for React.
Features
Demo: https://denimar.github.io/deni-react-treeview/
A simple and elegant checkbox tree for React.
A Grid and Tree Component written in React using the Redux Pattern with plenty of open source examples, and an interesting backstory.
Features
A fast, efficient tree table component for ReactJS.
Demo: http://react-component.github.io/tree-select/
GitHub: https://github.com/react-component/tree-select
tree ui component for react. React Tree http://react-component.github.io/tree/
Simple to use, configurable tree view with full support for drop-in animations
Demo: https://codesandbox.io/embed/rrw7mrknyp
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.
Demo
https://marchaos.github.io/react-virtualized-sticky-tree/
React JSON Viewer Component, Extracted from redux-devtools. Supports iterable objects, such as Immutable.js.
React Tree View Component. Data-Driven, Fast, Efficient and Customisable
Demo http://storybooks.github.io/react-treebeard
Easy, light, flexible treeview made with React.
Demos from the demos folder.
#reactjs #javascript