TreeTable

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

          <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>jpg</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>jpg</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. 


      <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


      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. 


      $('.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() 

      const treeTable = document.querySelector('.treetable');
      let 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.

Import

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


      import { Treetable } from 'mdb-ui-kit';