How can I assign different colors to disabled columns in Mat-Table?

Question

i have disabled several columns in my table and want to display them in different colors. Therefore I wrote a function in Typescript where CSS is changed via the class .disabledRange. I have read that you can solve it with [ngClass]... I have an array with three columns: first, second, third. How can I leave the columns disabled and still style them in different colors? In my case I don't know how to use it in the most useful way. I would be grateful for help :)

My code:

// Template
<td mat-cell *matCellDef [class.disabledRange]="column.disabledRange">
...
</td>

// Array
private displayedColumns: EditColumns[] = [
    { attribute: 'first', name: 'MyFirstCol', object: null, disabledRange: false },
    { attribute: 'second', name: 'MySecondCol', object: null, disabledRange: false },
    { attribute: 'third', name: 'MyThirdCol', object: null, disabledRange: false }

  ];

// Set columns disabled
  private disabledColumns(attributeName: string) {
    if (attributeName) {
      const displayedColumn = this.displayedColumns.find((c) => c.attribute === first);
      if (displayedColumn) {
        displayedColumn.disabledRange = !displayedColumn.disabledRange;
        const columnIndex = this.columns.findIndex((c) => c === attributeName);

      }
    }

ngAfterViewInit() {
    // To disabled columns   
    this.disabledColumns('first');
    this.disabledColumns('second');
    this.disabledColumns('third');
  }

// Style
// When ranges are disabled in the data table
.disabledRange {
  background-color: #eae9e9;
  color: #000000;
}

Eliseo · Answer 1 · 2020-05-13T17:38:09.700

you can use together [class.disabledRange]="condition" and [ngClass], e.g. if you has some like

.col0,.col1,.col2,.col3
{
  padding-left: .5rem
}
.col0
{
  background-color: silver
}
.col1
{
  background-color: yellow
}
.col2
{
  background-color: red;
  color:white;
}

You can use

<ng-container *ngFor="let col of defColumns;let i=index" [matColumnDef]="col.name">
    <th mat-header-cell *matHeaderCellDef [class.disabledRange]="col.disabledRange" [ngClass]="'col'+i">{{col.attribute}}  </th>
    <td mat-cell *matCellDef="let element" [class.disabledRange]="col.disabledRange" [ngClass]="'col'+i"  > {{element[col.name]}} </td>
  </ng-container>

See, stackblitz, for more about ngClass see the docs

Updated if we can change the "class" of the rows we can use the tag "tr mat-row.

Imagine some data like:

[
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H',class:"col0"},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He',class:"col1"},
]

<tr mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="row.class"></tr>

Of course we can also changing the td., we need use "some variable of the row". We can has a property of our "data",

You can write

<td mat-cell *matCellDef="let element"
   [class.disabledRange]="col.disabledRange" 
   [ngClass]="element.class"> {{element[col.name]}} </td>

We can also use the "index of the row", e.g.

<!--see the "let row=index"-->
<td mat-cell *matCellDef="let element;let row=index" 
    [class.disabledRange]="col.disabledRange" 
    [ngClass]="'col'+(row%4)"  > {{element[col.name]}} </td>

NOTE: If only want to change the background, we can use

  [style.background-color]="....."

Thanks :) Strangely enough the rows and not the columns are changed by the style. Do you know how to change that? — , May 13 '20 at 12:51
Really we are changing the "td" (and the "tr"), not the row. The row you can change in two ways, one change the class of the row, and another cange the class of the td (or [style.background-color]), see my updated answer — Eliseo, May 13 '20 at 17:37

How can I assign different colors to disabled columns in Mat-Table?

1 Answers1