Treetable

TreeTable - Bootstrap 5 & Material Design 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

Basic example

Create default Treetable by appending a table element into a div with a .treetable class. 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 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

Usage

Via data attributes

Use data-depth attribute to indicate the level of nesting. For example, if a row with an attribute of data-depth="2" is inserted after data-depth="1" row, it will be nested within the attribute with lower value.

Edit in sandbox 
        
            
      <div 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
      })

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:

Edit in sandbox 
        
            
      import Treetable from 'mdb-treetable';