Angular PrimeNG Table Horizontal and Vertical Scrolling

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 Horizontal and Vertical Scrolling.

The Table Component is used to show some data to the user in the tabular form. When the height and width of the table exceed the viewport’s height and width the horizontal and vertical scrolling of the table should be enabled to enhance the user experience. This can be done by setting the scrollable property to “true” and the scrollDirection property to “both”.

Syntax:

<p-table [value]="cars" [scrollable]="true" 
    scrollDirection="both" scrollHeight="300px">
    <ng-template pTemplate="header">
        <tr>
            <th style="width: 300px">Car</th>
            <th style="width: 300px">Company</th>
            <th style="width: 300px">Vehicle Number</th>
            ....
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car>
        <tr>
            <td style="width: 300px">{{car.name}}</td>
            <td style="width: 300px">{{car.company}}</td>
            <td style="width: 300px">{{car.number}}</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: In this example, we set the scrollDirection property of the table to “both” and set the scrollHeight of the table to 300px to make it scroll in both directions.

app.component.html

<div style="text-align: center"> 
    <h2 style="color: green">GeeksforGeeks</h2> 
    <h4> 
        Angular PrimeNG Table  
        Horizontal and Vertical Scrolling 
    </h4> 
  
    <p-table 
        [value]="cars"  
        [scrollable]="true"  
        scrollDirection="both" 
        scrollHeight="300px"> 
  
        <ng-template pTemplate="header"> 
            <tr> 
                <th style="width: 300px">Car</th> 
                <th style="width: 300px">Company</th> 
                <th style="width: 300px">Vehicle Number</th> 
                <th style="width: 300px">Manufactured year</th> 
                <th style="width: 300px">KM Driven</th> 
                <th style="width: 300px">Price</th> 
                <th style="width: 300px">Rating</th> 
            </tr> 
        </ng-template> 
        <ng-template pTemplate="body" let-car> 
            <tr> 
                <td style="width: 300px">{{car.name}}</td> 
                <td style="width: 300px">{{car.company}}</td> 
                <td style="width: 300px">{{car.number}}</td> 
                <td style="width: 300px">{{car.manufacturedYear}}</td> 
                <td style="width: 300px">{{car.kmDriven}}</td> 
                <td style="width: 300px">{{car.price}}</td> 
                <td style="width: 300px">{{car.rating}}</td> 
            </tr> 
        </ng-template> 
    </p-table> 
</div>

app.component.ts

import { Component } from '@angular/core'; 
  
interface Car { 
    id: Number, 
    name: String, 
    company: String, 
    number: String, 
    manufacturedYear: Number, 
    kmDriven: Number, 
    price: String, 
    rating: Number 
} 
  
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
}) 
  
export class AppComponent { 
    cars: Car[] = []; 
  
    ngOnInit() { 
        this.cars = [ 
            { 
                id: 1, 
                name: "Creta", 
                company: "Hyundai", 
                number: "MH01BHXX01", 
                manufacturedYear: 2016, 
                kmDriven: 23456, 
                price: "11 Lakhs", 
                rating: 4.0 
            }, 
            { 
                id: 2, 
                name: "Audi Q7", 
                company: "Audi", 
                number: "UP76APXXX2", 
                manufacturedYear: 2006, 
                kmDriven: 11342, 
                price: "90.2 Lakhs", 
                rating: 4.7 
            }, 
            { 
                id: 3, 
                name: "Venue", 
                company: "Hyundai", 
                number: "MH11AHXX01", 
                manufacturedYear: 2019, 
                kmDriven: 45456, 
                price: "7.8 Lakhs", 
                rating: 3.5 
            }, 
            { 
                id: 4, 
                name: "Audi A4", 
                company: "Hyundai", 
                number: "BR01SD1XX0", 
                manufacturedYear: 1997, 
                kmDriven: 18446, 
                price: "49.4 Lakhs", 
                rating: 4.5 
            }, 
            { 
                id: 5, 
                name: "Audi e-tron", 
                company: "Audi", 
                number: "MP11BPXX00", 
                manufacturedYear: 2020, 
                kmDriven: 9901, 
                price: "1.2 Crore", 
                rating: 4.9 
            }, 
            { 
                id: 6, 
                name: "Alto", 
                company: "Maruti Suzuki", 
                number: "MP14BPXX99", 
                manufacturedYear: 2008, 
                kmDriven: 98901, 
                price: "4 Lakhs", 
                rating: 3.2 
            }, 
        ]; 
    } 
}

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 article, we show a horizontal and vertical scrollable table that will have the row color set to red if the rating of the car is below 4.0.

app.component.html

<div style="text-align: center"> 
    <h2 style="color: green">GeeksforGeeks</h2> 
    <h4> 
        Angular PrimeNG Table  
        Horizontal and Vertical Scrolling 
    </h4> 
  
    <p-table 
        [value]="cars"  
        [scrollable]="true"  
        scrollDirection="both" 
        scrollHeight="300px"> 
  
        <ng-template pTemplate="header"> 
            <tr> 
                <th style="width: 300px">Car</th> 
                <th style="width: 300px">Company</th> 
                <th style="width: 300px">Vehicle Number</th> 
                <th style="width: 300px">Manufactured year</th> 
                <th style="width: 300px">KM Driven</th> 
                <th style="width: 300px">Price</th> 
                <th style="width: 300px">Rating</th> 
            </tr> 
        </ng-template> 
        <ng-template pTemplate="body" let-car> 
            <tr [ngClass]="{ 'rated-low' : car.rating < 4.0}"> 
                <td style="width: 300px">{{car.name}}</td> 
                <td style="width: 300px">{{car.company}}</td> 
                <td style="width: 300px">{{car.number}}</td> 
                <td style="width: 300px">{{car.manufacturedYear}}</td> 
                <td style="width: 300px">{{car.kmDriven}}</td> 
                <td style="width: 300px">{{car.price}}</td> 
                <td style="width: 300px">{{car.rating}}</td> 
            </tr> 
        </ng-template> 
    </p-table> 
</div>

app.component.ts

import { Component } from '@angular/core'; 
  
interface Car { 
    id: Number, 
    name: String, 
    company: String, 
    number: String, 
    manufacturedYear: Number, 
    kmDriven: Number, 
    price: String, 
    rating: Number 
} 
  
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styles: [ 
        `tr.rated-low{ 
            background-color: red; 
            color: white; 
        } 
        ` 
    ] 
}) 
  
export class AppComponent { 
    cars: Car[] = []; 
  
    ngOnInit() { 
        this.cars = [ 
            { 
                id: 1, 
                name: "Creta", 
                company: "Hyundai", 
                number: "MH01BHXX01", 
                manufacturedYear: 2016, 
                kmDriven: 23456, 
                price: "11 Lakhs", 
                rating: 4.0 
            }, 
            { 
                id: 2, 
                name: "Audi Q7", 
                company: "Audi", 
                number: "UP76APXXX2", 
                manufacturedYear: 2006, 
                kmDriven: 11342, 
                price: "90.2 Lakhs", 
                rating: 4.7 
            }, 
            { 
                id: 3, 
                name: "Venue", 
                company: "Hyundai", 
                number: "MH11AHXX01", 
                manufacturedYear: 2019, 
                kmDriven: 45456, 
                price: "7.8 Lakhs", 
                rating: 3.5 
            }, 
            { 
                id: 4, 
                name: "Audi A4", 
                company: "Hyundai", 
                number: "BR01SD1XX0", 
                manufacturedYear: 1997, 
                kmDriven: 18446, 
                price: "49.4 Lakhs", 
                rating: 4.5 
            }, 
            { 
                id: 5, 
                name: "Audi e-tron", 
                company: "Audi", 
                number: "MP11BPXX00", 
                manufacturedYear: 2020, 
                kmDriven: 9901, 
                price: "1.2 Crore", 
                rating: 4.9 
            }, 
            { 
                id: 6, 
                name: "Alto", 
                company: "Maruti Suzuki", 
                number: "MP14BPXX99", 
                manufacturedYear: 2008, 
                kmDriven: 98901, 
                price: "4 Lakhs", 
                rating: 3.2 
            }, 
        ]; 
    } 
}

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 { }