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>
<script setup lang="ts">
  import { MDBTreetable } from "mdb-vue-treetable";
</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>
<script setup lang="ts">
  import { MDBTreetable } from "mdb-vue-treetable";
</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. 
<template>
  <MDBBtn color="primary" @click="treetableRef?.collapseAll()"
    >Collapse all</MDBBtn
  >
  <MDBTreetable class="d-flex w-100" ref="treetableRef">
    <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";
  import { MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";
  export default {
    components: {
      MDBTreetable,
      MDBBtn,
    },
    setup() {
      const treetableRef = ref();

      return {
        treetableRef,
      };
    },
  };
</script>
<script setup lang="ts">
  import { MDBTreetable } from "mdb-vue-treetable";
  import { MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const treetableRef = ref<InstanceType<typeof MDBTreetable> | null>(null);
</script>

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. 
<template>
  <MDBTreetable  @collapse="doSomething" >...</MDBTreetable >
</template>