Primeng table styleclass

by


Explanation of PrimeNG table styleClass

PrimeNG is a rich set of UI components for Angular applications. The table component in PrimeNG provides a styleClass property that allows you to add custom CSS classes to various parts of the table.

Examples:

Let’s see some examples of using the styleClass property in PrimeNG table.

Example 1: Customizing the table background color

To change the background color of the table, you can create a custom CSS class and apply it using the styleClass property.

      
        <p-table [value]="data" styleClass="custom-table">
          // table content
        </p-table>

In the above example, the table will have a light blue background color due to the “custom-table” class.

Example 2: Styling specific rows

To style specific rows in the table, you can define a CSS class for those rows and apply it using the rowStyleClass property of the table component.

      
        <p-table [value]="data" rowStyleClass="custom-row">
          // table content
        </p-table>

In the above example, any row with the “custom-row” class will have bold font-weight.

Example 3: Styling specific cells

Sometimes you may want to style specific cells within the table. You can achieve this by defining a CSS class for those cells and applying it using the cellStyleClass property of the column component.

      
        <p-table [value]="data">
          <ng-template pTemplate="header">
            <th>Name</th>
            <th>Age</th>
          </ng-template>
          <ng-template pTemplate="body" let-row>
            <td [class]="'custom-cell'">{{row.name}}</td>
            <td [class]="'custom-cell'">{{row.age}}</td>
          </ng-template>
        </p-table>

In the above example, the cells in the “Name” and “Age” columns will have padding of 5px due to the “custom-cell” class.

Leave a comment