simple-treeview
Awfully basic JavaScript treeview component.
- API documentation: https://unpkg.com/simple-treeview/docs/index.html
- Live demo
Usage
Vanilla Tree View
- Include the treeview CSS:
<link rel="stylesheet" href="https://unpkg.com/simple-treeview/dist/treeview.vanilla.css">
- If you want to use Font Awesome icons, include its CSS as well:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
- Load the treeview JavaScript (as an ES module), and use the
VanillaTreeViewclass:
<script type="module">
import { VanillaTreeView } from 'https://unpkg.com/simple-treeview/dist/treeview.vanilla.js';
let tree = new VanillaTreeView(document.getElementById('tree'), {
provider: {
async getChildren(id) {
if (!id) {
return [
{ id: 'p1', label: 'Parent #1', icon: { classes: ['far', 'fa-folder'] }, state: 'collapsed' },
{ id: 'p2', label: 'Parent #2', icon: { classes: ['far', 'fa-folder'] }, state: 'expanded' }
];
} else {
await new Promise((resolve, reject) => setTimeout(resolve, 1000)); // Simulate 1s delay
switch (id) {
case 'p1':
return [
{ id: 'c1', label: 'Child #1', icon: { classes: ['far', 'fa-file'] }, state: 'collapsed' },
{ id: 'c2', label: 'Child #2', icon: { classes: ['far', 'fa-file'] } }
];
case 'p2':
return [
{ id: 'c3', label: 'Child #3', icon: { classes: ['far', 'fa-file'] } },
{ id: 'c4', label: 'Child #4', icon: { classes: ['far', 'fa-file'] } }
];
case 'c1':
return [
{ id: 'g1', label: 'Grandchild #1', icon: { classes: ['far', 'fa-clock'] } }
];
default:
return [];
}
}
}
}
});
</script>
Bootstrap Tree View
- Make sure you include Bootstrap dependencies (incl. Bootstrap Icons if you want to use those, too), for example:
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
- Include the treeview CSS:
<link rel="stylesheet" href="https://unpkg.com/simple-treeview/dist/treeview.bootstrap.css">
- Load the treeview JavaScript (as an ES module), and use the
BootstrapTreeViewclass:
<script type="module">
import { BootstrapTreeView } from 'https://unpkg.com/simple-treeview/dist/treeview.bootstrap.js';
let tree = new BootstrapTreeView(document.getElementById('tree'), {
provider: {
async getChildren(id) {
if (!id) {
return [
{ id: 'p1', label: 'Parent #1', icon: { classes: ['bi', 'bi-folder'] }, state: 'collapsed' },
{ id: 'p2', label: 'Parent #2', icon: { classes: ['bi', 'bi-folder'] }, state: 'expanded' }
];
} else {
await new Promise((resolve, reject) => setTimeout(resolve, 1000));
switch (id) {
case 'p1':
return [
{ id: 'c1', label: 'Child #1', icon: { classes: ['bi', 'bi-file-earmark'] }, state: 'collapsed' },
{ id: 'c2', label: 'Child #2', icon: { classes: ['bi', 'bi-file-earmark'] } }
];
case 'p2':
return [
{ id: 'c3', label: 'Child #3', icon: { classes: ['bi', 'bi-file-earmark'] } },
{ id: 'c4', label: 'Child #4', icon: { classes: ['bi', 'bi-file-earmark'] } }
];
case 'c1':
return [
{ id: 'g1', label: 'Grandchild #1', icon: { classes: ['bi', 'bi-clock'] } }
];
default:
return [];
}
}
}
}
});
</script>
10 Oct 3, 2022
6 Dec 20, 2022
1 Dec 19, 2021
2 Feb 17, 2022
7 Aug 26, 2022
1 Dec 22, 2021
6 Nov 28, 2022
21 Sep 1, 2022
16 Feb 28, 2022
6 May 11, 2022