CODEWITHSUNDEEP
htmlcssangularangular-material2
Ben Clarke
Ben Clarke

Reputation: 1493

Alternate row colours angular material table

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?

Upvotes: 74

Views: 106231

Answers (8)

Eduardo
Eduardo

Reputation: 1

always remember to check the template style in the browser, if the property is crossed out, add '!important'

Upvotes: 0

Henry Xiloj Herrera
Henry Xiloj Herrera

Reputation: 314

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 */
}

Upvotes: 2

mohit uprim
mohit uprim

Reputation: 5344

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;
}

Upvotes: 189

Omar
Omar

Reputation: 1440

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; 
}

Upvotes: 0

Vanhorn
Vanhorn

Reputation: 444

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.

Upvotes: 5

Timelot
Timelot

Reputation: 641

if you use themes a transparent css looks nice:

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

Upvotes: 5

Hameed Syed
Hameed Syed

Reputation: 4275

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}

Upvotes: 11

Gustavo Lopes
Gustavo Lopes

Reputation: 4184

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"

Upvotes: 63

Related Questions