Angular Grid with Rows in Alternate Colors

Created: 20 October 2017

Updated: 29 April 2019

In general, all rows in IntegralUI Grid component for Angular, have the same color style. Depending on current row state, a different color is displayed as its background. In cases when you have many rows, to improve the visual appearance of the Grid and to easily scan through the rows, it is better if even and odd row are displayed in a different color. This article demonstrates that: alternate colors for even/odd rows.

How to Display Grid Rows in Alternate Colors

The appearance of the Grid component is determined by a set of CSS classes. You can modify the attribute of each class on your side, but a better approach is to override the existing CSS classes with your own. For this purpose, you need to use the controlStyle property, which holds a reference to an object that contains the names of all classes for each part of the Grid.

You don't have to add new classes for all parts, you only need to change the ones used by the Grid rows. In this case, under row section, only change the general settings, and apply a different CSS class for each row state: normal, hovered and selected. For example:

• Angular
• HTML
• CSS

public gridStyle: any = {
    general: {
        normal: 'grid-eor-normal'
    },
    row: {
        general: {
            normal: 'grid-eor-row-normal',
            hovered: 'grid-eor-row-hovered',
            selected: 'grid-eor-row-selected'
        }
    }
}
                            

<iui-grid [columns]="columns" [rows]="rows" [controlStyle]="gridStyle" [showFooter]="false" #grid>
    <ng-template let-column [iuiTemplate]="{ type: 'header' }">
        {{column.headerText}}
    </ng-template>
    <ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
        {{cell.text}}
    </ng-template>
</iui-grid>
                            

.grid-eor-normal
{
    width: 800px;
    height: 400px;
}
.grid-eor-row-normal
{
    background: #f5f5f5;
}
.iui-grid-row-animate:nth-of-type(2n) .grid-eor-row-normal
{
    background: #e1e1e1;
}
                            

Using above code, you have changed the appearance of all grid rows by creating a custom CSS class. Furthermore, to make sure an alternate color is in use based on whether a row order is even or odd, you need to use the CSS selector: nth-of-type(2n). This sets a different color for each row, depending on its order in the list.

When applying custom CSS classes to the grid rows, the default ones are overridden. In this case, the built-in styles applied when a row is hovered or selected are removed. This happens mainly because the CSS selector has higher priority than a class selector. To solve this, just apply a CSS class for hovered and selected state of a row:

• Angular
• CSS

public gridStyle: any = {
    general: {
        normal: 'grid-eor-normal'
    },
    row: {
        general: {
            normal: 'grid-eor-row-normal',
            hovered: 'grid-eor-row-hovered',
            selected: 'grid-eor-row-selected'
        }
    }
}
                            

.grid-eor-row-hovered
{
    background: #a6c9e6 !important;
}
.grid-eor-row-selected
{
    color: white;
    background: #428bca !important;
}
                            

As a result, you have a Grid where rows are displayed in alternate colors. In addition, when row is hovered or selected a different style is applied.

Conclusion

Using custom CSS classes and selectors, you can change the appearance of the Angular Grid component. Displaying even/odd rows in alternate colors is very simple, you only need to create a class and apply it to the general row settings under controlStyle. You can add classes for each row state: disabled, normal, hovered and selected.

The Grid component is part of IntegralUI Web.