I want to display alternate colors on my table, like row1: white row2:gray and that pattern will repeat till the end of the data table. This is my first time using Material Table, so I don't many ideias of how to do this, I thought about *ngFor but couldn't think in a implementation.

My HTML for the Data Table

<table mat-table [dataSource]="dataSource" >
    <!--Nome Column-->
    <ng-container matColumnDef="nome">
      <th mat-header-cell *matHeaderCellDef> Nome </th>
      <td mat-cell *matCellDef="let element"> {{element.nome}} </td>
    </ng-container>
  <!--Corretor Column-->
    <ng-container matColumnDef="corretor">
      <th mat-header-cell *matHeaderCellDef> Corretor </th>
      <td mat-cell *matCellDef="let element"> {{element.corretor}} </td>
    </ng-container>
  <!--Status Column-->
    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef> Status </th>
      <td mat-cell *matCellDef="let element"> {{element.status }} </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

My SCSS file for the component:

table {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

tr.mat-header-row {
  height: rem-calc(50);
  background-color: var(--black);
}

th.mat-header-cell {
  padding: rem-calc(12.5);
  margin: auto;
  text-align: left;
  max-width: 300px;
  color: var(--white);
  font-size: rem-calc(14);
  font-weight: bold;
}

CodePudding user response：

you can add a class to your column headers or cells arbitrarily. It should do the trick.

CodePudding user response：

You can use the even variable of the mat-row to check if the row is even or odd to apply the classes, for the dynamic class, You can use [ngClass] to conditionally add red-class for one row and blue-class for the next row. And this process will repeat itself till the last row.

Example:

<table mat-table [dataSource]="dataSource" >
    <!--Nome Column-->
    <ng-container matColumnDef="nome">
      <th mat-header-cell *matHeaderCellDef> Nome </th>
      <td mat-cell *matCellDef="let element"> {{element.nome}} </td>
    </ng-container>
  <!--Corretor Column-->
    <ng-container matColumnDef="corretor">
      <th mat-header-cell *matHeaderCellDef> Corretor </th>
      <td mat-cell *matCellDef="let element"> {{element.corretor}} </td>
    </ng-container>
  <!--Status Column-->
    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef> Status </th>
      <td mat-cell *matCellDef="let element"> {{element.status }} </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns; let e = even"
    [ngClass]="e? 'row-red' :'row-blue'" ></tr>
  </table>

And in your SCSS file, add these styles just for test purposes

.row-red{
    background-color: red;
}

.row-blue{
    background-color: blue;
}

CodePudding user response：

Added those classes to my SCSS and worked.

.mat-row:nth-child(n 1){
  background-color: var(--gray-list);
}
.mat-row:not(:nth-child(2n 1)){
  background-color: #ffffff;
}