TreeView implemented with vanilla JavaScript

Downloads in past


6021.1.56 years ago7 years agoMinified + gzip package size for js-treeview in KB


Vanilla JavaScript TreeView
Build Statusnpm version
A stupid, simple tree view written with vanilla JS. I needed a lightweight control that just displayed data in a tree form and out popped this. I wrote a post on my blog that goes into more depth.


None. I built this using only plain JavaScript so there's no external dependencies. Other than the CSS required for styling.

Example Usage

If used outside of NPM/require, it will attach a global TreeVew object to window. If done using NPM, then it can be included using require like everything else. To install it via NPM:
npm install js-treeview


<div id="tree"></div>


// NPM
var TreeView = require('js-treeview');

var tree = new TreeView([
    { name: 'Item 1', children: [] },
    { name: 'Item 2', expanded: true, children: [
            { name: 'Sub Item 1', children: [] },
            { name: 'Sub Item 2', children: [] }
], 'tree');


| Name | Type | Description | | ---- | ---- | ----------- | | data | array | The array of items to populate the tree with. Each item is required to have a name and a children array. An optional expanded option allows you to default the child to be expanded when created. | | id | string|object | ID of the DOM element, or the DOM element itself, to render the tree in. |


| Name | Arguments | Description | | ----- | --------- | ----------- | | expand | target - The DOM node that initiated the expand
leaves - Array of leaf DOM nodes under the target | Fires when a leaf is expanded. | | expandAll | No arguments | Fires after the expandAll method is called. | | collapse | target - The DOM node that initiated the collapse
leaves - Array of leaf DOM nodes under the target | Fires when a leaf is collapsed. | | collapseAll | No arguments | Fires after the collapseAll method is called. | | select | target - The DOM node selected
data - Data node associated with the selected element | Fires when a outermost leaf is selected. Contains data item of the leaf selected. |


tree.on('select', function (e) {

CodePen Example


This plugin is available under the MIT license.