I'm encountering an issue with the mat-table in my project. I want to incorporate squares into the cells, but I'm unsure how to achieve this.
Here is a snippet of my current code:
<div class="my_item">
<div><span class="skuska"><span class="mat-subheading-2">January</span></span></div>
<mat-table #table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="{{column.id}}" *ngFor="let column of columnNames">
<mat-header-cell *matHeaderCellDef mat-sort-header> {{column.value}} </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element[column.id]}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
I currently have a table displaying only text, but I would like to replace it with squares containing numbers instead.
Here is a visual representation of what I'm aiming for:
https://i.sstatic.net/lOUgO.png
Unfortunately, I only have a picture example and not the actual implementation in my table.
If anyone could provide guidance on how to achieve this, I would greatly appreciate it!
Thank you for your assistance!
This is the updated code snippet:
https://i.sstatic.net/SXncx.png
Html file
<div class="my_item">
<div><span class="skuska"><span class="mat-subheading-2">April</span></span></div>
<mat-table #table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="{{column.id}}" *ngFor="let column of columnNames">
<mat-header-cell *matHeaderCellDef mat-sort-header> {{column.value}} </mat-header-cell>
<mat-cell *matCellDef="let element" [style.background-color] = "element.color"> {{element[column.id]}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
.ts file
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource, MatSort } from '@angular/material';
@Component({
selector: 'app-harmonogram',
templateUrl: './harmonogram.component.html',
styleUrls: ['./harmonogram.component.css']
})
export class HarmonogramComponent implements OnInit {
dataSource;
displayedColumns = [];
@ViewChild(MatSort) sort: MatSort;
/**
* Pre-defined columns list for user table
*/
columnNames = [{
id: "po",
value: "Monday"
}, {
id: "ut",
value: "Tuesday"
}, {
id: "st",
value: "Wednesday"
}, {
id: "stv",
value: "Thursday"
}, {
id: "pi",
value: "Friday"
}, {
id: "so",
value: "Saturday"
}, {
id: "ne",
value: "Sunday"
}];
ngOnInit() {
this.displayedColumns = this.columnNames.map(x => x.id);
this.createTable();
}
createTable() {
let tableArr: Element[] =
[
{ po: '', ut: '', st: '', stv: '', pi: '', so: '', ne: '',color: 'black'},
{ po: '', ut: '', st: '', stv: '', pi: '', so: '', ne: '',color: 'green'},
{ po: '', ut: '', st: '', stv: '', pi: '', so: '', ne: '',color: 'grey'},
{ po: '', ut: '', st: '', stv: '', pi: '', so: '', ne: '',color: 'blue'},
{ po: '', ut: '', st: '', stv: '', pi: '', so: '', ne: '',color: 'green'}
];
this.dataSource = new MatTableDataSource(tableArr);
this.dataSource.sort = this.sort;
}
}
export interface Element {
po: string,
ut: string,
st: string,
stv: string,
pi: string,
so: string,
ne: string,
color: string,
}
This excerpt shows a portion of the .css file used:
.mat-cell{
height: 26px;
width: 26px;
display: inline-flex;
border-left: 4px solid white;
padding-left: 0px;
}
Currently, I am able to change the row color, but I specifically need to alter individual cells, such as those containing the value "8" (currently invisible).