Is there a way to customize the color of disabled columns within a Mat-Table?

I have customized my table by disabling certain columns and now I want to distinguish them with different colors. To achieve this, I created a TypeScript function that changes the CSS using the class ".disabledRange". I came across suggestions about using [ngClass] to solve this issue... My array consists of three columns: first, second, third. How can I keep these columns disabled while also styling them with various colors? I am struggling to implement this effectively. Any assistance would be greatly appreciated :)

Here is 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 disable columns   
    this.disabledColumns('first');
    this.disabledColumns('second');
    this.disabledColumns('third');
  }

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

Answer №1

By using [class.disabledRange]="condition" and [ngClass] together, you can achieve a specific styling approach. For example, consider the following CSS rules:

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

You can implement this by:

<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>

To explore further, refer to the stackblitz and check out the docs for more insights on ngClass.

Update: To modify the "class" of rows using the "tr mat-row" tag, consider the following example with data:

[
  {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>

Additionally, you can also customize the td tags based on row-specific properties:

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

You can even apply styles based on the index of the row:

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

For cases where only the background needs changing, utilize:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

employing constructor objects within classes

I am attempting to utilize a class with a constructor object inside another class. How should I properly invoke this class? For example, how can I use Class 1 within Class 2? Below is an instance where an object is being created from a response obtained f ...

Loading CSS files in Next.js can sometimes require additional time for the styles to

Currently, I am working on a Next.js and Spring Boot project. However, I am facing issues with the loading of CSS files as they are taking a considerable amount of time to load. When I open a page, initially it appears without any styling, but after a few ...

Transform Default Buttons to Resemble Normal Buttons

I currently have a JavaFX button that is set as the Default Button, allowing users to select it with the Enter key. The button has a blue background: https://i.sstatic.net/SYvIj.png However, I would like to change its appearance to that of a normal butto ...

The division is now appearing below the preceding division instead of following it

I am currently encountering an issue that I believe has a simple solution, but I am unable to find it. I have two divs in my code. The first div contains a blurred background image and content, which is working perfectly fine. However, the second div is n ...

Customizing the appearance of checkboxes in React Material-Table filtering feature

Is there a way to modify the style of checkboxes in filtering? For instance, if I wish to adjust the dimensions of the checkbox that appears for the Birth Place field, what steps should I take? https://i.stack.imgur.com/pZLqQ.png ...

What is the best way to show an image on the screen once a submit button is clicked?

I have a hidden loader-bar gif that I want to display when the user submits a form. Here is the code: <p class="loadingImg" style="display:none;"><img src="/design/styles/_shared/classic-loader.gif" alt="" /></p> Is there a way to ...

Issue with ngRX infinite loop caused by the updateOne function in the adapter

Hey there, I'm struggling to figure out why my code is stuck in an infinite loop. I've searched online extensively but haven't found a solution that fits my specific issue. This is the code snippet causing the problem: /** * CODE ...

"Utilizing social links in web design for a seamless user experience

I'm currently exploring ways to repair the design of social media links. The GitHub and Spotify icons are displaying at different sizes, and it seems like the Blogger icon is not aligning correctly: https://i.sstatic.net/7j4Hr.jpg Referring to How ...

Sharing the input value with a service in Angular 4

I am a beginner when it comes to Angular 4. I currently have a variable named "md_id" which is connected to the view in the following way. HTML: <tr *ngFor="let item of driverData"> <td class="align-ri ...

Structuring a TypeScript microservices repository on GitHub: Best practices to follow

Currently, I am in the process of designing a set of microservices. The structure I have been following involves each item having its own repository. my-project-logger my-project-numbers-service includes: my-project-logger type definitions + class obje ...

The search for a supporting object '[object Object]' of type 'object' was unsuccessful. NgFor is limited to binding to Iterables like Arrays

import { HttpClient } from '@angular/common/http'; import { Component, OnInit} from '@angular/core'; import { AnyArray } from 'mongoose'; import { DataService } from '../../services/data.service'; @Component({ ...

Detecting hidden child divs due to overflow: hidden in Angular6

Below is the particular issue I am aiming to address. <div class="row" style="overflow:hidden;"> <app-car *ngFor="let car of cars; trackBy: trackByFunction" [car]="car" > </app-car> </div> <button> ...

Expanding the typings for an established component in DefinitelyTyped

Is there a way to define new typings for additional props in DefinitelyTyped? After updating the material-ui library with some new props for the SelectField component, I realized that the typings in DefinitelyTyped are outdated. Is it possible to extend th ...

How to dynamically set options in Angular 4 by value

I have 2 option sets (picklists) and I want to populate one based on the selection from the other. For example, consider the arrays in the ts file: carsArray: { id: number, name: string }[] = [ { "id": 1, "name": "Car1" }, { "id": 2, "name": "C ...

Routing in nested modules for Angular 7

I am struggling to understand how the routing works with multiple nested modules. The RouteTree seems correct to me, but I am facing an issue after navigating to the "ContactPage" where the URL changes but the view does not render. Below is a snippet of m ...

Is it possible to utilize instanceof to verify whether a certain variable is of a class constructor type in TypeScript?

I am currently facing an issue with a function that takes a constructor as a parameter and creates an instance based on that constructor. When attempting to check the type of the constructor, I encountered an error. Below are some snippets of code that I ...

Why does TypeScript require a generic type parameter when arguments have already been provided?

When I attempted to use the argument p to infer type P, TypeScript still prompted me to provide type P. Why is that? const numberStringConverter = <T extends string | number,P extends {x: any}>(p: P): T => { if(typeof p.x === 'string') ...

Top method for retrieving the most recent artifact version from Azure Artifacts within Azure Pipelines

I am in the process of uploading a Universal package to Azure Artifacts through an Azure Pipeline. My goal is to embed the patched version number in the source of the artifact for display purposes. What is the best way to achieve this? The project in que ...

Removing the dividing line between columns in an Antd table: A simple step-by-step guide

Do you notice the lines dividing each table column heading in the image? I want to get rid of these lines from the table. The table component I am using is Antd table. https://ant.design/components/table#examples https://i.stack.imgur.com/Npx5G.png ...

Retrieve the value of the second child element in a table cell when clicking on it with Javascript

I have created a table with one row that includes the title of the month and a cell containing an inner table with multiple rows and cells. I want to display the content of the second cell in the second table as a modal box or alert dialog when it is click ...