Angular PrimeNG DataTable 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 Table Scroll in Angular PrimeNG.

The Table Component shows some data to the user in tabular form. The DataTable scroll is used to show the scrollable view available either horizontally, vertically or both.

Angular PrimeNG DataTable Scroll:

• Vertical scroll: It is used to scroll the DataTable in the vertical direction.
• Flexible Viewport: The dynamic scrollable viewport area can expand or contract in relation to the table’s parent size thanks to the flex scroll capability.
• Full Page Scroll: FlexScroll can also be utilized in situations when a scrollable viewport needs to adapt to the size of the window.
• Horizontal and Vertical: It is used to scroll the DataTable in both the vertical and the horizontal direction.
• Frozen Rows: It is used to freeze the selected row.
• Frozen Columns: It is used to freeze the selected column.
• Subheader Grouping: It is used to group all the sub-heading under the main heading and freeze the current main heading.

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:

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

ng serve --save

Example 1: Below is a simple example demonstrating the use of Angular PrimeNG Table Scroll using vertical scrolling.

• app.component.html:

HTML

<h1 style="color: green;">GeeksforGeeks</h1>
<h5>Angular PrimeNG Table Vertical Scroll</h5>

<p-table [value]="books"
    [scrollable]="true"
    scrollHeight="400px">
    <ng-template pTemplate="header">
        <tr>
            <th>Name</th>
            <th>Author</th>
            <th>Year</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-book>
        <tr>
            <td>{{book.name}}</td>
            <td>{{book.author}}</td>
            <td>{{book.year}}</td>
        </tr>
    </ng-template>
</p-table>

• app.component.ts:

Javascript

import { Component } from "@angular/core";
import { CustomerService } from "./customerservice";
import { Customer } from "./customer";

interface Book {
    name: String;
    author: String;
    year: Number;
}

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

export class AppComponent {
    customers: Customer[];
    books: Book[] = [];

    constructor(private customerService: CustomerService) {}

    ngOnInit() {
        this.customerService.getCustomersMedium().then((data) => {
            this.customers = data;
        });

        this.books = [
            {
                name: "Clean Code",
                author: "Robert Cecil Martin",
                year: 2008
            },
            {
                name: "Introduction to Algorithms",
                author: "Thomas H Cormen",
                year: 1989
            },
            {
                name: "Refactoring",
                author: "Martin Fowler",
                year: 1999
            },
            {
                name: "Code Complete",
                author: "Steve McConnell",
                year: 1993
            },
            {
                name: "Programming Pearls",
                author: "John Bentley",
                year: 1986
            },
            {
                name: "The Clean Coder",
                author: "Robert Cecil Martin",
                year: 2011
            },
            {
                name: "Coders at Work",
                author: "Peter Seibel",
                year: 2009
            },
            {
                name: "Effective Java",
                author: "Joshua Bloch",
                year: 2001
            },
            {
                name: "Head First Java",
                author: "Bert Bates",
                year: 2003
            }
        ];
    }
}

• 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 { RouterModule } from "@angular/router";
import { AppComponent } from "./app.component";
import { CustomerService } from "./customerservice";
import { TableModule } from "primeng/table";
import { ToastModule } from "primeng/toast";
import { CalendarModule } from "primeng/calendar";
import { SliderModule } from "primeng/slider";
import { MultiSelectModule } from "primeng/multiselect";
import { ContextMenuModule } from "primeng/contextmenu";
import { DialogModule } from "primeng/dialog";
import { ButtonModule } from "primeng/button";
import { DropdownModule } from "primeng/dropdown";
import { ProgressBarModule } from "primeng/progressbar";
import { InputTextModule } from "primeng/inputtext";
import { ToggleButtonModule } from "primeng/togglebutton";

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TableModule,
        CalendarModule,
        SliderModule,
        DialogModule,
        MultiSelectModule,
        ContextMenuModule,
        DropdownModule,
        ButtonModule,
        ToastModule,
        InputTextModule,
        ProgressBarModule,
        HttpClientModule,
        FormsModule,
        ToggleButtonModule,
        RouterModule.forRoot([
            { path: "", component: AppComponent }
        ])
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [CustomerService]
})

export class AppModule {}

Output:

Example 1: Below is a simple example demonstrating the use of Angular PrimeNG Table Scroll using frozen rows scrolling.

• app.component.html:

HTML

<h1 style="color: green;">GeeksforGeeks</h1>
<h5>Angular PrimeNG Table Frozen Rows Scroll</h5>

<p-table
    [value]="unlockedBooks"
    [frozenValue]="lockedBooks"
    [scrollable]="true"
    scrollHeight="400px">
    <ng-template pTemplate="header">
        <tr>
            <th>Name</th>
            <th>Author</th>
            <th>Year</th>
            <th style="flex: 0 0 4rem;"></th>
        </tr>
    </ng-template>
    <ng-template pTemplate="frozenbody"
         let-book let-index="rowIndex">
        <tr>
            <td>{{ book.name }}</td>
            <td>{{ book.author }}</td>
            <td>{{ book.year }}</td>
            <td style="flex: 0 0 4rem;">
                <button
                    pButton
                    pRipple
                    type="button"
                    [icon]="'pi pi-lock-open'"
                    (click)=" lockUnlock(book, true, index)"
                    class="p-button-sm p-button-text">
              </button>
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="body"
         let-book let-index="rowIndex">
        <tr>
            <td>{{ book.name }}</td>
            <td>{{ book.author }}</td>
            <td>{{ book.year }}</td>
            <td style="flex: 0 0 4rem;">
                <button
                    pButton
                    pRipple
                    type="button"
                    [icon]="'pi pi-lock'"
                    [disabled]="lockedBooks.length >= 2"
                    (click)=" lockUnlock(book, false, index)"
                    class="p-button-sm p-button-text">
              </button>
            </td>
        </tr>
    </ng-template>
</p-table>

• app.component.ts:

Javascript

import { Component } from "@angular/core";
import { CustomerService } from "./customerservice";
import { Customer } from "./customer";
import { MessageService } from "primeng/api";

interface Book {
    id: Number;
    name: String;
    author: String;
    year: Number;
}

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    providers: [MessageService],
    styleUrls: ["./app.component.css"]
})

export class AppComponent {

    Books: Book[] = [];
    frozenCols: any[];
    unlockedBooks: Book[];
    lockedBooks: any[];

    constructor(private customerService: CustomerService) {}

    ngOnInit() {
        this.Books = [
            {
                id: 1001,
                name: "Clean Code",
                author: "Robert Cecil Martin",
                year: 2008
            },
            {
                id: 1002,
                name: "Introduction to Algorithms",
                author: "Thomas H Cormen",
                year: 1989
            },
            {
                id: 1003,
                name: "Refactoring",
                author: "Martin Fowler",
                year: 1999
            },
            {
                id: 1004,
                name: "Code Complete",
                author: "Steve McConnell",
                year: 1993
            },
            {
                id: 1005,
                name: "Programming Pearls",
                author: "John Bentley",
                year: 1986
            },
            {
                id: 1006,
                name: "The Clean Coder",
                author: "Robert Cecil Martin",
                year: 2011
            },
            {
                id: 1007,
                name: "Coders at Work",
                author: "Peter Seibel",
                year: 2009
            },
            {
                id: 1008,
                name: "Effective Java",
                author: "Joshua Bloch",
                year: 2001
            },
            {
                id: 1009,
                name: "Head First Java",
                author: "Bert Bates",
                year: 2003
            }
        ];

        this.unlockedBooks = [
            {
                id: 1001,
                name: "Clean Code",
                author: "Robert Cecil Martin",
                year: 2008
            },
            {
                id: 1002,
                name: "Introduction to Algorithms",
                author: "Thomas H Cormen",
                year: 1989
            },
            {
                id: 1003,
                name: "Refactoring",
                author: "Martin Fowler",
                year: 1999
            },
            {
                id: 1004,
                name: "Code Complete",
                author: "Steve McConnell",
                year: 1993
            },
            {
                id: 1005,
                name: "Programming Pearls",
                author: "John Bentley",
                year: 1986
            },
            {
                id: 1006,
                name: "The Clean Coder",
                author: "Robert Cecil Martin",
                year: 2011
            },
            {
                id: 1007,
                name: "Coders at Work",
                author: "Peter Seibel",
                year: 2009
            },
            {
                id: 1008,
                name: "Effective Java",
                author: "Joshua Bloch",
                year: 2001
            },
            {
                id: 1009,
                name: "Head First Java",
                author: "Bert Bates",
                year: 2003
            }
        ];

        this.lockedBooks = [
            {
                id: 1000,
                name: 'DSA Self-Paced',
                author: 'Sandeep Jain Sir',
                year: 2018,
            },
        ];
    }

    lockUnlock(data, frozen, index) {
        if (frozen) {
            this.lockedBooks = this.lockedBooks.filter((c, i) => i !== index);
            this.unlockedBooks.push(data);
        } else {
            this.unlockedBooks = this.unlockedBooks.filter(
                (c, i) => i !== index
            );
            this.lockedBooks.push(data);
        }

        this.unlockedBooks.sort((val1, val2) => {
            return val1.id < val2.id ? -1 : 1;
        });
    }
}

• 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 { RouterModule } from "@angular/router";
import { AppComponent } from "./app.component";
import { CustomerService } from "./customerservice";
import { TableModule } from "primeng/table";
import { ToastModule } from "primeng/toast";
import { CalendarModule } from "primeng/calendar";
import { SliderModule } from "primeng/slider";
import { MultiSelectModule } from "primeng/multiselect";
import { ContextMenuModule } from "primeng/contextmenu";
import { DialogModule } from "primeng/dialog";
import { ButtonModule } from "primeng/button";
import { DropdownModule } from "primeng/dropdown";
import { ProgressBarModule } from "primeng/progressbar";
import { InputTextModule } from "primeng/inputtext";
import { ToggleButtonModule } from "primeng/togglebutton";

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TableModule,
        CalendarModule,
        SliderModule,
        DialogModule,
        MultiSelectModule,
        ContextMenuModule,
        DropdownModule,
        ButtonModule,
        ToastModule,
        InputTextModule,
        ProgressBarModule,
        HttpClientModule,
        FormsModule,
        ToggleButtonModule,
        RouterModule.forRoot([
            { path: "", component: AppComponent }
        ])
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [CustomerService]
})

export class AppModule {}

• app.component.css:

CSS

:host ::ng-deep .p-frozen-column {
  font-weight: bold;
}
:host ::ng-deep .p-datatable-frozen-tbody {
  font-weight: bold;
}

Output:

Reference: https://primefaces.org/primeng/table/scroll