Issue
So I have a sticky table but I only need the box shadow on the second column which is Requestor Name on the right side , I want to remove that shadow I put arrow on the screenshow below because both first and second column are sticky and also the last column is sticky but it looks bad then the Requestor Name column has both boxshadow on left and right.
How do we do that ? Thanks.
#html code
<table
mat-table
[dataSource]="dataSource"
matMultiSort
(matSortChange)="requestsListTable.onSortEvent()" >
<ng-container matColumnDef="requestTitle" sticky>
<th mat-multi-sort-header="requestTitle" mat-header-cell *matHeaderCellDef>Request Title</th>
<td mat-cell *matCellDef="let element">
<div class="checkbox-container td-value-name">
<mat-checkbox [checked]="selectedWorkFlowIds.includes(element.workflowApprovalId)" [disabled]="!isAllowedBulkUpdate(element)" class="no-navigation" color="primary" (change)="onChangeSelect(element, $event, 'request')"></mat-checkbox>
<div [matTooltip]="element.requestTitle" class="td-value-name">{{ element.requestTitle?.length > 45 ? element.requestTitle.slice(0,45) + '...' : element.requestTitle }}</div>
</div>
</td>
</ng-container>
<ng-container matColumnDef="requestorName">
<th mat-multi-sort-header="requestorName" mat-header-cell *matHeaderCellDef>Requestor Name</th>
<td mat-cell *matCellDef="let element">
<div class="td-value-name">
{{element.requestorName}}
</div>
</td>
</ng-container>
<ng-container matColumnDef="requestTypeName">
<th mat-multi-sort-header="requestTypeName" mat-header-cell *matHeaderCellDef>Request Type</th>
<td mat-cell *matCellDef="let element" >
<div class="td-value-name">
{{element.requestTypeName }}
</div>
</td>
</ng-container>
<ng-container matColumnDef="department">
<th mat-multi-sort-header="department" mat-header-cell *matHeaderCellDef>Department</th>
<td mat-cell *matCellDef="let element" >
<div class="td-value-name">
{{element.departmentName}}
</div>
</td>
</ng-container>
<ng-container matColumnDef="requestorPriority">
<th mat-multi-sort-header="requestorPriority" mat-header-cell *matHeaderCellDef>Requestor Priority</th>
<td mat-cell *matCellDef="let element" >
<div class="td-value-name">
{{element.requestorPriorityString}}
</div>
</td>
</ng-container>
<ng-container matColumnDef="projectTeamPriority">
<th mat-multi-sort-header="projectTeamPriority" mat-header-cell *matHeaderCellDef>Project Team Data</th>
<td mat-cell *matCellDef="let element">
<div class="td-value-name">
{{element.projectTeamPriority}}
</div>
</td>
</ng-container>
<ng-container matColumnDef="requestDate">
<th mat-multi-sort-header="requestDate" mat-header-cell *matHeaderCellDef>Request Date</th>
<td mat-cell *matCellDef="let element">
<div class="td-value-name">
{{element.requestDate | date : 'MM/dd/yyyy'}}
</div>
</td>
</ng-container>
<ng-container matColumnDef="targetCompletionDate">
<th mat-multi-sort-header="targetCompletionDate" mat-header-cell *matHeaderCellDef>Target Completion Date</th>
<td mat-cell *matCellDef="let element">
<div class="td-value-name">
{{element.targetCompletionDate | date : 'MM/dd/yyyy'}}
</div>
</td>
</ng-container>
<ng-container matColumnDef="currentStepName">
<th mat-multi-sort-header="currentStepName" mat-header-cell *matHeaderCellDef>Current Step Name</th>
<td mat-cell *matCellDef="let element" class="align-icon-and-value">
<div class="td-value-name current-step-container">
<button mat-button (click)="onViewWorkflow($event, element)">
<mat-icon style="padding-right: 10px;">remove_red_eye</mat-icon> {{element.currentStepName}}
</button>
</div>
</td>
</ng-container>
<ng-container matColumnDef="currentApprover">
<th mat-multi-sort-header="currentApprover" mat-header-cell *matHeaderCellDef>Current Approver</th>
<td mat-cell *matCellDef="let element">
<div class="td-value-name" [matTooltip]="element.currentApproverName">
{{ element.currentApproverName?.length > 45 ? element.currentApproverName.slice(0,45) + '...' : element.currentApproverName }}
</div>
</td>
</ng-container>
<ng-container matColumnDef="lastStepCompleted">
<th mat-multi-sort-header="lastStepCompleted" mat-header-cell *matHeaderCellDef>
Last Step Completed
</th>
<td mat-cell *matCellDef="let element">
<div class="td-value-name">
{{ element.lastStepCompleted }}
</div>
</td>
</ng-container>
<ng-container matColumnDef="onHold">
<th mat-header-cell *matHeaderCellDef class="text-center">On Hold</th>
<td mat-cell *matCellDef="let element">
<div class="text-center">
<!-- <mat-icon class="dragCursor" (mousedown)="dragDisabled = false;"
style="color: rgb(146, 146, 146)">drag_indicator</mat-icon> -->
<mat-checkbox [disabled]="!isProjectTeamData" class="no-navigation" color="primary"(change)="onChangeSelect(element, $event, 'OnHold')"
[checked]="element.isOnHold"></mat-checkbox>
</div>
</td>
</ng-container>
<ng-container matColumnDef="status">
<th mat-multi-sort-header="status" mat-header-cell *matHeaderCellDef>Status</th>
<td mat-cell *matCellDef="let element">
<div>
{{ element.statusDisplayString }}
</div>
</td>
</ng-container>
<ng-container matColumnDef="actions" stickyEnd >
<th mat-header-cell *matHeaderCellDef class="text-center">Actions</th>
<td mat-cell *matCellDef="let element" class="text-center">
<div class="action-value-name">
<div style="display: flex">
<div (click)="approve($event,element)" *ngIf="element.approveButton && isActionAllowed(element)" class="action-item with-divider text-center">
<mat-icon style="color: #65B741;">check</mat-icon>{{element.approveButton}}
</div>
<div (click)="reject($event,element)" *ngIf="element.rejectButton && isActionAllowed(element)" class="action-item">
<mat-icon style="color: #DF2E38;">close</mat-icon>{{element.rejectButton}}
</div>
</div>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsTableLeft"></tr>
<tr mat-row (click)="viewDetails($event, row)" *matRowDef="let row; columns: displayedColumnsTableLeft"></tr>
</table>
#css snippet
.text-center {
text-align: center
}
.cursor-pointer {
cursor: pointer;
}
.sort-button {
margin-left: 10px;
}
.search-approval {
width: 300px;
margin-right: 10px;
margin-top: -2px;
}
.center-message {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.no-record {
margin-top: -60px;
font-size: 12px;
}
.checkbox-container {
display: flex;
align-items: center;
}
.mat-checkbox {
margin-right: 10px;
/* Adjust the margin as needed */
}
/* .mat-column-requestorName {
position: sticky;
left: 200px;
z-index: 1;
background-color: inherit;
} */
/*
.mat-table-sticky-border-elem-right {
border-left: 1px solid #e0e0e0;
}
.mat-table-sticky-border-elem-left {
border-right: 1px solid #e0e0e0;
}
th.mat-column-actions,
td.mat-column-actions {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
th.mat-column-requestTypeName,
td.mat-column-requestTypeName {
padding-left: 12px;
}
th.mat-column-requestTitle,
td.mat-column-requestTitle {
padding-right: 12px;
}
th.mat-column-requestorName,
td.mat-column-requestorName {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
*/
th.mat-column-actions,
td.mat-column-actions {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.mat-column-requestorName {
position: sticky;
left: 200px;
z-index: 1;
background-color: inherit;
/* border-right: 1px solid #e0e0e0; */
}
.mat-column-requestTitle {
background-color: inherit;
/* border-right: 1px solid #e0e0e0; */
}
th.mat-column-requestorName,
td.mat-column-requestorName {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
th.mat-column-requestTypeName,
td.mat-column-requestTypeName {
padding-left: 12px;
}
Solution
Please go through the CSS, we need to specify upto which index you need to shadow to be displayed, that will help you understand how it works, we use nth-child(2)
to select the second child th
or td
, and we can use :last-child
to select the last th
or td
, this will enable the shadows!
.shaded-table thead tr > th:nth-child(2) {
box-shadow: 2px 0px 3px #aaaaaa;
}
.shaded-table tbody tr > td:nth-child(2) {
box-shadow: 2px 0px 3px #aaaaaa;
}
.shaded-table thead tr > th:last-child {
box-shadow: -2px 0px 3px #aaa;
}
.shaded-table tbody tr > td:last-child {
box-shadow: -2px 0px 3px #aaa;
}
Answered By - Naren Murali
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.