Angular PrimeNG TreeTable Component

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more. In this article, we will see the Angular PrimeNG TreeTable Component.

The TreeTable Component is used to displays hierarchical data in tabular format. Angular provides a lot of customization in the form of properties, styles, templates, etc. that we can use to modify the treetable according to our needs. 

Angular PrimeNG TreeTable Components:

• Documentation: This contains the various components, i.e., the Dynamic Columns, Change Detection, Paginator, Sorting, Filtering, etc, which are utilized to enhance the TreeTable Component, along making the better user-experience.
• Templating: The templates are used to create components rapidly and also provide great flexibility. 
• Page: This component enables pagination in the TreeTable component. So using paginator options, we can easily paginate the table data on multiple pages according to our needs.
• Sort: The sorting can be enabled in the TreeTable by adding the SortableColumn directive and a sort indicator via the p-treeTableSortIcon component.
• Selection: The TreeTable provides a built-in single, multiple, and checkbox selection features. The onRowSelect-onRowUnselect events are provided as optional callbacks.
• Column Group: The Columns can easily be grouped using templating, along with using the rowspan and colspan properties.
• Lazy: It is used to load data in the background and load huge datasets.
• Edit: The cell editing is enabled by adding the EditableColumn directive to an editable cell that has a p-treeTableCellEditor helper component to define the input-output templates for the edit and view modes respectively.
• Scroll: TreeTable supports both horizontal and vertical scrolling as well as frozen columns and rows. 
• Column Resize: Columns can be resized using drag drop by setting the resizableColumns to true. 
• Reorder: Columns can be reordered using drag drop by setting the reorderableColumns to true and adding the ReorderableColumn directive to the columns that can be dragged.
• Column Toggle
• Style: The default style of the components can be modified by using the component classes and matching the website design. Also, based on the specific condition, certain columns & rows can be styled.
• ContextMenu
• Responsive: The treetable needs to be made customizable by the developer himself as TreeTable doesn’t provide any property for that.
• Filter: The filtering is enabled by defining the filter elements and calling the filter method on the local template. The treetable can be filtered with value, column field, and match mode parameters.
• Size: This component provides alternative options for the different available sizes for the TreeTable, other than the regular table.

Syntax:

<p-treeTable [value]="files">
    <ng-template pTemplate="body" 
                 let-rowNode let-rowData="rowData">
        <tr>
            <td>{{rowData.name}}</td>
            <td>{{rowData.size}}</td>
            <td>{{rowData.type}}</td>
        </tr>
    </ng-template>
</p-treeTable>

Creating Angular application & Module Installation:

Step 1: Create an Angular application using the following command.

ng new geeks_angular

Step 2:  After creating your project folder i.e. geeks_angular, move to it using the following command.

cd geeks_angular

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: The project structure will look like the following:

• Steps to run the application: Run the below command to see the output

ng serve --open

Example 1: In the following example, we have a simple Angular PrimeNG TreeTable Component.

• app.component.html:

HTML

<h1 style="color: green;
           text-align: center;">
  GeeksforGeeks
</h1>
<h3>Angular PrimeNG TreeTable Component</h3>

<p-treeTable [columns]="cols"
             [value]="tableData">
    <ng-template pTemplate="header">
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body"
                 let-rowNode let-rowData="rowData"
                              let-columns="columns">
        <tr>
            <td>
                <p-treeTableToggler
                     [rowNode]="rowNode">
                  </p-treeTableToggler>
                {{ rowData.name }}
            </td>
            <td>{{ rowData.age }}</td>
            <td>{{ rowData.type }}</td>
        </tr>
    </ng-template>
</p-treeTable>

• app.component.ts:

Javascript

import { Component, OnInit, ViewChild }
    from "@angular/core";
import { TreeNode } from "primeng/api";
import { MessageService } from "primeng/api";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    providers: [MessageService]
})
export class AppComponent {
    tableData: TreeNode[];
    cols: any[];

    constructor(private messageService: MessageService) { }

    ngOnInit() {
        this.cols = [
            { field: "name", header: "First Name" },
            { field: "age", header: "Age" }
        ];
        this.tableData = [
            {
                data: {
                    name: "A",
                    age: "40"
                },
                children: [
                    {
                        data: {
                            name: "B",
                            age: "16"
                        }
                    },
                    {
                        data: {
                            name: "C",
                            age: "14"
                        }
                    }
                ]
            },
            {
                data: {
                    name: "D",
                    age: "55"
                },
                children: [
                    {
                        data: {
                            name: "E",
                            age: "20"
                        }
                    },
                    {
                        data: {
                            name: "F",
                            age: "24"
                        }
                    }
                ]
            },
            {
                data: {
                    name: "G",
                    age: "32"
                },
                children: [
                    {
                        data: {
                            name: "H",
                            age: "20"
                        }
                    },
                    {
                        data: {
                            name: "I",
                            age: "24"
                        }
                    }
                ]
            },
            {
                data: {
                    name: "J",
                    age: "64"
                },
                children: [
                    {
                        data: {
                            name: "K",
                            age: "20"
                        }
                    },
                    {
                        data: {
                            name: "L",
                            age: "24"
                        }
                    }
                ]
            },
            {
                data: {
                    name: "M",
                    age: "12"
                },
                children: [
                    {
                        data: {
                            name: "N",
                            age: "20"
                        }
                    },
                    {
                        data: {
                            name: "O",
                            age: "24"
                        }
                    }
                ]
            },
            {
                data: {
                    name: "P",
                    age: "34"
                },
                children: [
                    {
                        data: {
                            name: "Q",
                            age: "20"
                        }
                    },
                    {
                        data: {
                            name: "R",
                            age: "24"
                        }
                    }
                ]
            },
            {
                data: {
                    name: "S",
                    age: "43"
                },
                children: [
                    {
                        data: {
                            name: "T",
                            age: "20"
                        }
                    },
                    {
                        data: {
                            name: "U",
                            age: "24"
                        }
                    }
                ]
            }
        ];
    }
}

• app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule }
    from "@angular/platform-browser";
import { HttpClientModule }
    from "@angular/common/http";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { NodeService } from "./nodeservice";
import { TreeTableModule } from "primeng/treetable";

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TreeTableModule,
        HttpClientModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [NodeService]
})

export class AppModule {}

Output:

Example 2: In the following example of Angular PrimeNG TreeTable Component, we have sorting enabled.

• app.component.html:

HTML

<h1 style="color: green;
           text-align: center;">
  GeeksforGeeks
</h1>
<h3>Angular PrimeNG TreeTable Component</h3>

<p-treeTable #treeTable [value]="tableData"
                         [columns]="cols">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns"
                [ttSortableColumn]="col.field">
                {{ col.header }}
                <p-treeTableSortIcon
                    [field]="col.field">
                </p-treeTableSortIcon>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body"
                 let-rowNode let-rowData="rowData"
                             let-columns="columns">
        <tr>
            <td *ngFor="let col of columns; let i = index">
                <p-treeTableToggler [rowNode]="rowNode"
                                    *ngIf="i == 0">
                </p-treeTableToggler>
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-treeTable>

• app.component.ts:

Javascript

import { Component, OnInit, ViewChild }
    from "@angular/core";
import { NodeService } from "./nodeservice";
import { TreeNode } from "primeng/api";
import { TreeTable } from "primeng/treetable";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html"
})

export class AppComponent {
    tableData: TreeNode[];
    cols: any[];

    @ViewChild("treeTable") table: TreeTable;
    constructor(private nodeService: NodeService) { }

    ngOnInit() {
        this.cols = [
            { field: "name", header: "First Name" },
            { field: "age", header: "Age" }
        ];
        this.tableData = [
            {
                data: {
                    name: "A",
                    age: "40"
                },
                children: [
                    {
                        data: {
                            name: "B",
                            age: "16"
                        }
                    },
                    {
                        data: {
                            name: "C",
                            age: "14"
                        }
                    }
                ]
            },
            {
                data: {
                    name: "D",
                    age: "55"
                },
                children: [
                    {
                        data: {
                            name: "E",
                            age: "20"
                        }
                    },
                    {
                        data: {
                            name: "F",
                            age: "24"
                        }
                    }
                ]
            },
            {
                data: {
                    name: "G",
                    age: "32"
                },
                children: [
                    {
                        data: {
                            name: "H",
                            age: "20"
                        }
                    },
                    {
                        data: {
                            name: "I",
                            age: "24"
                        }
                    }
                ]
            },
            {
                data: {
                    name: "J",
                    age: "64"
                },
                children: [
                    {
                        data: {
                            name: "K",
                            age: "20"
                        }
                    },
                    {
                        data: {
                            name: "L",
                            age: "24"
                        }
                    }
                ]
            },
            {
                data: {
                    name: "M",
                    age: "12"
                },
                children: [
                    {
                        data: {
                            name: "N",
                            age: "20"
                        }
                    },
                    {
                        data: {
                            name: "O",
                            age: "24"
                        }
                    }
                ]
            },
            {
                data: {
                    name: "P",
                    age: "34"
                },
                children: [
                    {
                        data: {
                            name: "Q",
                            age: "20"
                        }
                    },
                    {
                        data: {
                            name: "R",
                            age: "24"
                        }
                    }
                ]
            },
            {
                data: {
                    name: "S",
                    age: "43"
                },
                children: [
                    {
                        data: {
                            name: "T",
                            age: "20"
                        }
                    },
                    {
                        data: {
                            name: "U",
                            age: "24"
                        }
                    }
                ]
            }
        ];
    }
}

• app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule }
    from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule }
    from "@angular/common/http";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { NodeService } from "./nodeservice";
import { TreeTableModule } from "primeng/treetable";
import { ButtonModule } from "primeng/button";
import { InputTextModule } from "primeng/inputtext";

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TreeTableModule,
        ButtonModule,
        InputTextModule,
        HttpClientModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [NodeService]
})

export class AppModule { }

Output:

Reference: https://www.primefaces.org/primeng/treetable