Noah's Pairwise Manifest

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

    Install

    npm i treeview-react-bootstrap

    DownloadsWeekly Downloads

    91

    Version

    0.4.6

    License

    none

    Last publish

    Collaborators

    • eliftech