treeview-react-bootstrap

0.4.6 • Public • Published

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

Package Sidebar

Install

npm i treeview-react-bootstrap

Weekly Downloads

135

Version

0.4.6

License

none

Last publish

Collaborators

  • eliftech