My current setup involves using an Angular data table to display data. I recently added the mat-sort-header functionality, which allowed me to change the font color of the header text. Below is a breakdown of my code:
<section id="main-content">
<section class="wrapper upload-data-templates">
<div class="row">
<div class="form-group has-search" style="padding-top: 38px;margin-left: 15px;">
<span class="fa fa-search form-control-feedback" style="margin-top: 13px;"></span>
<input type="text" class="form-control" (keyup)="applyFilter($event.target.value)" placeholder="Search By Report Name" style="height: 46px;width: 180%;">
</div>
<div class="col-sm-12" style="padding-top: 30px;">
<table mat-table matSort [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="download">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Download </th>
<td mat-cell *matCellDef="let element">
<a href="https://www.w3schools.com">Log</a> |
<a href="https://www.w3schools.com">Data report</a> |
<a href="https://www.w3schools.com">HTML report</a>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]"
showFirstLastButtons
aria-label="Select page of periodic elements">
</mat-paginator>
</div>
</div>
</section>
</section>
The following CSS styles are being applied:
.section {
width: 100%;
float: left;
border-bottom: 1px solid #eee;
}
/* More CSS Code Here */
.mat-header-row {
background: #005173;
color: white;
}
The resulting table can be seen in the image below:
https://i.sstatic.net/n0CwB.png
I am currently facing an issue where the header text is not visible, and I have tried adding
.mat-header-row { background: #005173; color: white;}mat-sort-header is present. My goal is to make both the header text and sort arrow key appear in white. Any experts able to assist with resolving this problem?