Alternate color with Angular Material mat-table with parent child rows

Question

I have an Angular Material mat-table which I used CSS styling for alternate row colors. Here is the CSS styling:

.mat-row:nth-child(even){
    background-color: #e4f0ec;
}

.mat-row:nth-child(odd){
    background-color:#ffffff;
}

This works when my mat-table does not have defined child rows. When I added another ng-container which is specified with "expandedDetail", this does not work anymore. All the rows is white but the expanded child rows are colored.

I followed the example from material.angular.io

I see other example for row styling but they use tr tags. In the example and my code, I used an ng-container, th and td tags for each column.

Any help is appreciated.

I added the project to stackblitz

https://stackblitz.com/edit/angular-4bcxtv

Here is the HTML code I used

<table mat-table
       [dataSource]="dataSource" multiTemplateDataRows
       class="mat-elevation-z8">
  <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
  </ng-container>

  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
      <div class="example-element-detail"
           [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
        <div class="example-element-diagram">
          <div class="example-element-position"> {{element.position}} </div>
          <div class="example-element-symbol"> {{element.symbol}} </div>
          <div class="example-element-name"> {{element.name}} </div>
          <div class="example-element-weight"> {{element.weight}} </div>
        </div>
        <div class="example-element-description">
          {{element.description}}
          <span class="example-element-description-attribution"> -- Wikipedia </span>
        </div>
      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
      class="example-element-row"
      [class.example-expanded-row]="expandedElement === element"
      (click)="expandedElement = expandedElement === element ? null : element">
  </tr>
  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>

Does the stackblitz link run for you? There are a number of errors — tic, May 28 '19 at 17:31
Sorry, I posted the code but I am new at stackblitz. The code works on my visual studio code... but I can't get it to work online — c0micrage, May 28 '19 at 17:32

score 11 · Accepted Answer · answered May 28 '19 at 20:48

11

dang it - this took me too long to find out and the worse.. I don't know excatly why it's working..

.mat-row:nth-child(2n+1){
  background-color: #e4f0ec;
}
.mat-row:not(:nth-child(4n+1)){
  background-color:#ffffff;
}

I hope I could help you :)

answered May 28 '19 at 20:48

Geggi632

564
4
8

score 5 · Answer 2 · answered Feb 15 '21 at 17:53

Thought I would follow up on this issue as I recently faced it and found pieces of useful information that lead to the following elegant approach: In your table html we can utilize the built in "odd" or "even" properties, depending on which color you want first.

<tr mat-row *matRowDef="let row; let odd = odd; columns: columnNames;" [class.striped-row]="odd"></tr>

Then in your CSS add the following:

.striped-row {
    background-color: #ececec;
}

score 3 · Answer 3 · answered Feb 05 '20 at 22:16

When using mat-table with multiTemplateDataRows, the rows are indexed by dataIndex.

<tr mat-row *matRowDef="let row; let i = dataIndex; columns: ['expandedDetail']" class="example-detail-row" [ngClass]="{'alt-row': i % 2}"></tr>

See https://github.com/angular/components/issues/12793

score 2 · Answer 4 · answered May 28 '19 at 22:18

You could set your own class on the row and then target it, so as to not mess around with n-depth and complex selectors that break as your html changes.

.my-row {
    background-color: #e4f0ec;
}

.my-row__alternate {
    background-color:#ffffff;
}


<tr mat-row *matRowDef="let element; columns: columnsToDisplay; let i = index"
  class="my-row"
  [class.my-row__alternate]="i % 2">
</tr>

score 2 · Answer 5 · answered Oct 27 '20 at 13:16

2

You can use below css for table row and multiTemplateDataRows. This will strip group of table row + multiTemplateDataRows.

.mat-row:nth-child(4n-1), .mat-row:nth-child(4n) {
    background-color: #e4f0ec;
}

answered Oct 27 '20 at 13:16

Jignesh Gothadiya

155
1
5

This more like the expected result. The accepted answer delivers the child rows always in the same color. The answer above paints the child in the same color as the parent. – Jendrik Jul 23 '21 at 12:22

score 0 · Answer 6 · answered Jan 23 '20 at 10:29

I hope you might need this.

   .mat-row:nth-child(2n+1) {
        background-color: #FFFFFF;
    }

    .mat-row:nth-child(2n) {
        background-color: #F2F5F7;
    }

    .mat-row:nth-child(4n) {
        background-color: #FFFFFF;
    }

    .mat-row:nth-child(4n+1) {
        background-color: #F2F5F7;
    }

score 0 · Answer 7 · answered Jul 15 '20 at 12:35

I had issue with mat-option css, it had to have alternating background. Solved it with this:

.mat-option {
    &:nth-child(2n+1) {
        background-color: #f0efff;
    }
    &:not(:nth-child(2n+1)) {
        background-color: #fff;
    }
}

Note that second nth-child has ":not" in front

Alternate color with Angular Material mat-table with parent child rows

7 Answers7

Linked