Home / React / Tree

Easy, light, flexible tree view made with React.

React-treeview Easy, light, flexible treeview made with React. Demos from the demos folder. install Npm: npm install react-treeview Bower: bower install react-treeview The CSS file: <link rel="style
Information
Category: React / Tree
Watchers: 30
Star: 1.1k
Fork: 162
Last update: Sep 21, 2023
Resource links
https://github.com/chenglou/react-treeview

React-treeview npm version Bower version

Easy, light, flexible treeview made with React.

Demos from the demos folder.

install

Npm:

npm install react-treeview

Bower:

bower install react-treeview

The CSS file:

<link rel="stylesheet" type="text/css" href="path/to/react-treeview.css">

API

<TreeView />

The component accepts these props.

  • collapsed: whether the node is collapsed or not.
  • defaultCollapsed: the uncontrolled equivalent to collapsed.
  • nodeLabel: the component or string (or anything renderable) that's displayed beside the TreeView arrow.
  • itemClassName: the class name of the .tree-view_item div.
  • treeViewClassName: the class name of the .tree-view div.
  • childrenClassName: the class name of the .tree-view_children item div.

TreeViews can be naturally nested.

The extra properties transferred onto the arrow, so all attributes and events naturally work on it.

Styling

The CSS is flexible, commented and made to be easily customized. Feel free to inspect the demo's classes and check the short CSS code.

Build It Yourself/Run the Demos

Build: npm install && npm run prerelease

Demos: npm install && npm start && open http://localhost:3000

License

MIT.

14 Open More issues
Closed

Only render visible nodes

While this is a simple example, I think a real world tree view has quite different requirements to be able to handle a big hierarchy.

For example instead of the nested TreeViews an therefore divs, I would recommend flattening the output.

Would you be interested to discuss and implement this, or do you want to keep this as straightforward as it is?

opened Aug 26, 2015 by tp 9
Closed

Added jsx cli compilationcommand to readme

Just for beginning :)

opened Nov 14, 2014 by stremlenye 7
Closed

Not rendering children if the tree node is collapsed

I noticed that when rendering larger trees with quite a few branches/nodes and quite a few dom elements in each of them, I would often run out of memory very quickly. Even if I started with defaultCollapsed={true}, all the children were still be rendered so it didn't matter.

With this change, collapsed nodes don't render their children at all.

I noticed that in your CSS you simply set height: 0 when the tree is collapsed. That's viable for smaller trees and it avoids an unnecessary rerender when the tree gets uncollapsed, but for very large trees it stops working very quickly.

By very large tree I mean less than 300 nodes which when you think about it, isn't that big at all.

opened Mar 13, 2016 by sunjay 6
Closed

Improve styling

Think the styling abilities should be improved. I have problem with it in my project now. I'll fork now and do my best - hope you will enjoy it :)

opened Oct 9, 2014 by stremlenye 6
Closed

Expand/collapse all nodes

Is there a way to do this without moving state further up the hierarchy?

opened Apr 11, 2014 by heapx 6
Closed

Unknown Prop 'defaultCollapsed' on <div> tag

I am using the defaultCollapsed prop to set the initial state of the tree With react 15.2.1 I get the following console warning

"Warning: Unknown prop defaultCollapsed on

tag. Remove this prop from the element."

This is due to the ...rest props passed into the arrow component

opened Jul 27, 2016 by ianhowe76 4
Open

Direct link for the demo

I discovered about this project just now and was looking for an example of how it looks.

Opening the repo I noticed on the branches that there is something hosted on GitHub Pages

I think it would be easier for newcomers to look at how the lib works if the GitHub Pages site was linked or in README or in the description to access it using just one click.

On the repo description when you set up that there is an option to add a homepage.

For agility sake there is the link: http://chenglou.github.io/react-treeview/

opened Nov 24, 2021 by lucasew 0
Open

outdated/broken dependencies: Error: Cannot resolve module 'react/lib/ReactMount'

Cloning and npm install ; npm start, I get this:

$ npm install ; npm start
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated [email protected]: core-js@<2.6.8 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2.
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN The package prop-types is included as both a dev and production dependency.

added 479 packages from 364 contributors and audited 2961 packages in 10.24s

2 packages are looking for funding
  run `npm fund` for details

found 35 vulnerabilities (12 low, 22 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

> [email protected] start /tmp/react-treeview
> NODE_ENV=development node server.js

Listening at localhost:3000
Hash: c2b9c2c74bdb4c783932
Version: webpack 1.15.0
Time: 1673ms
    Asset    Size  Chunks       Chunk Names
bundle.js  1.5 MB       0       main
chunk    {0} bundle.js (main) 1.39 MB [rendered]

ERROR in ./demos/index.js
Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /tmp/react-treeview/demos
 @ ./demos/index.js 1:250-281

ERROR in ./demos/controlled.js
Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /tmp/react-treeview/demos
 @ ./demos/controlled.js 1:250-281

ERROR in ./demos/uncontrolled.js
Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /tmp/react-treeview/demos
 @ ./demos/uncontrolled.js 1:250-281

ERROR in ./src/react-treeview.jsx
Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /tmp/react-treeview/src
 @ ./src/react-treeview.jsx 1:250-281
webpack: Failed to compile.

I have tried a lot of things found around the web, like most things suggested here https://stackoverflow.com/questions/40652327/module-not-found-error-cannot-resolve-module-react-lib-reactmount which led to different errors, and trying to solve them trying things suggested here https://github.com/gaearon/react-hot-loader/issues/569 which led to different errors described here https://github.com/gaearon/react-hot-loader/issues/1411.

Maybe it would be best if someone with actual knowledge about the npm ecosystem could update this repo. It seems quite outdated.

opened May 8, 2020 by Ploppz 2
Open

Change background-color of selected row. 

.info:focus {
  background-color: lightblue;
}

Does not seem to work as tabIndex property is missing.

How to make selected row background-color changed?

opened Aug 25, 2019 by mindaugasnakrosis 2
Open

Add nodeLabel as a tooltip as well. Helpful for forced single line / truncate display

opened Nov 16, 2018 by terrence-giggy 0
Open

Collapse/Uncollapse is slow with a large list of items

I have a list of about 600 objects that I'm displaying with TreeViews, and things are really slow when I collapse/uncollapse a single item. My code is basically the same as the controlled example, so I think the problem is that the re-render call after I toggle the collapsed state for one of the objects results in a re-render of EVERYTHING in the list of objects.

I've taken care to ensure that the has a unique key and that the child

also has a unique key, but that doesn't seem to help React optimize the render.

Any thoughts, folks?

opened Jan 16, 2018 by royrwood 3
Open

Dragable version?

Is it possible to create a dragable version of this component so as to move a row as a children of an other row? How could we keep normalized store with this approach ?

opened Nov 25, 2017 by popo63301 0

Contents

    David-Desmaisons Vue.D3.tree D3.jsVue.D3.tree - A Tree View based on D3.js
    NARKOZ Light the Christmas Tree in your terminal 🎄
    phphe vue-draggable-nested-tree @phphevue-draggable-nested-tree - A powerful customizable draggable tree view component for Vuejs2 @phphe
    hku-mars ikd-Tree is an incremental k-d tree designed for robotic applications
    David-Desmaisons Vue component to display tree based on D3.js layout.
    swiftcarrot React tree component with drag & drop
    fitzhavey vue-json-tree-view - A JSON Tree View Component for Vue.js.
    arnedesmedt vue-ads-table-tree tailwindcssvue-ads-table-tree - A vue Table component, with filtering, sorting and pagination. Rows can have child rows, so a tree structure can be build. It also supports async calls to load rows from the backend. It's built with the css framework tailwindcss
    proshoumma A JSON based tree structure with drag and drop functionally to re-arrange the tree. Show-cases some useful tree operations for deeply nested JSON data and webpack configuration for reducing bundle sizes.
    holiber sl-vue-tree - A simple customizable draggable tree component for Vue.js
    skmendez Traversal of tree-sitter Trees and any arbitrary tree with a TreeCursor-like interface
    MandarinConLaBarba A stateless tree menu component for React.
    jonmiles Tree View for Twitter Bootstrap -
    i6mi6 A lightweight View component for React Native
    creativetimofficial React version of Light Bootstrap Dashboard
    drcmda 🌲Simple to use, configurable tree view with full support for drop-in animations
    tylerkrupicka vue-json-component - JSON tree view with no dependencies, TypeScript support, and easy customization.
    alamkanak Android Week View is an android library to display calendars (week view or day view) within the app. It supports custom styling.
    chosunone starling - This tree structure is a binary merkle tree with branch compression via split indexes
    gringoireDM A swift TreeView
    mar10 JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading
    Share this repo

    Related Repos


    Tree
    823
    🌲Simple to use, configurable tree view with full support for drop-in animations
    drcmda npm install react-animated-tree A simple, configurable tree view control for React. Demo: https://codesandbox.io/embed/rrw7mrknyp content, Name of the node (string or React-component) type, optional description, good for dis
     
    Tree
    162
    A Treeview UI written as a React Component (with material design)
    fiffty React Treeview with Material UI A Treeview React Component that can use material-ui's styling. LIVE DEMO Example code Installation $ npm install --save react-treeview-mui import import React, {Component,
     
    Tree
    1.1k
    Easy, light, flexible tree view made with React.
    chenglou React-treeview Easy, light, flexible treeview made with React. Demos from the demos folder. install Npm: npm install react-treeview Bower: bower install react-treeview The CSS file: &lt;link rel="style
     
    Tree
    752
    React tree component with drag & drop
    swiftcarrot react-ui-tree React tree component This project was initially developed for a webpage builder. It maintains an internal tree structure within the component through js-tree. Demo https://pqx.github.io/react-ui-tre
     
    Tree
    1.7k
    React Tree View Component. Data-Driven, Fast, Efficient and Customisable.
    storybook-eol react-treebeard React Tree View Component. Data-Driven, Fast, Efficient and Customisable. Install npm install react-treebeard --save Example An online example from the /example directory can be found h