Treetable

Vue 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


Basic example

Create default Treetable with MDBTreetable component. Pass table headers row to a head slot and table body rows to a default slot. 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
        
            
            <template>
              <MDBTreetable class="d-flex w-100">
                <template #head>
                  <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Size</th>
                    <th scope="col">Type</th>
                  </tr>
                </template>
                <template>
                  <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>
                </template>
              </MDBTreetable>
            </template>
          
        
    
        
            
            <script>
              import { MDBTreetable } from "mdb-vue-treetable";
              export default {
                components: {
                  MDBTreetable
                }
              };
            </script>
          
        
    

Structure example

Use structure property to create a MDBTreetable from the JavaScript structure.

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
        
            
            <template>
              <MDBTreetable
                class="d-flex w-100"
                :structure="{
                  cols: ['Name', 'Size', 'Type'],
                  rows: [
                    {
                      data: ['Personal', '15mb', 'Folder'],
                      children: [
                        {
                          data: ['index', '5mb', 'html'],
                        },
                        {
                          data: ['index', '5mb', 'html'],
                        },
                        {
                          data: ['my-cat', '0mb', 'jpg'],
                        },
                        {
                          data: ['Documents', '350mb', 'Folder'],
                          children: [
                            {
                              data: ['Bill', '200mb', 'PDF'],
                            },
                            {
                              data: ['Newspapers mentions', '50mb', 'PDF'],
                            },
                            {
                              data: ['Ebooks', '100mb', 'zip'],
                            },
                          ],
                        },
                        {
                          data: ['Songs', '30mb', 'Folder'],
                          children: [
                            {
                              data: ['Ode to JS', '10mb', 'mp3'],
                            },
                            {
                              data: ['One more style', '10mb', 'mp3'],
                            },
                            {
                              data: ['Bjork-Its-Oh-So-Quiet', '10mb', 'mp3'],
                            },
                          ],
                        },
                      ],
                    },
                    {
                      data: ['Images', '1,5gb', 'Folder'],
                      children: [
                        {
                          data: ['Album-cover', '500mb', 'jpeg'],
                        },
                        {
                          data: ['Naruto-background', '500mb', 'png'],
                        },
                        {
                          data: ['Sasuke-background', '500mb', 'webp'],
                        },
                      ],
                    },
                  ],
                }"
            />
            </template>
          
        
    
        
            
            <script>
              import { MDBTreetable } from "mdb-vue-treetable";
              export default {
                components: {
                  MDBTreetable
                }
              };
            </script>
          
        
    

Treetable - API


Import

        
            
          <script>
            import { MDBTreetable } from "mdb-vue-treetable";
          </script>
        
        
    

Properties

Name Type Default Description
structure Object - Setup structure of tree elements.
tag String 'div' Sets component wrapper tag.

Methods

Name Description
collapseAll Collapses every nested row in table.
expandAll Expands every nested row in table.

Events

Name Description
collapse This event fires when a user collapses a nest. Collapsed row is available with id property of the event (includes also all of the row's children when collapse parent).
collapseAll This event fires when a user collapses all of a nestes using collapseAll method.
expand This event fires when a user expandes a nest. Expanded row is available with id property of the event.
expandAll This event fires when a user expandes all of a nestes using expandAll method.