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 | [String]Used in conjunction with global showTags option to add additional information to the right of each node; using Bootstrap Badges | undefined |

Example