Angular PrimeNG Table Styling Certain Rows and Columns

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.

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.

Output:

 

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