primeng table even odd color change

Mac Grediser

2 min read

·

27-11-2024

1

0

Share

Styling PrimeNG Tables: Even/Odd Row Color Alternation

PrimeNG's Table component is a powerful and versatile tool for displaying tabular data in your Angular applications. While it's visually appealing by default, enhancing its presentation with subtle styling can significantly improve user experience. A common enhancement is alternating row colors to improve readability and scannability – making even rows one color and odd rows another. This article will guide you through achieving this simple yet effective styling technique.

Method 1: Using the p-table class and CSS

The simplest approach involves leveraging the built-in classes of the PrimeNG Table component and applying CSS to target even and odd rows. PrimeNG automatically assigns the class p-datatable-row to each table row. We can further refine this using the :nth-child pseudo-class in CSS.

First, include the following CSS in your stylesheet (e.g., styles.css or within a <style> tag in your component):

.p-datatable-row:nth-child(even) {
  background-color: #f2f2f2; /* Light gray for even rows */
}

.p-datatable-row:nth-child(odd) {
  background-color: white; /* White for odd rows – or any other color */
}

This CSS targets every even row (nth-child(even)) and applies a light gray background. Odd rows (nth-child(odd)) retain the default white background. You can adjust the colors to match your application's theme.

Method 2: Using a custom CSS class

For more control and maintainability, especially in larger projects, it's recommended to create a custom CSS class. This allows you to easily reuse the styling in other parts of your application.

1. Create a custom class: Add the following CSS:

.even-row {
  background-color: #f2f2f2;
}

.odd-row {
  background-color: white;
}

2. Apply the class conditionally in your template: You'll need to add a conditional statement in your PrimeNG table template to apply the appropriate class to each row. This usually involves using the *ngIf directive and tracking the row index. However, PrimeNG offers a more elegant solution using the [class] binding with a function:

<p-table [value]="data" [rows]="10">
  <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
    <tr [class]="getRowClass(rowIndex)">
      <td>{{rowData.name}}</td>
      <td>{{rowData.country}}</td>
      <!-- ... other columns ... -->
    </tr>
  </ng-template>
</p-table>

3. Implement the getRowClass function in your component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-table',
  templateUrl: './my-table.component.html',
  styleUrls: ['./my-table.component.css']
})
export class MyTableComponent {
  data: any[] = [ /* Your table data */ ];

  getRowClass(index: number) {
    return index % 2 === 0 ? 'even-row' : 'odd-row';
  }
}

This function checks if the row index is even or odd using the modulo operator (%) and returns the corresponding class name.

Choosing the Best Method:

Method 1 is quicker for simple applications, but Method 2 offers better organization and reusability, making it preferable for larger, more complex projects. Method 2 also provides more flexibility should you need to apply additional styling based on other factors beyond just even/odd rows. Choose the method that best suits your project's needs and coding style. Remember to import the PrimeNG table module in your component. Both methods achieve the same visual result: alternating row colors for improved readability in your PrimeNG table.