From c74b8ba5434319920871357b8b58ada281ac117c Mon Sep 17 00:00:00 2001 From: LukasBoll Date: Tue, 9 Apr 2024 17:39:04 +0200 Subject: [PATCH] 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 --- .../src/library/other/table.renderer.ts | 170 ++++++++++-------- 1 file changed, 91 insertions(+), 79 deletions(-) diff --git a/packages/angular-material/src/library/other/table.renderer.ts b/packages/angular-material/src/library/other/table.renderer.ts index 0e3589c6b..5f38a9f6a 100644 --- 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: ` - - - - - - - + +
- -
- -
+ `, - 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;