Angular PrimeNG TreeTable Full Page Scroll

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. This article will show us how to use TreeTable Full Page Scroll in Angular PrimeNG.

Angular PrimeNG TreeTable Full Page Scroll enables Full Page Viewport scroll in the TreeTable component. FlexScroll can be used for cases where the scrollable viewport should be responsive with respect to the window size. So, using a scroll, we can easily customize the TreeTable component and show Table Data according to the best user experience.

Syntax:

<div style="height: calc(100vh - 149px)">
    <p-treeTable [scrollable]="true" scrollHeight='flex' >
    </p-treeTable>
</div>

Creating Angular application & Module Installation:

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

ng new appname

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

cd appname

Step 3: Install PrimeNG in your given directory.

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

Project Structure: It will look like the following:

Example 1: Below is a simple example that demonstrates the use of the Angular PrimeNG TreeTable Full Page Scroll.

app.component.html

<div style="height: calc(100vh - 149px)">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG TreeTable Full Page Scroll</h4>

    <p-treeTable [value]="tableData"
                 [scrollable]="true"
                 scrollHeight="flex">
        <ng-template pTemplate="header">
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </ng-template>

        <ng-template pTemplate="body" let-rowNode
                     let-row="rowData">
            <tr [ttRow]="rowNode">
                <td>
                    <p-treeTableToggler [rowNode]="rowNode">
                      </p-treeTableToggler>
                    {{ row.name }}
                </td>
                <td>{{ row.age }}</td>
            </tr>
        </ng-template>
    </p-treeTable>
</div>

app.component.ts

import { Component } from '@angular/core';
import { NodeService } from './nodeservice';
import { TreeNode } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    tableData: TreeNode[] = [];

    constructor(private nodeService: NodeService) { }

    ngOnInit() {
        this.tableData = [
            {
                data: {
                    name: 'David',
                    age: '40',
                },
                children: [
                    {
                        data: {
                            name: 'Nathan',
                            age: '16',
                        },
                    },
                    {
                        data: {
                            name: 'Shane',
                            age: '14',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'Warner',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'Michelle',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'Charlie',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'Max',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'Michelle',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'Charlie',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'Willy',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'Michelle',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'Charlie',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'Miley',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'Michelle',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'Charlie',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'Sam',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'Michelle',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'Charlie',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'James',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'Michelle',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'Charlie',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'James',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'Michelle',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'Charlie',
                            age: '24',
                        },
                    },
                ],
            }, {
                data: {
                    name: 'James',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'Michelle',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'Charlie',
                            age: '24',
                        },
                    },
                ],
            }, {
                data: {
                    name: 'James',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'Michelle',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'Charlie',
                            age: '24',
                        },
                    },
                ],
            }, {
                data: {
                    name: 'James',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'Michelle',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'Charlie',
                            age: '24',
                        },
                    },
                ],
            }, {
                data: {
                    name: 'James',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'Michelle',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'Charlie',
                            age: '24',
                        },
                    },
                ],
            },
        ];
    }
}

app.module.ts

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';

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

export class AppModule { }

Output:

Example 2: Below is another example that demonstrates the use of the Angular PrimeNG TreeTable Full Page Scroll. In this example, we are integrating Horizontal and vertical sorting.

app.component.html

<div style="height: calc(100vh - 149px)">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG TreeTable Full Page Scroll</h4>

    <p-treeTable [columns]="cols"
                 [value]="tableData"
                 [scrollable]="true"
                 [style]="{ width: '500px' }"
        scrollHeight="flex">
        <ng-template pTemplate="colgroup" let-columns>
            <colgroup>
                <col *ngFor="let col of columns"
                     style="width:350px" />
            </colgroup>
        </ng-template>

        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns">
                    {{ col.header }}
                </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>
</div>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { NodeService } from './nodeservice';
import { TreeNode } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    tableData: TreeNode[] = [];
    cols: any[] = [];
    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: '55',
                },
                children: [
                    {
                        data: {
                            name: 'H',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'I',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'J',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'K',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'L',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'M',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'N',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'O',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'P',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'Q',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'R',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'S',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'T',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'U',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'S',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'T',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'U',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'S',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'T',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'U',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'S',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'T',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'U',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'S',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'T',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'U',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'S',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'T',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'U',
                            age: '24',
                        },
                    },
                ],
            },
        ];
    }
}

app.module.ts

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';

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

export class AppModule { }

Output:

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