Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/petrbroz/simple-treeview
Awfully basic JavaScript treeview component.
https://github.com/petrbroz/simple-treeview
Last synced: 27 days ago
JSON representation
Awfully basic JavaScript treeview component.
- Host: GitHub
- URL: https://github.com/petrbroz/simple-treeview
- Owner: petrbroz
- Created: 2021-08-09T08:24:18.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-10-19T11:28:34.000Z (about 1 year ago)
- Last Synced: 2024-10-05T02:28:58.570Z (about 1 month ago)
- Language: TypeScript
- Homepage: https://unpkg.com/simple-treeview/docs/index.html
- Size: 138 KB
- Stars: 8
- Watchers: 4
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# simple-treeview
Awfully basic JavaScript treeview component.
- API documentation: https://unpkg.com/simple-treeview/docs/index.html
- Live demo
- Vanilla: https://unpkg.com/simple-treeview/examples/vanilla.html
- Bootstrap: https://unpkg.com/simple-treeview/examples/bootstrap.html
## Usage
### Vanilla Tree View
- Include the treeview CSS:
```html
```
- If you want to use [Font Awesome](https://fontawesome.com) icons, include its CSS as well:
```html
```
- Load the treeview JavaScript (as an ES module), and use the `VanillaTreeView` class:
```html
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 [];
}
}
}
}
});
```
### Bootstrap Tree View
- Make sure you include Bootstrap dependencies (incl. [Bootstrap Icons](https://icons.getbootstrap.com/) if you want to use those, too), for example:
```html
```
- Include the treeview CSS:
```html
```
- Load the treeview JavaScript (as an ES module), and use the `BootstrapTreeView` class:
```html
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 [];
}
}
}
}
});
```