Angular PrimeNG Table Frozen Rows

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.

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.

Output:

 

Reference: http://primefaces.org/primeng/table