Simple Tree View Component In Vanilla JavaScript

Preview:

Description:

A simple vanilla JavaScript tree view component that can be used to visualize any hierarchical data like files and folders.

How to use it:

1. Install and import the VanillaTreeView component 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 also comes with a Bootstrap version that is compatible with the latest 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 will host the tree view.

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

4. The code below shows how to present data in the tree view. It is important to note that the component makes use of Font Awesome icons (Bootstrap Icons for Bootstrap version), so classes such as `fa-folder` or `fa-clock` can be used in {@link INode}'s `icon` property.

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 [];
                }
            }
        }
    }
});