Skip to content

Commit c74b8ba

Browse files
LukasBollLukasBoll
authored
angular-material: Improve responsiveness of table renderer
This commit resolves issues where the table renderer extended beyond the width of its parent element. Now, when the table renderer takes up more space than permitted by JsonForms's size, a scroll bar is shown. Thereby, the table actions (sort, remove) are sticky at the right end of each row. Fixes #2309
1 parent bb7a255 commit c74b8ba

File tree

1 file changed

+91
-79
lines changed

1 file changed

+91
-79
lines changed

‎packages/angular-material/src/library/other/table.renderer.ts

Lines changed: 91 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -51,91 +51,103 @@ import {
5151
@Component({
5252
selector: 'TableRenderer',
5353
template: `
54-
<table
55-
mat-table
56-
[dataSource]="data"
57-
class="mat-elevation-z8"
58-
[trackBy]="trackElement"
59-
>
60-
<ng-container matColumnDef="action">
61-
<tr>
62-
<th mat-header-cell *matHeaderCellDef>
63-
<button
64-
mat-button
65-
color="primary"
66-
(click)="add()"
67-
[disabled]="!isEnabled()"
68-
[matTooltip]="translations.addTooltip"
69-
>
70-
<mat-icon>add</mat-icon>
71-
</button>
72-
</th>
73-
</tr>
74-
<tr>
75-
<td
76-
mat-cell
77-
*matCellDef="
78-
let row;
79-
let i = index;
80-
let first = first;
81-
let last = last
82-
"
83-
>
84-
<button
85-
*ngIf="uischema?.options?.showSortButtons"
86-
class="item-up"
87-
mat-button
88-
[disabled]="first"
89-
(click)="up(i)"
90-
[matTooltip]="translations.upAriaLabel"
91-
matTooltipPosition="right"
92-
>
93-
<mat-icon>arrow_upward</mat-icon>
94-
</button>
95-
<button
96-
*ngIf="uischema?.options?.showSortButtons"
97-
class="item-down"
98-
mat-button
99-
[disabled]="last"
100-
(click)="down(i)"
101-
[matTooltip]="translations.downAriaLabel"
102-
matTooltipPosition="right"
54+
<div class="table-container">
55+
<table
56+
mat-table
57+
[dataSource]="data"
58+
class="mat-elevation-z8"
59+
[trackBy]="trackElement"
60+
>
61+
<ng-container matColumnDef="action" stickyEnd>
62+
<tr>
63+
<th
64+
mat-header-cell
65+
*matHeaderCellDef
66+
[ngClass]="{ 'sort-column': uischema?.options?.showSortButtons }"
10367
>
104-
<mat-icon>arrow_downward</mat-icon>
105-
</button>
106-
<button
107-
mat-button
108-
color="warn"
109-
(click)="remove(i)"
110-
[disabled]="!isEnabled()"
111-
matTooltipPosition="right"
112-
[matTooltip]="translations.removeTooltip"
68+
<button
69+
mat-button
70+
color="primary"
71+
(click)="add()"
72+
[disabled]="!isEnabled()"
73+
[matTooltip]="translations.addTooltip"
74+
>
75+
<mat-icon>add</mat-icon>
76+
</button>
77+
</th>
78+
</tr>
79+
<tr>
80+
<td
81+
[ngClass]="{ 'sort-column': uischema?.options?.showSortButtons }"
82+
mat-cell
83+
*matCellDef="
84+
let row;
85+
let i = index;
86+
let first = first;
87+
let last = last
88+
"
11389
>
114-
<mat-icon>delete</mat-icon>
115-
</button>
116-
</td>
117-
</tr>
90+
<button
91+
*ngIf="uischema?.options?.showSortButtons"
92+
class="item-up"
93+
mat-icon-button
94+
[disabled]="first"
95+
(click)="up(i)"
96+
[matTooltip]="translations.upAriaLabel"
97+
matTooltipPosition="right"
98+
>
99+
<mat-icon>arrow_upward</mat-icon>
100+
</button>
101+
<button
102+
*ngIf="uischema?.options?.showSortButtons"
103+
class="item-down"
104+
mat-icon-button
105+
[disabled]="last"
106+
(click)="down(i)"
107+
[matTooltip]="translations.downAriaLabel"
108+
matTooltipPosition="right"
109+
>
110+
<mat-icon>arrow_downward</mat-icon>
111+
</button>
112+
<button
113+
mat-icon-button
114+
color="warn"
115+
(click)="remove(i)"
116+
[disabled]="!isEnabled()"
117+
matTooltipPosition="right"
118+
[matTooltip]="translations.removeTooltip"
119+
>
120+
<mat-icon>delete</mat-icon>
121+
</button>
122+
</td>
123+
</tr>
118124
119-
<tr></tr
120-
></ng-container>
125+
<tr></tr
126+
></ng-container>
121127
122-
<ng-container
123-
*ngFor="let item of items"
124-
matColumnDef="{{ item.property }}"
125-
>
126-
<th mat-header-cell *matHeaderCellDef>{{ item.header }}</th>
127-
<td mat-cell *matCellDef="let index = index">
128-
<jsonforms-outlet
129-
[renderProps]="index | getProps : item.props"
130-
></jsonforms-outlet>
131-
</td>
132-
</ng-container>
128+
<ng-container
129+
*ngFor="let item of items"
130+
matColumnDef="{{ item.property }}"
131+
>
132+
<th mat-header-cell *matHeaderCellDef>{{ item.header }}</th>
133+
<td mat-cell *matCellDef="let index = index">
134+
<jsonforms-outlet
135+
[renderProps]="index | getProps : item.props"
136+
></jsonforms-outlet>
137+
</td>
138+
</ng-container>
133139
134-
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
135-
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
136-
</table>
140+
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
141+
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
142+
</table>
143+
</div>
137144
`,
138-
styles: ['table {width: 100%;}', '.cdk-column-action { width: 15%}'],
145+
styles: [
146+
'table {width: 100%;}',
147+
'.cdk-column-action { width: 15%;}',
148+
'.sort-column { min-width: 12vw;}',
149+
'.table-container {max-width: 100%; overflow: auto;}',
150+
],
139151
})
140152
export class TableRenderer extends JsonFormsArrayControl implements OnInit {
141153
detailUiSchema: UISchemaElement;

0 commit comments

Comments
 (0)