Alternate row colours angular material table

Question

I am wondering how I target the even/odd rows inside a Angular Material Table so that I can set the even/odd rows a different background colour.

I setup my ClaimFileHistoryDataSource class:

claimClientInformation: ClaimFileHistory[];
dataSource : ClaimFileHistoryDataSource;
displayedColumns = ['TypeImg', 'Description', 'Agent'];


export class ClaimFileHistoryDataSource extends DataSource<ClaimFileHistory> {

    constructor(private _claimFileHistory: ClaimFileHistory[]) {
      super();
    }

    connect(): Observable<ClaimFileHistory[]> {
      return Observable.of(this._claimFileHistory);
    }

    disconnect() {}
}

On NgInit I make a call to my service to go and get the data I need and populate the DataSource:

this._claimFileHistoryService.getClaimFileHistoryById().subscribe(response => {
  this.claimClientInformation = response;       
  this.dataSource = new ClaimFileHistoryDataSource(this.claimClientInformation);
});

This is fine and the Data is coming back as it should.

In the HTML the Mat-Table looks like this:

    <mat-table #table [dataSource]="dataSource">

      <ng-container matColumnDef="TypeImg">
        <mat-cell *matCellDef="let row"><img [src]='row.TypeImg' height="40px"></mat-cell>
      </ng-container>

      <ng-container matColumnDef="Description">
        <mat-cell *matCellDef="let row">
          <div>
            <span class="d-block">{{row.Description}}</span>
            <span class="d-block">{{row.Date}}</span>
          </div>

        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="Agent">
        <mat-cell *matCellDef="let row"> {{row.Agent}} </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>

Again I was wondering how do I go about getting the Odd/Even rows of the table and setting them a different row background colour?

score 181 · Accepted Answer · edited Dec 15 '20 at 12:59

181

Use Following CSS in your .css or .scss file to set the different style for even/odd row:

.mat-row:nth-child(even){
    background-color: red;
}
        
.mat-row:nth-child(odd){
    background-color: black;
}

edited Dec 15 '20 at 12:59

Gustavo Lopes

3,794
4
17
57

answered Nov 01 '17 at 10:02

mohit uprim

5,226
2
24
28

for some reason this didn't work for me, instead this answer helped me out: https://stackoverflow.com/a/56349859/9625054 – sahus Jun 29 '22 at 14:35
Check if "mat-row" is a class, in my case it didn't, so I just use it as a element – MagicTaco Feb 20 '23 at 23:25

score 57 · Answer 2 · answered Sep 28 '18 at 16:51

57

Updating this answer with a newer approach to future developers who may come to this question.

Material Angular now offers some variables to row indexes.

<mat-row *matRowDef="
              let row;
              let even = even; 
              columns: displayedColumns;" 
         [ngClass]="{gray: even}"></mat-row>

In you CSS file: .gray { background-color: #f5f5f5 }

There are other properties like: index, count, first, last, even and odd.

You can find out more on Angular Docs, more specifically on section "Table showing each row context properties"

answered Sep 28 '18 at 16:51

Gustavo Lopes

3,794
4
17
57

3

This is the better option if you're using expandable detail rows otherwise the coloring will get off – Brandon Pugh Aug 22 '19 at 20:45
1

Newbie question: Why do you need `let even = even` but not 'let row = row`? – xr280xr Oct 21 '21 at 16:36
1

@xr280xr check https://gist.github.com/JanMalch/800cc0e1e448961fa5d93289e24e26fb#implementing-logic and look for $implicit, that is the `row` in our case – Filip Kováč Aug 08 '23 at 22:25

score 10 · Answer 3 · answered Jan 23 '19 at 11:11

You can apply colors to rows based on condition as well.

For an instance if the cell value is equal to 100,then change the color of the row to red.

     <tr class="matheader-row" mat-row *matRowDef="let row; columns: displayColumns; 
      let i = index; let even = even;" [class.rowStyle]="row['myColumn']=='100'"
                [ngClass]="{rowcolor: even}">
        </tr>

css

.rowStyle{
background-color:red;
font-weight: bold;
}

Above scenario will work if your columns have myColumn as one of the columns. Also using even property you can apply the required color styling [ngClass]="{rowcolor: even}

Timelot · Answer 4 · 2020-07-20T19:40:28.800

4

if you use themes a transparent css looks nice:

.mat-row:nth-child(odd){
  background: rgba(0,0,0,0.025);
}

edited Jul 20 '20 at 19:40

answered Jul 20 '20 at 19:13

Timelot

621
6
8

score 3 · Answer 5 · answered Oct 27 '20 at 15:22

Unfortunatly none of the above answers worked for me (i'm using multiTemplateDataRows), but after tweaking Gustavo Lopez answer i got it to work as below:

<tr *matRowDef="
          let row;
          let index = dataIndex;
          columns: displayedColumns;" 
     [ngClass]="{alternate: index % 2 == 0 }"></tr>´

And the css is as previous answer:

.alternate { background-color: #f5f5f5 }

It seems like no of the properties like odd,even or index work when you have multiTemplateDataRows but fortunately they've solved the index property with dataIndex (https://github.com/angular/components/issues/12793#issuecomment-415356860). Hopefully this will help others that have expandable rows.

Thank you, this solution works perfectly when using expandable rows — Aaron Lavers, Jan 21 '21 at 02:32

score 0 · Answer 6 · answered Nov 15 '20 at 12:04

The answers of @mohit uprim and @Gustavo Lopes did work for me for a Material Angular datatable. But whenever I hover above the line, the row gets its initial default colour (white) and restores the new CSS colour on mouse-out event. So, adding "important" flag should fix it :

.some-class-name {
    background-color: blue !important; 
}

score 0 · Answer 7 · answered Jun 16 '23 at 00:12

0

With Angular Material 16

.mat-mdc-row:nth-child(even) {
  background-color: #f1f1f1; /* Set the background color for even rows */
}

.mat-mdc-row:nth-child(odd) {
  background-color: #ffffff; /* Set the background color for odd rows */
}

answered Jun 16 '23 at 00:12

Henry Xiloj Herrera

124
6

Alternate row colours angular material table

7 Answers7