Angular PrimeNG Table Frozen Rows

Last Updated : 23 Jul, 2025

Angular PrimeNG is an open-source library that consists of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see Angular PrimeNG Table Frozen Rows.

The Table Component shows some data to the user in tabular form. Frozen rows are the rows that get fixed to the table while scrolling. The rows which are to be frozen can be defined using the [frozenValue] property.

Syntax:

<p-table [value]="unfrozenBooks" 
    [frozenValue]="frozenBooks" 
     [scrollable]="true" scrollHeight="300px">
    <ng-template pTemplate="header">
        <tr>
            <th>Name</th>
            <th>Author</th>
            ...
        </tr>
    </ng-template>
    <ng-template pTemplate="frozenbody" let-book>
        <tr class="frozen-row">
            <td>{{book.name}}</td>
            <td>{{book.author}}</td>
            ...

        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-book>
        <tr>
            <td>{{book.name}}</td>
            <td>{{book.author}}</td>
            ...
        </tr>
    </ng-template>
</p-table>

Creating Angular application and Installing the Modules:

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

ng new myapp

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

cd myapp

Step 3: Install PrimeNG in your given directory.

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

Project Structure: After completing the above steps the project structure will look like the following.

Example 1: This example illustrates how to freeze rows of a table in PrimenNG.

app.component.html

<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Table Frozen Rows</h4>

    <p-table 
        [value]="unfrozenBooks" 
        [frozenValue]="frozenBooks" 
        [scrollable]="true" 
        scrollHeight="300px">

        <ng-template pTemplate="header">
            <tr>
                <th>Name</th>
                <th>Author</th>
                <th>Year</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="frozenbody" let-book>
            <tr class="frozen-row">
                <td>{{book.name}}</td>
                <td>{{book.author}}</td>
                <td>{{book.year}}</td>
            </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>
</div>

app.component.ts

import { Component } from '@angular/core';

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
        `.frozen-row{
            font-weight: bold;
        }`
    ]
})

export class AppComponent {
    frozenBooks: Book[] = [];
    unfrozenBooks: Book[] = [];

    ngOnInit() {

        this.unfrozenBooks = [
            {
                name: "Clean Code",
                author: "Robert Cecil Martin",
                year: 2008
            },
            {
                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
            }
        ];

        this.frozenBooks = [
            {
                name: "Introduction to Algorithms",
                author: "Thomas H Corman",
                year: 1989
            }
        ];
    }

}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TableModule } from 'primeng/table';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TableModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

Run the Application:

Execute the below command from the root of your project to run the angular application.

ng serve --open

Output:

Example 2: In this example, we added a button at the end of each row so that its frozen state can be toggled dynamically.

app.component.html

<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Table Frozen Rows</h4>

    <p-table 
        [value]="unfrozenBooks" 
        [frozenValue]="frozenBooks" 
        [scrollable]="true" 
        scrollHeight="300px">
        <ng-template pTemplate="header">
            <tr>
                <th>Name</th>
                <th>Author</th>
                <th>Year</th>
                <th>Freeze/Unfreeze</th>
            </tr>
        </ng-template>
        <ng-template 
            pTemplate="frozenbody" 
            let-book let-index="rowIndex">
            <tr class="frozen-row">
                <td>{{book.name}}</td>
                <td>{{book.author}}</td>
                <td>{{book.year}}</td>
                <td>
                    <button pButton type="button" 
                        [icon]="'pi pi-lock-open'" 
                        (click)="toggleFreeze(book,true,index)"
                        class="p-button 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>
                    <button pButton type="button" 
                        [icon]="'pi pi-lock'" 
                        [disabled]="frozenBooks.length >= 2"
                        (click)="toggleFreeze(book,false,index)" 
                        class="p-button p-button-text">
                    </button>
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>

app.component.ts

import { Component } from '@angular/core';

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
        `.frozen-row{
            font-weight: bold;
        }`
    ]
})

export class AppComponent {
    frozenBooks: Book[] = [];
    unfrozenBooks: Book[] = [];

    ngOnInit() {

        this.unfrozenBooks = [
            {
                name: "Clean Code",
                author: "Robert Cecil Martin",
                year: 2008
            },
            {
                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
            }
        ];

        this.frozenBooks = [
            {
                name: "Introduction to Algorithms",
                author: "Thomas H Corman",
                year: 1989
            }
        ];
    }


    toggleFreeze(book: Book, isFreezed: boolean, i: Number)
    {
        if (isFreezed) {
            this.frozenBooks = 
                this.frozenBooks.filter((c, index) => index !== i);
            this.unfrozenBooks.push(book);
        }
        else {
            this.unfrozenBooks = 
                this.unfrozenBooks.filter((c, index) => index !== i);
            this.frozenBooks.push(book);
        }
    }

}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TableModule } from 'primeng/table';
import { ButtonModule } from 'primeng/button';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TableModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }