Skip to content

Commit 155a15d

Browse files
veenoiseveenoise
committed
feat: responsive table in /mapping
1 parent 39a85d2 commit 155a15d

2 files changed

Lines changed: 54 additions & 51 deletions

File tree

‎src/app/pages/mapping/mapping.component.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,9 @@
2121
min-width: 140px;
2222
}
2323

24-
.matrix-table {
24+
.mat-table-container {
2525
margin: 20px;
26+
overflow-x: auto;
2627
}
2728

2829
.mat-cell, .mat-header-cell {

‎src/app/pages/mapping/mapping.component.html‎

Lines changed: 52 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -31,62 +31,64 @@
3131
</button>
3232
</div>
3333

34-
<table mat-table matSort [dataSource]="dataSource" class="mat-elevation-z8 matrix-table">
35-
<ng-container matColumnDef="dimension">
36-
<th mat-header-cell mat-sort-header *matHeaderCellDef>Dimension</th>
37-
<td mat-cell *matCellDef="let element">{{ element.dimension }}</td>
38-
</ng-container>
34+
<div class="mat-table-container">
35+
<table mat-table matSort [dataSource]="dataSource" class="mat-elevation-z8">
36+
<ng-container matColumnDef="dimension">
37+
<th mat-header-cell mat-sort-header *matHeaderCellDef>Dimension</th>
38+
<td mat-cell *matCellDef="let element">{{ element.dimension }}</td>
39+
</ng-container>
3940

40-
<ng-container matColumnDef="subDimension">
41-
<th mat-header-cell mat-sort-header *matHeaderCellDef>Sub-Dimension</th>
42-
<td mat-cell *matCellDef="let element">{{ element.subDimension }}</td>
43-
</ng-container>
41+
<ng-container matColumnDef="subDimension">
42+
<th mat-header-cell mat-sort-header *matHeaderCellDef>Sub-Dimension</th>
43+
<td mat-cell *matCellDef="let element">{{ element.subDimension }}</td>
44+
</ng-container>
4445

45-
<ng-container matColumnDef="activityName">
46-
<th mat-header-cell mat-sort-header *matHeaderCellDef>Activity</th>
47-
<td mat-cell *matCellDef="let element">
48-
<a [routerLink]="['/activity-description']" [queryParams]="{ uuid: element.uuid }">
49-
{{ element.activityName }}
50-
</a>
51-
</td>
52-
</ng-container>
46+
<ng-container matColumnDef="activityName">
47+
<th mat-header-cell mat-sort-header *matHeaderCellDef>Activity</th>
48+
<td mat-cell *matCellDef="let element">
49+
<a [routerLink]="['/activity-description']" [queryParams]="{ uuid: element.uuid }">
50+
{{ element.activityName }}
51+
</a>
52+
</td>
53+
</ng-container>
5354

54-
<ng-container matColumnDef="samm2">
55-
<th mat-header-cell mat-sort-header *matHeaderCellDef>SAMM</th>
56-
<td mat-cell *matCellDef="let element">
57-
<ng-container *ngIf="element.samm2">
58-
<ul>
59-
<li *ngFor="let sammElement of element.samm2">{{ sammElement }}</li>
60-
</ul>
61-
</ng-container>
62-
</td>
63-
</ng-container>
55+
<ng-container matColumnDef="samm2">
56+
<th mat-header-cell mat-sort-header *matHeaderCellDef>SAMM</th>
57+
<td mat-cell *matCellDef="let element">
58+
<ng-container *ngIf="element.samm2">
59+
<ul>
60+
<li *ngFor="let sammElement of element.samm2">{{ sammElement }}</li>
61+
</ul>
62+
</ng-container>
63+
</td>
64+
</ng-container>
6465

65-
<ng-container matColumnDef="ISO17">
66-
<th mat-header-cell mat-sort-header *matHeaderCellDef>ISO 27001:2017</th>
67-
<td mat-cell *matCellDef="let element">
68-
<ng-container *ngIf="element.ISO17">
69-
<ul>
70-
<li *ngFor="let ISOElement of element.ISO17">{{ ISOElement }}</li>
71-
</ul>
72-
</ng-container>
73-
</td>
74-
</ng-container>
66+
<ng-container matColumnDef="ISO17">
67+
<th mat-header-cell mat-sort-header *matHeaderCellDef>ISO 27001:2017</th>
68+
<td mat-cell *matCellDef="let element">
69+
<ng-container *ngIf="element.ISO17">
70+
<ul>
71+
<li *ngFor="let ISOElement of element.ISO17">{{ ISOElement }}</li>
72+
</ul>
73+
</ng-container>
74+
</td>
75+
</ng-container>
7576

76-
<ng-container matColumnDef="ISO22">
77-
<th mat-header-cell mat-sort-header *matHeaderCellDef>ISO 27001:2022</th>
78-
<td mat-cell *matCellDef="let element">
79-
<ng-container *ngIf="element.ISO22">
80-
<ul>
81-
<li *ngFor="let ISO22Element of element.ISO22">{{ ISO22Element }}</li>
82-
</ul>
83-
</ng-container>
84-
</td>
85-
</ng-container>
77+
<ng-container matColumnDef="ISO22">
78+
<th mat-header-cell mat-sort-header *matHeaderCellDef>ISO 27001:2022</th>
79+
<td mat-cell *matCellDef="let element">
80+
<ng-container *ngIf="element.ISO22">
81+
<ul>
82+
<li *ngFor="let ISO22Element of element.ISO22">{{ ISO22Element }}</li>
83+
</ul>
84+
</ng-container>
85+
</td>
86+
</ng-container>
8687

87-
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
88-
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
89-
</table>
88+
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
89+
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
90+
</table>
91+
</div>
9092

9193
<!-- Excel export table remains as is for now -->
9294
<table id="excel-table" class="hide">

0 commit comments

Comments
 (0)