Angular PrimeNG TreeTable 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 Scrolling in Angular PrimeNG.

Angular PrimeNG TreeTable Scroll enables scroll in the TreeTable component. So using a scroll, we can easily customize the TreeTable component and show Table Data according to the best user experience.

Syntax:

<p-treeTable 
    [scrollable]="true"
    scrollHeight='px' >
</p-treeTable>

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:

Project Structure

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

app.component.html

<h2 style="color: green">
    GeeksforGeeks
</h2>
<h4>
    Angular PrimeNG TreeTable Scroll
</h4>

<p-treeTable [value]="tableData"
    [scrollable]="true"
    scrollHeight="250px">
    <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>

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',
                        },
                    },
                ],
            },
        ];
    }
}

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 a simple example demonstrating the use of the Angular PrimeNG TreeTable Scroll. In this example, we are integrating Horizontal and vertical sorting.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG TreeTable Scroll</h4>

<p-treeTable
    [columns]="cols"
    [value]="tableData"
    [scrollable]="true"
    [style]="{ width: '500px' }"
    scrollHeight="300px">
    <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>

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',
                        },
                    },
                ],
            },
        ];
    }
}

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 3: Below is a simple example that demonstrates the use of the Angular PrimeNG TreeTable Scroll, In this example, we are freezing a column and then applying scroll on the TreeTable.

app.component.html

<h2 style="color: green;">GeeksforGeeks</h2>
<h4>Angular PrimeNG TreeTable Scroll</h4>

<p-treeTable
    [value]="tableData"
    [columns]="scrollableCols"
    [frozenColumns]="frozenCols"
    [scrollable]="true"
    scrollHeight="200px"
    frozenWidth="200px"
    [style]="{ width: '400px' }">
    <ng-template
        pTemplate="colgroup"
        let-columns>
        <colgroup>
            <col
                *ngFor="let col of columns"
                style="width:300px" />
        </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-rowData="rowData"
        let-columns="columns">
        <tr style="height: 64px">
            <td *ngFor="let col of columns; let i = index">
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
    <ng-template
        pTemplate="frozenbody"
        let-rowNode
        let-rowData="rowData">
        <tr>
            <td>
                <p-treeTableToggler
                    [rowNode]="rowNode">
                </p-treeTableToggler>
                {{ rowData.name }}
            </td>
        </tr>
    </ng-template>
</p-treeTable>

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[] = [];
    cols: any[] = [];
    scrollableCols: any[] = [];
    frozenCols: any[] = [];
    constructor(private nodeService: NodeService) { }

    ngOnInit() {
        this.cols = [
            { field: 'name', header: 'First Name' },
            { field: 'age', header: 'Age' },
        ];
        this.scrollableCols = [{
            field: 'age',
            header: 'Age'
        }];
        this.frozenCols = [{
            field: 'name',
            header: 'First Name'
        }];
        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',
                        },
                    },
                ],
            },
        ];
    }
}

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/scroll