treeview-react-bootstrap

treeview-react-bootstrap

Nice, easy to use component to displaying tree structures, made with React and Twitter Bootstrap
Based on jonmiles/react-bootstrap-treeview, but provides a set of additional useful features

Try it :

You can see an example here

Installation

 
  npm install treeview-react-bootstrap --save
 

Usage

Import

 
  TreeView = require('treeview-react-bootstrap').default;
 

es2015 style import

 
  import TreeView from 'treeview-react-bootstrap';
 

Render

in *.jsx :

 
  React.render(
    <TreeView data={data} />,
    document.getElementById('treeview')
 );
 

in *.js :

 
  React.render(                
	React.createElement(TreeView, {data: data}),
	document.getElementById('treeview')
  );
 

Options

Param	Description	Default
data	[Object] No default, expects data This is the core data to be displayed by the tree view	undefined
selectable	Boolean flag Allow to select nodes by clicking on them	true
allowNew	Boolean flag Allow to add new nodes using add button	false
removable	Boolean flag Allow to remove existing nodes using remove button	false
onNodeAdded	Callback Function that is called after node has been added	undefined
onNodeRemoved	Callback Function that is called after node has been removed	undefined
onDoubleClick	Callback Function that is called after node has been removed	undefined

This treeview component also supports all options defined for base component.

Data structure

"data" property must be provided for treeview to work. It should be an array of objects(nodes).

Node object structure.

{
  text: String,
  nodes: [Node]
}

Node options

The following properties are defined to allow node level overrides, such as node specific icons, colours and tags.

Param	Description	Default
text	String Mandatory The text value displayed for a given tree node, typically to the right of the nodes icon.	undefined
icon	String The icon-class set to icon on given node, typically displayed to the left of the text.	"glyphicon glyphicon-stop"
color	String The foreground color used on a given node, overrides global color option.	#428bca
backColor	String The background color used on a given node, overrides global color option.	undefined
href	String Used in conjunction with global enableLinks option to specify anchor tag URL on a given node.	undefined
state	Object Describes a node's initial state.	node: props.node, expanded: true
state*.expanded*	Boolean Whether or not a node is expanded i.e. open. Takes precedence over global option levels.	true
state*.selected*	Boolean Whether or not a node is selected.	false
tags	[String] Used in conjunction with global showTags option to add additional information to the right of each node; using Bootstrap Badges	undefined

Example

var data = [
  {
    text: "Parent 1",
    nodes: [
      {
        text: "Child 1",
        nodes: [
          {
            text: "Grandchild 1"
          },
          {
            text: "Grandchild 2"
          }
        ]
      },
      {
        text: "Child 2"
      }
    ]
  },
  {
    text: "Parent 2"
  }
];