WEB-580 scroll bar (#3001)

This commit is contained in:
Soni Jay
2026-01-16 11:39:21 -06:00
committed by GitHub
parent 7beb08579d
commit 094fd5f1e9
2 changed files with 33 additions and 26 deletions
@@ -42,33 +42,35 @@
<mat-card class="data-table-card m-t-10">
<mat-card-content>
<table #dataTable mat-table [dataSource]="datatableData" class="mat-elevation-z2 m-b-25">
@for (datatableColumn of datatableColumns; track datatableColumn; let i = $index) {
<ng-container [matColumnDef]="datatableColumn">
@if (i === 0) {
<th mat-header-cell *matHeaderCellDef class="checkbox-column"></th>
<td mat-cell *matCellDef="let data">
<mat-checkbox
class="center"
(click)="$event.stopPropagation()"
(change)="$event ? itemToggle(data) : null"
[checked]="selection.isSelected(data)"
>
</mat-checkbox>
</td>
}
@if (i > 0) {
<th mat-header-cell class="right" *matHeaderCellDef>{{ getInputName(datatableColumn) }}</th>
<td mat-cell class="right" *matCellDef="let data" [ngClass]="isToDelete(data)">
{{ formatValue(data, datatableColumn) }}
</td>
}
</ng-container>
}
<div class="table-scroll-wrapper">
<table #dataTable mat-table [dataSource]="datatableData" class="mat-elevation-z2 m-b-25">
@for (datatableColumn of datatableColumns; track datatableColumn; let i = $index) {
<ng-container [matColumnDef]="datatableColumn">
@if (i === 0) {
<th mat-header-cell *matHeaderCellDef class="checkbox-column"></th>
<td mat-cell *matCellDef="let data">
<mat-checkbox
class="center"
(click)="$event.stopPropagation()"
(change)="$event ? itemToggle(data) : null"
[checked]="selection.isSelected(data)"
>
</mat-checkbox>
</td>
}
@if (i > 0) {
<th mat-header-cell class="right" *matHeaderCellDef>{{ getInputName(datatableColumn) }}</th>
<td mat-cell class="right" *matCellDef="let data" [ngClass]="isToDelete(data)">
{{ formatValue(data, datatableColumn) }}
</td>
}
</ng-container>
}
<tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>
<tr mat-row *matRowDef="let row; columns: datatableColumns" class="data-row"></tr>
</table>
<tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>
<tr mat-row *matRowDef="let row; columns: datatableColumns" class="data-row"></tr>
</table>
</div>
</mat-card-content>
</mat-card>
</div>
@@ -23,6 +23,11 @@
.mat-card-content {
padding: 0;
.table-scroll-wrapper {
overflow-x: auto;
width: 100%;
}
}
}