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 | |
| Newspapers mentions | 50mb | |
| 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 | |
| Newspapers mentions | 50mb | |
| 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>