Treeview-react-bootstrap NPM

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

Usage

Import

es2015 style import

Render

in *.jsx :

in *.js :

Options

Param	Description	Default
data	Object No default, expects dataThis is the core data to be displayed by the tree view	undefined
selectable	Boolean flagAllow to select nodes by clicking on them	true
allowNew	Boolean flagAllow to add new nodes using add button	false
removable	Boolean flagAllow to remove existing nodes using remove button	false
onNodeAdded	CallbackFunction that is called after node has been added	undefined
onNodeRemoved	CallbackFunction that is called after node has been removed	undefined
onDoubleClick	CallbackFunction 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.

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	ObjectDescribes a node's initial state.	node: props.node, expanded: true
state.expanded	BooleanWhether or not a node is expanded i.e. open. Takes precedence over global option levels.	true
state.selected	BooleanWhether or not a node is selected.	false
tags	StringUsed in conjunction with global showTags option to add additional information to the right of each node; using Bootstrap Badges	undefined