Treetable
Bootstrap 5 Treetable plugin
The Treetable component can render your data with a simple HTML. You simply create a HTML markup for your table nested within a div tag with a "treetable" class - you can customize your table later by adding data-mdb-attributes to the wrapper.
Note: Read the API tab to find all available options and advanced customization
Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.
Basic example
Create default Treetable by appending a table
element into a
div
with a .treetable
class and data-mdb-treetable-init
attribute. Adding
data-depth
attribute to a row element indicates it is another nest.
Each deeper nest's depth should be incremented by one.
Name | Size | Type |
---|---|---|
Personal | 15mb | Folder |
index | 5mb | html |
index | 5mb | html |
my-cat | 0mb | webp |
Documents | 350mb | Folder |
Bill | 200mb | |
Newspapers mentions | 50mb | |
Ebooks | 100mb | zip |
Songs | 30mb | Folder |
Ode to JS | 10mb | mp3 |
One more style | 10mb | mp3 |
Bjork-Its-Oh-So-Quiet | 10mb | mp3 |
Images | 1,5gb | Folder |
Album-cover | 500mb | jpeg |
Naruto-background | 500mb | png |
Sasuke-background | 500mb | webp |
<div data-mdb-treetable-init class="treetable d-flex w-100">
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Size</th>
<th scope="col">Type</th>
</tr>
</thead>
<tbody>
<tr data-depth="1">
<td>Personal</td>
<td>15mb</td>
<td>Folder</td>
</tr>
<tr>
<td>index</td>
<td>5mb</td>
<td>html</td>
</tr>
<tr>
<td>index</td>
<td>5mb</td>
<td>html</td>
</tr>
<tr>
<td>my-cat</td>
<td>0mb</td>
<td>webp</td>
</tr>
<tr data-depth="2">
<td>Documents</td>
<td>350mb</td>
<td>Folder</td>
</tr>
<tr>
<td>Bill</td>
<td>200mb</td>
<td>pdf</td>
</tr>
<tr>
<td>Newspapers mentions</td>
<td>50mb</td>
<td>PDF</td>
</tr>
<tr>
<td>Ebooks</td>
<td>100mb</td>
<td>zip</td>
</tr>
<tr data-depth="2">
<td>Songs</td>
<td>30mb</td>
<td>Folder</td>
</tr>
<tr>
<td>Ode to JS</td>
<td>10mb</td>
<td>mp3</td>
</tr>
<tr>
<td>One more style</td>
<td>10mb</td>
<td>mp3</td>
</tr>
<tr>
<td>Bjork-Its-Oh-So-Quiet</td>
<td>10mb</td>
<td>mp3</td>
</tr>
<tr data-depth="1">
<td>Images</td>
<td>1,5gb</td>
<td>Folder</td>
</tr>
<tr>
<td>Album-cover</td>
<td>500mb</td>
<td>jpeg</td>
</tr>
<tr>
<td>Naruto-background</td>
<td>500mb</td>
<td>png</td>
</tr>
<tr>
<td>Sasuke-background</td>
<td>500mb</td>
<td>webp</td>
</tr>
</tbody>
</table>
</div>
TreeTable - API
Import
import Treetable from 'mdb-treetable';
@import '~mdb-treetable/css/treetable.min.css';
Usage
Via data attribute
Using the Treetable plugin doesn't require any additional JavaScript code - simply add
data-mdb-treetable-init
attribute to
.treetable
and use other data attributes to set all options.
<div data-mdb-treetable-init class="treetable d-flex w-100">
<table class="table">
<thead>
<tr>
<th scope="col">Nest num</th>
<th scope="col">Name</th>
</tr>
</thead>
<tbody>
<tr data-depth="1">
<td>First depthmark</td>
<td>See below</td>
</tr>
<tr>
<td>1</td>
<td>Steven</td>
</tr>
<tr data-depth="2">
<td>Second depthmark</td>
<td>See below</td>
</tr>
<tr>
<td>2</td>
<td>Eric</td>
</tr>
<tr>
<td>2</td>
<td>Daniel</td>
</tr>
</tbody>
</table>
</div>
Via JavaScript
const treetable = document.querySelector('.treetable');
let myTreetable = new Treetable(treetable);
Via jQuery
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
$(document).ready(() => {
$('.treetable').treetable();
});
Methods
Name | Description | Example |
---|---|---|
collapseAll
|
Collapses all nests |
treetableInstance.collapseAll()
|
expandAll
|
Expands all nests |
treetableInstance.expandAll()
|
dispose
|
Removes the component's instance |
treetableInstance.dispose()
|
getInstance
|
Static method which allows you to get the treetable instance associated to a DOM element. |
Treetable.getInstance(treeTable)
|
const treeTable = document.querySelector('.treetable');
const treetableInstance = Treetable.getInstance(treeTable);
treetableInstance.collapseAll();
treetableInstance.expandAll();
Events
Name | Description |
---|---|
collapse.mdb.treetable
|
This event fires when a user collapses a nest. You can access the
collapsed data inside a listener's handler with
firstRows and nestedRows
fields.
|
expand.mdb.treetable
|
This event fires when a user expands a nest. You can access the
collapsed data inside a listener's handler with
firstRows and nestedRows
fields.
|
document.addEventListener('collapse.mdb.treetable', () => {
// do something
})