Awfully Basic JavaScript Treeview Component Library

Simple Treeview is a very basic JavaScript Treeview component that can be used to visualize any hierarchical data such as files and folders.

tree structure in javascript dynamically, hierarchical tree structure in html, how to create tree structure in javascript, bootstrap tree view, hierarchical tree structure in html css

How to make use of it:

1. Install and import the VanillaTreeView element with NPM.

# NPM
$ npm i simple-treeview --save
import { VanillaTreeView } from './dist/treeview.vanilla.js';
<link rel="stylesheet" href="./dist/treeview.vanilla.css" />

2. It additionally comes with a Bootstrap model that’s appropriate with the newest Bootstrap 5 framework.

import { BootstrapTreeView } from './dist/treeview.bootstrap.js';
<link rel="stylesheet" href="./dist/treeview.bootstrap.css" />

3. Create an empty DIV container that can host the tree view.

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

4. The code under reveals learn how to current information within the tree view.

let tree = new VanillaTreeView(document.getElementById('tree'), {
    provider: {
        async getChildren(id) {
            if (!id) {
                return [
                    { id: 'p1', label: 'Parent #1', icon: 'fa-folder', state: 'collapsed' },
                    { id: 'p2', label: 'Parent #2', icon: 'fa-folder', state: 'expanded' }
                ];
            } else {
                await new Promise((resolve, reject) => setTimeout(resolve, 1000));
                switch (id) {
                    case 'p1':
                        return [
                            { id: 'c1', label: 'Child #1', icon: 'fa-file', state: 'collapsed' },
                            { id: 'c2', label: 'Child #2', icon: 'fa-file' }
                        ];
                    case 'p2':
                        return [
                            { id: 'c3', label: 'Child #3', icon: 'fa-file' },
                            { id: 'c4', label: 'Child #4', icon: 'fa-file' }
                        ];
                    case 'c1':
                        return [
                            { id: 'g1', label: 'Grandchild #1', icon: 'fa-clock' }
                        ];
                    default:
                        return [];
                }
            }
        }
    }
});

Simple Tree View Component, simple-treeview Plugin/Github, pure javascript treeview, dynamic tree view, hierarchical tree javascript


See Demo And Download

Official Website(petrbroz): Click Here

This superior jQuery/javascript plugin is developed by petrbroz. For extra Advanced Usage, please go to the official website.

Share