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