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
eclipsesource · Apr 9, 2024 · c74b8ba · c74b8ba
1 parent bb7a255
commit c74b8ba
Showing 1 changed file with 91 additions and 79 deletions.
diff --git a/packages/angular-material/src/library/other/table.renderer.ts b/packages/angular-material/src/library/other/table.renderer.ts
@@ -51,91 +51,103 @@ import {
 @Component({
   selector: 'TableRenderer',
   template: `
-    <table
-      mat-table
-      [dataSource]="data"
-      class="mat-elevation-z8"
-      [trackBy]="trackElement"
-    >
-      <ng-container matColumnDef="action">
-        <tr>
-          <th mat-header-cell *matHeaderCellDef>
-            <button
-              mat-button
-              color="primary"
-              (click)="add()"
-              [disabled]="!isEnabled()"
-              [matTooltip]="translations.addTooltip"
-            >
-              <mat-icon>add</mat-icon>
-            </button>
-          </th>
-        </tr>
-        <tr>
-          <td
-            mat-cell
-            *matCellDef="
-              let row;
-              let i = index;
-              let first = first;
-              let last = last
-            "
-          >
-            <button
-              *ngIf="uischema?.options?.showSortButtons"
-              class="item-up"
-              mat-button
-              [disabled]="first"
-              (click)="up(i)"
-              [matTooltip]="translations.upAriaLabel"
-              matTooltipPosition="right"
-            >
-              <mat-icon>arrow_upward</mat-icon>
-            </button>
-            <button
-              *ngIf="uischema?.options?.showSortButtons"
-              class="item-down"
-              mat-button
-              [disabled]="last"
-              (click)="down(i)"
-              [matTooltip]="translations.downAriaLabel"
-              matTooltipPosition="right"
+    <div class="table-container">
+      <table
+        mat-table
+        [dataSource]="data"
+        class="mat-elevation-z8"
+        [trackBy]="trackElement"
+      >
+        <ng-container matColumnDef="action" stickyEnd>
+          <tr>
+            <th
+              mat-header-cell
+              *matHeaderCellDef
+              [ngClass]="{ 'sort-column': uischema?.options?.showSortButtons }"
             >
-              <mat-icon>arrow_downward</mat-icon>
-            </button>
-            <button
-              mat-button
-              color="warn"
-              (click)="remove(i)"
-              [disabled]="!isEnabled()"
-              matTooltipPosition="right"
-              [matTooltip]="translations.removeTooltip"
+              <button
+                mat-button
+                color="primary"
+                (click)="add()"
+                [disabled]="!isEnabled()"
+                [matTooltip]="translations.addTooltip"
+              >
+                <mat-icon>add</mat-icon>
+              </button>
+            </th>
+          </tr>
+          <tr>
+            <td
+              [ngClass]="{ 'sort-column': uischema?.options?.showSortButtons }"
+              mat-cell
+              *matCellDef="
+                let row;
+                let i = index;
+                let first = first;
+                let last = last
+              "
             >
-              <mat-icon>delete</mat-icon>
-            </button>
-          </td>
-        </tr>
+              <button
+                *ngIf="uischema?.options?.showSortButtons"
+                class="item-up"
+                mat-icon-button
+                [disabled]="first"
+                (click)="up(i)"
+                [matTooltip]="translations.upAriaLabel"
+                matTooltipPosition="right"
+              >
+                <mat-icon>arrow_upward</mat-icon>
+              </button>
+              <button
+                *ngIf="uischema?.options?.showSortButtons"
+                class="item-down"
+                mat-icon-button
+                [disabled]="last"
+                (click)="down(i)"
+                [matTooltip]="translations.downAriaLabel"
+                matTooltipPosition="right"
+              >
+                <mat-icon>arrow_downward</mat-icon>
+              </button>
+              <button
+                mat-icon-button
+                color="warn"
+                (click)="remove(i)"
+                [disabled]="!isEnabled()"
+                matTooltipPosition="right"
+                [matTooltip]="translations.removeTooltip"
+              >
+                <mat-icon>delete</mat-icon>
+              </button>
+            </td>
+          </tr>
 
-        <tr></tr
-      ></ng-container>
+          <tr></tr
+        ></ng-container>
 
-      <ng-container
-        *ngFor="let item of items"
-        matColumnDef="{{ item.property }}"
-      >
-        <th mat-header-cell *matHeaderCellDef>{{ item.header }}</th>
-        <td mat-cell *matCellDef="let index = index">
-          <jsonforms-outlet
-            [renderProps]="index | getProps : item.props"
-          ></jsonforms-outlet>
-        </td>
-      </ng-container>
+        <ng-container
+          *ngFor="let item of items"
+          matColumnDef="{{ item.property }}"
+        >
+          <th mat-header-cell *matHeaderCellDef>{{ item.header }}</th>
+          <td mat-cell *matCellDef="let index = index">
+            <jsonforms-outlet
+              [renderProps]="index | getProps : item.props"
+            ></jsonforms-outlet>
+          </td>
+        </ng-container>
 
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-    </table>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+      </table>
+    </div>
   `,
-  styles: ['table {width: 100%;}', '.cdk-column-action { width: 15%}'],
+  styles: [
+    'table {width: 100%;}',
+    '.cdk-column-action { width: 15%;}',
+    '.sort-column { min-width: 12vw;}',
+    '.table-container {max-width: 100%; overflow: auto;}',
+  ],
 })
 export class TableRenderer extends JsonFormsArrayControl implements OnInit {
   detailUiSchema: UISchemaElement;