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"
  }
;