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 BS 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.

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

4. The code under 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 [];
                }
            }
        }
    }
});