Angular PrimeNG Table Frozen Rows
Last Updated :
07 Sep, 2022
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.
Project Structure
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>
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
}
];
}
}
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>
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);
}
}
}
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 { }
Output:
Reference: http://primefaces.org/primeng/table
Similar Reads
Angular PrimeNG Table Row Group
Angular PrimeNG is a UI toolkit to make web applications with Angular. It costing of hundreds of pre-built component that makes it easy for developers to create a beautiful and responsive web solution in less time. In this article, we will see Angular PrimeNG Table Row Group. A Table Component is us
7 min read
Angular PrimeNG Table Row Editing
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.
7 min read
Angular PrimeNG Table Expandable Rows
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.
6 min read
Angular PrimeNG Table Flex 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 Flex Scroll in Angular PrimeNG. Angular PrimeNG Table Fle
6 min read
Angular PrimeNG Table pFrozenColumn Properties
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 pFrozenColumn Properties in Angular PrimeNG. The Table componen
5 min read
Angular PrimeNG Table Filter
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. In this article, we will see how to use Table Filtering in Angular PrimeNG. Angular PrimeNG Table Fi
4 min read
Angular PrimeNG Table Filter Menu
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 Filtering in Angular PrimeNG. Angular PrimeNG Table Filte
5 min read
Angular PrimeNG Table Column Resize
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 Column Resize in Angular PrimeNG. Angular PrimeNG Tab
4 min read
Angular PrimeNG Table Lazy
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 Lazy in Angular PrimeNG. Angular PrimeNG Table Lazy is us
4 min read
Angular PrimeNG Table Filtering
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 Filtering in Angular PrimeNG. Angular PrimeNG Table Filte
5 min read