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
pdf
Newspapers mentions
50mb
PDF
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
Edit in sandbox 
<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

Edit in sandbox 
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.

Edit in sandbox 
<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

Edit in sandbox 
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.

Edit in sandbox 
$(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)
Edit in sandbox 
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.
Edit in sandbox 
document.addEventListener('collapse.mdb.treetable', () => {
  // do something
})