Treetable

Angular Bootstrap 5 Treetable plugin

The Treetable plugin 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.

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. Add MdbTreeTable directive to table element and MdbTreeTableRow directive to tr element. Use dataSource input to set up the table. Adding children property to dataSource will create a nested row 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
 
<div class="treetable d-flex w-100">
  <table class="table" mdbTreeTable #treeTable="mdbTreeTable" [dataSource]="dataSource">
    <thead>
      <tr>
        <th scope="col" *ngFor="let header of headers">{{ header | titlecase }}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let rowData of treeTable.data" scope="row" [mdbTreeTableRow]="rowData">
        <td>
          {{ rowData.name }}
        </td>
        <td>
          {{ rowData.size }}
        </td>
        <td>
          {{ rowData.type }}
        </td>
      </tr>
    </tbody>
  </table>
</div>
import { Component } from '@angular/core';

interface FileType {
  name: string;
  size: string;
  type: string;
  children?: FileType[];
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  headers = ['Name', 'Size', 'Type'];
  dataSource: FileType[] = [
    {
      name: 'Personal',
      size: '15mb',
      type: 'Folder',
      children: [
        {
          name: 'index',
          size: '5mb',
          type: 'html',
        },
        {
          name: 'index',
          size: '5mb',
          type: 'html',
        },
        {
          name: 'my-cat',
          size: '0mb',
          type: 'webp',
        },
        {
          name: 'Documents',
          size: '350mb',
          type: 'Folder',
          children: [
            {
              name: 'Bill',
              size: '200mb',
              type: 'pdf',
            },
            {
              name: 'Newspapers mentions',
              size: '50mb',
              type: 'PDF',
            },
            {
              name: 'Ebooks',
              size: '100mb',
              type: 'zip',
            },
          ],
        },
        {
          name: 'Songs',
          size: '30mb',
          type: 'Folder',
          children: [
            {
              name: 'Ode to JS',
              size: '10mb',
              type: 'mp3',
            },
            {
              name: 'One more style',
              size: '10mb',
              type: 'mp3',
            },
            {
              name: 'Bjork-Its-Oh-So-Quiet',
              size: '10mb',
              type: 'mp3',
            },
          ],
        },
      ],
    },
    {
      name: 'Images',
      size: '1,5gb',
      type: 'Folder',
      children: [
        {
          name: 'Album-cover',
          size: '5mb',
          type: 'html',
        },
        {
          name: 'Naruto-background',
          size: '500mb',
          type: 'jpeg',
        },
        {
          name: 'Sasuke-background',
          size: '500mb',
          type: 'png',
        },
      ],
    },
  ];
};

TreeTable - API

Installation

To install and configure the plugin follow our Plugins Installation Guide. Please remember to update all the plugin names and import paths. You can find all the necessary information in the Import section. 

npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/treetable

Import

import { MdbTreeTableModule } from 'mdb-angular-treetable';
…
@NgModule ({
  ...
  imports: [MdbTreeTableModule],
  ...
})
@import 'mdb-angular-treetable/scss/treetable.scss';

Inputs

MdbTreeTableDirective

Name Type Default Description
dataSource T[] [] Data for treeTable construction.

Outputs

MdbTreeTableDirective

Name Description
collapse This event fires when a user collapses a row. You can access the data of collapsed row.
expand This event fires when a user expands a row. You can access the data of expanded row.

Methods

MdbTreeTableDirective

Name Description
collapseAll Collapses all rows
expandAll Expands all rows