fix: performance improvements for Angular Material Table

fixes #2242
eclipsesource · Mar 25, 2024 · 63c63cb · 63c63cb
1 parent 3e9ba1f
commit 63c63cb
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git a/packages/angular-material/src/library/module.ts b/packages/angular-material/src/library/module.ts
@@ -57,7 +57,7 @@ import { LabelRenderer } from './other/label.renderer';
 import { JsonFormsDetailComponent } from './other/master-detail/detail';
 import { MasterListComponent } from './other/master-detail/master';
 import { ObjectControlRenderer } from './other/object.renderer';
-import { TableRenderer } from './other/table.renderer';
+import { TableRenderer, GetProps } from './other/table.renderer';
 import { CategorizationTabLayoutRenderer } from './layouts/categorization-layout.renderer';
 import { GroupLayoutRenderer } from './layouts/group-layout.renderer';
 import { HorizontalLayoutRenderer } from './layouts/horizontal-layout.renderer';
@@ -110,6 +110,7 @@ import { LayoutChildrenRenderPropsPipe } from './layouts';
     TableRenderer,
     ArrayLayoutRenderer,
     LayoutChildrenRenderPropsPipe,
+    GetProps,
   ],
   exports: [
     CommonModule,

diff --git a/packages/angular-material/src/library/other/table.renderer.ts b/packages/angular-material/src/library/other/table.renderer.ts
@@ -23,7 +23,7 @@
   THE SOFTWARE.
 */
 import startCase from 'lodash/startCase';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Pipe, PipeTransform } from '@angular/core';
 import {
   JsonFormsAngularService,
   JsonFormsArrayControl,
@@ -126,7 +126,7 @@ import {
         <th mat-header-cell *matHeaderCellDef>{{ item.header }}</th>
         <td mat-cell *matCellDef="let index = index">
           <jsonforms-outlet
-            [renderProps]="getProps(index, item.props)"
+            [renderProps]="index | getProps : item.props"
           ></jsonforms-outlet>
         </td>
       </ng-container>
@@ -162,14 +162,6 @@ export class TableRenderer extends JsonFormsArrayControl implements OnInit {
     }
     this.translations = props.translations;
   }
-  getProps(index: number, props: OwnPropsOfRenderer): OwnPropsOfRenderer {
-    const rowPath = Paths.compose(props.path, `${index}`);
-    return {
-      schema: props.schema,
-      uischema: props.uischema,
-      path: rowPath,
-    };
-  }
 
   remove(index: number): void {
     this.removeItems(this.propsPath, [index])();
@@ -265,3 +257,15 @@ export const controlWithoutLabel = (scope: string): ControlElement => ({
   scope: scope,
   label: false,
 });
+
+@Pipe({ name: 'getProps' })
+export class GetProps implements PipeTransform {
+  transform(index: number, props: OwnPropsOfRenderer) {
+    const rowPath = Paths.compose(props.path, `${index}`);
+    return {
+      schema: props.schema,
+      uischema: props.uischema,
+      path: rowPath,
+    };
+  }
+}
diff --git a/packages/angular-material/test/table-control.spec.ts b/packages/angular-material/test/table-control.spec.ts
@@ -35,6 +35,7 @@ import { JsonFormsAngularService, JsonFormsModule } from '@jsonforms/angular';
 import { ControlElement } from '@jsonforms/core';
 import { TextControlRenderer, TextControlRendererTester } from '../src';
 import {
+  GetProps,
   TableRenderer,
   TableRendererTester,
 } from '../src/library/other/table.renderer';
@@ -139,7 +140,7 @@ describe('Table', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [TableRenderer, TextControlRenderer],
+      declarations: [TableRenderer, TextControlRenderer, GetProps],
       imports: [
         CommonModule,
         JsonFormsModule,