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