Do you know the latest update of 2019? A overview of our is now available on YouTube

Components

## jsTree

jsTree is jquery plugin, that provides interactive trees. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources and AJAX loading.

You can see more details from here.

##### Basic

Make a container `div` and insilize js tree on it. then use `ul` for tree list, also nested `ul` for nested tree.

- Root node 1
  - Child Node
  - Initially selected
  - initially open
    - Disabled Node
    - Another node
- Root node 2

###### Code Example

    <div id="basic-tree">
      <ul>
        <li>
            Root node 1
            <ul>
                <li>
                  Child Node
                </li>
                <li data-jstree='{ "selected" : true }'>
                  Initially selected
                </li>
                <li data-jstree='{ "opened" : true }'>
                    initially open
                    <ul>
                        <li data-jstree='{ "disabled" : true }'>
                            Disabled Node
                        </li>
                        <li data-jstree='{ "type" : "file" }'>
                            Another node
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li data-jstree='{ "type" : "file" }'>
          Root node 2
        </li>
      </ul>
    </div>

##### Custom Icon

you can use custom options in list item with `data-jstree` attribute. like this `data-jstree='{ "icon" : "icon ni ni-calendar-fill" }'` value for that icon must be classes to display or style that icon.

- Root node 1
  - Child Node
  - Initially selected
  - initially open
    - Disabled Node
    - Another node
- Root node 2

###### Code Example

    <div id="custom-icon-tree">
      <ul>
        <li>
            Root node 1
            <ul>
                <li>
                  Child Node
                </li>
                <li data-jstree='{ "selected" : true, "icon" : "icon ni ni-calendar-fill text-info" }'>
                    Initially selected
                </li>
                <li data-jstree='{ "opened" : true }'>
                    initially open
                    <ul>
                        <li data-jstree='{ "disabled" : true , "icon" : "icon ni ni-archive-fill" }'>
                            Disabled Node
                        </li>
                        <li data-jstree='{ "type" : "file" }'>
                            Another node
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li data-jstree='{ "type" : "file",  "icon" : "icon ni ni-puzzle-fill text-success" }'>
          Root node 2
        </li>
      </ul>
    </div>

##### Context Menu

For content menu, you just need to include `contextmenu` in plugins option. For more information please check jsTree Plugin Page

###### Code Example

    <div id="context-menu-tree">
      <ul>
        <li>
            Root node 1
            <ul>
                <li>
                  Child Node
                </li>
                <li data-jstree='{ "selected" : true }'>
                    Initially selected
                </li>
                <li data-jstree='{ "opened" : true }'>
                    initially open
                    <ul>
                        <li data-jstree='{ "disabled" : true }'>
                            Disabled Node
                        </li>
                        <li data-jstree='{ "type" : "file" }'>
                            Another node
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li data-jstree='{ "type" : "file" }'>
          Root node 2
        </li>
      </ul>
    </div>

##### Drag and Drop

To activate drag and drop option, you just need to include `dnd` in plugins option. For more information please check jsTree Plugin Page

- Root node 1
  - Child Node
  - Initially selected
  - initially open
    - Disabled Node
    - Another node
- Root node 2

###### Code Example

    <div id="drag-drop-tree">
      <ul>
        <li>
            Root node 1
            <ul>
                <li>
                  Child Node
                </li>
                <li data-jstree='{ "selected" : true }'>
                    Initially selected
                </li>
                <li data-jstree='{ "opened" : true }'>
                    initially open
                    <ul>
                        <li data-jstree='{ "disabled" : true }'>
                            Disabled Node
                        </li>
                        <li data-jstree='{ "type" : "file" }'>
                            Another node
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li data-jstree='{ "type" : "file" }'>
          Root node 2
        </li>
      </ul>
    </div>

##### Checkbox

To activate checkbox option with full row selection, you just need to include `wholerow` and `checkbox` in plugins option. For more information please check jsTree Plugin Page

- Root node 1
  - Child Node
  - Initially selected
  - initially open
    - Disabled Node
    - Another node
- Root node 2

###### Code Example

    <div id="checkbox-tree">
      <ul>
        <li>
            Root node 1
            <ul>
                <li>
                  Child Node
                </li>
                <li data-jstree='{ "selected" : true }'>
                    Initially selected
                </li>
                <li data-jstree='{ "opened" : true }'>
                    initially open
                    <ul>
                        <li data-jstree='{ "disabled" : true }'>
                            Disabled Node
                        </li>
                        <li data-jstree='{ "type" : "file" }'>
                            Another node
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li data-jstree='{ "type" : "file" }'>
          Root node 2
        </li>
      </ul>
    </div>