Open In App

Angular PrimeNG Table Styling Certain Rows and Columns

Improve
Improve
Like Article
Like
Save
Share
Report

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 Style Certain Rows and Columns in Angular PrimeNG.

The Table component shows some data to the user in tabular form. Certain Rows and Columns of a table can be styled differently by applying CSS classes to them based on some condition checks.

Syntax:

<p-table [value]="games" responsiveLayout="scroll">
    <ng-template pTemplate="header">
         <tr>
              <th>Game</th>
              <th>Publisher</th>
              ...
         </tr>
    </ng-template>
    <ng-template pTemplate="body" let-game>
        <tr [ngClass]="{Condition-Check-Here}">
            <td>{{game.name}}</td>
            <td>{{game.publisher}}</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 shows how to style selected rows based on some conditions. Here, we set the background color of the row to green if the rating is greater than 4.0 otherwise its background color will be red.

app.component.html




<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Table Styling Certain Rows and Columns</h4>
  
    <p-table [value]="games" responsiveLayout="scroll">
        <ng-template pTemplate="header">
            <tr>
                <th>Game</th>
                <th>Developer</th>
                <th>Release Year</th>
                <th>Rating</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-game>
            <tr 
                [ngClass]="{
                    'low-rated' : game.rating < 4.0, 
                    'high-rated': game.rating >= 4.0}">
                <td>{{game.name}}</td>
                <td>{{game.developer}}</td>
                <td>{{game.year}}</td>
                <td>{{game.rating}}
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>


app.component.ts




import { Component } from '@angular/core';
  
interface Game {
    name: String,
    developer: String,
    rating: Number,
    year: Number
}
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
        `tr.low-rated{
            background-color: red;
            color: white;
        }
        tr.high-rated{
            background-color: green;
            color: white;
        }
        `
    ]
})
  
export class AppComponent {
    games: Game[] = [];
  
    ngOnInit() {
        this.games = [
            {
                name: "Minecraft",
                developer: "Mojang Studios",
                year: 2011,
                rating: 4.9
            },
            {
                name: "GTA 5",
                developer: "RockStar Games",
                year: 2013,
                rating: 4.5
            },
            {
                name: "Roblox",
                developer: "Roblox Corporation",
                year: 2011,
                rating: 3.8
            },
            {
                name: "Genshin Impact",
                developer: "miHoYo",
                year: 206,
                rating: 3.9
            },
            {
                name: "Candy Crush Saga",
                developer: "King",
                year: 2014,
                rating: 4.1
            },
            {
                name: "God of War",
                developer: "Jetpack Interactive",
                year: 2018,
                rating: 3.5
            },
            {
                name: "Fortnite",
                developer: "Epic Games",
                year: 2017,
                rating: 3.9
            },
            {
                name: "Fishdom",
                developer: "Playrix",
                year: 2008,
                rating: 4.2
            },
            {
                name: "Asphalt 9: Legends",
                developer: "Gameloft",
                year: 2018,
                rating: 4.4
            },
            {
                name: "Homescapes",
                developer: "Playrix",
                year: 2017,
                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 example, we set the background color of the alternate columns to red and green.

app.component.html




<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>
        Angular PrimeNG Table Styling Certain Rows and Columns
    </h4>
  
    <p-table [value]="games" responsiveLayout="scroll">
        <ng-template pTemplate="header">
            <tr>
                <th>Game</th>
                <th>Developer</th>
                <th>Release Year</th>
                <th>Rating</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-game>
            <tr>
                <td 
                    [ngClass]="{'odd-column' : true}">
                    {{game.name}}
                </td>
                <td 
                    [ngClass]="{'even-column' : true}">
                    {{game.developer}}
                </td>
                <td 
                    [ngClass]="{'odd-column' : true}">
                    {{game.year}}
                </td>
                <td 
                    [ngClass]="{'even-column' : true}">
                    {{game.rating}}
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>


app.component.ts




import { Component } from '@angular/core';
  
interface Game {
    name: String,
    developer: String,
    rating: Number,
    year: Number
}
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
        `td.even-column{
            background-color: red;
            color: white;
        }
        td.odd-column{
            background-color: green;
            color: white;
        }
        `
    ]
})
  
export class AppComponent {
    games: Game[] = [];
  
    ngOnInit() {
        this.games = [
            {
                name: "Minecraft",
                developer: "Mojang Studios",
                year: 2011,
                rating: 4.9
            },
            {
                name: "GTA 5",
                developer: "RockStar Games",
                year: 2013,
                rating: 4.5
            },
            {
                name: "Roblox",
                developer: "Roblox Corporation",
                year: 2011,
                rating: 3.8
            },
            {
                name: "Genshin Impact",
                developer: "miHoYo",
                year: 206,
                rating: 3.9
            },
            {
                name: "Candy Crush Saga",
                developer: "King",
                year: 2014,
                rating: 4.1
            },
            {
                name: "God of War",
                developer: "Jetpack Interactive",
                year: 2018,
                rating: 3.5
            },
            {
                name: "Fortnite",
                developer: "Epic Games",
                year: 2017,
                rating: 3.9
            },
            {
                name: "Fishdom",
                developer: "Playrix",
                year: 2008,
                rating: 4.2
            },
            {
                name: "Asphalt 9: Legends",
                developer: "Gameloft",
                year: 2018,
                rating: 4.4
            },
            {
                name: "Homescapes",
                developer: "Playrix",
                year: 2017,
                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 { }


Output:

 

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



Last Updated : 07 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads