javascriptangularangular-material-table

Alternate border inside mat-table every 3 rows

I'm blocked since few hours on a wish I have.

I want to draw border on my tr with a color from an array and the color switch every 3 rows.

For example i've an array in my component :

colors = ['#123456', '#aoaoao', '#rdrdrd', '#222222']

I want to do something like :

enter image description here

I use mat-table, i've tried to use ngStyle or ngClass with a module but i don't have any idea to do that. I only managed to change the line every X lines.

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; let index=index; columns: displayedColumns;" [ngClass]="{alternate: index % 3 === 0 }"
         ></tr>
    </tr>

If somebody have an idea, it's will be really helpful for me

Thanks a lot

Solution

  • If your array is not changing, you can do that with pure css

    table, th {
  border: 4px solid black;
  border-collapse: collapse;
  
  tr {
    &:nth-child(12n+2),&:nth-child(12n+3),&:nth-child(12n+4){
      --td-color: yellow;
    }
    &:nth-child(12n+5),&:nth-child(12n+6),&:nth-child(12n+7){
      --td-color: orange;
    }
     &:nth-child(12n+8),&:nth-child(12n+9),&:nth-child(12n+10){
      --td-color: red;
    }
       &:nth-child(12n+11),&:nth-child(12n+12),&:nth-child(12n+13){
      --td-color: violet;
    }
  }
  td {
    border: 4px solid var(--td-color);
  }
}

//[yellow, orange, red, violet]
    <table>
  <tr>
    <th>HEADER</th>
    <th>HEADER</th>
    <th>HEADER</th>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
    <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
    <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
    <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
    <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
    <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
    <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
      <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
</table>