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 class="data-table-card m-t-10">
<mat-card-content> <mat-card-content>
<table #dataTable mat-table [dataSource]="datatableData" class="mat-elevation-z2 m-b-25"> <div class="table-scroll-wrapper">
@for (datatableColumn of datatableColumns; track datatableColumn; let i = $index) { <table #dataTable mat-table [dataSource]="datatableData" class="mat-elevation-z2 m-b-25">
<ng-container [matColumnDef]="datatableColumn"> @for (datatableColumn of datatableColumns; track datatableColumn; let i = $index) {
@if (i === 0) { <ng-container [matColumnDef]="datatableColumn">
<th mat-header-cell *matHeaderCellDef class="checkbox-column"></th> @if (i === 0) {
<td mat-cell *matCellDef="let data"> <th mat-header-cell *matHeaderCellDef class="checkbox-column"></th>
<mat-checkbox <td mat-cell *matCellDef="let data">
class="center" <mat-checkbox
(click)="$event.stopPropagation()" class="center"
(change)="$event ? itemToggle(data) : null" (click)="$event.stopPropagation()"
[checked]="selection.isSelected(data)" (change)="$event ? itemToggle(data) : null"
> [checked]="selection.isSelected(data)"
</mat-checkbox> >
</td> </mat-checkbox>
} </td>
@if (i > 0) { }
<th mat-header-cell class="right" *matHeaderCellDef>{{ getInputName(datatableColumn) }}</th> @if (i > 0) {
<td mat-cell class="right" *matCellDef="let data" [ngClass]="isToDelete(data)"> <th mat-header-cell class="right" *matHeaderCellDef>{{ getInputName(datatableColumn) }}</th>
{{ formatValue(data, datatableColumn) }} <td mat-cell class="right" *matCellDef="let data" [ngClass]="isToDelete(data)">
</td> {{ formatValue(data, datatableColumn) }}
} </td>
</ng-container> }
} </ng-container>
}
<tr mat-header-row *matHeaderRowDef="datatableColumns"></tr> <tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>
<tr mat-row *matRowDef="let row; columns: datatableColumns" class="data-row"></tr> <tr mat-row *matRowDef="let row; columns: datatableColumns" class="data-row"></tr>
</table> </table>
</div>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
</div> </div>
@@ -23,6 +23,11 @@
.mat-card-content { .mat-card-content {
padding: 0; padding: 0;
.table-scroll-wrapper {
overflow-x: auto;
width: 100%;
}
} }
} }