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
      })