title: How can I assign different colors to disabled columns in Mat-Table?
body: <p>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 :)</p>
  
  <p>My code:</p>
  
  <pre><code>// Template
  &lt;td mat-cell *matCellDef [class.disabledRange]="column.disabledRange"&gt;
  ...
  &lt;/td&gt;
  </code></pre>
  
  <pre><code>// 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) =&gt; c.attribute === first);
        if (displayedColumn) {
          displayedColumn.disabledRange = !displayedColumn.disabledRange;
          const columnIndex = this.columns.findIndex((c) =&gt; 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;
  }
  </code></pre>