13.2.0: caching of row style/classes

projects/simplemattable/README.md

@@ -752,6 +752,7 @@ You can find my email address in the [authors section](#authors).
 There will be new versions when new features are added or a new Angular version releases.
 
 History (Version in parentheses is required Angular Version):
++ 13.2: Cache row styles / classes
 + 13.1: Allow footer function to return an observable
 + 13.0: Upgrade to angular 13
 + 12.5: Option to apply specific form fields for editing and adding

projects/simplemattable/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simplemattable",
-  "version": "13.1.1",
+  "version": "13.2.0",
   "description": "A simplified, declarative table-library using @angular/material's MatTable with form capabilities for adding/editing/deleting data",
   "author": "Henning Wobken",
   "license": "MIT",

projects/simplemattable/src/lib/simplemattable/simplemattable.component.ts

@@ -218,6 +218,7 @@ export class SimplemattableComponent<T> implements OnInit, DoCheck, OnChanges, A
   @Input() deleteTooltip: string;
   @Input() cancelTooltip: string;
   @Input() saveTooltip: string;
+  @Input() disableCssCaching: boolean = false;
 
   private infiniteScrollingPage: number = 0;
   private infiniteScrollingHasMore: boolean = true;
@@ -334,6 +335,9 @@ export class SimplemattableComponent<T> implements OnInit, DoCheck, OnChanges, A
    */
   stringRepresentationMap = new Map<T, Map<TableColumn<any, any>, string>>();
 
+  rowStyleMap = new Map<T, Object>();
+  rowClassMap = new Map<T, string | string[] | Object>();
+
   constructor(
     private fb: FormBuilder,
   ) {
@@ -596,6 +600,9 @@ export class SimplemattableComponent<T> implements OnInit, DoCheck, OnChanges, A
   }
 
   getTableRowClass(row: T): string | string[] | Object {
+    if (!this.disableCssCaching && this.rowClassMap.has(row)) {
+      return this.rowClassMap.get(row);
+    }
     if (this.rowNgClass) {
       let classes = this.rowNgClass(row, this.data);
       if (this.rowClickable) {
@@ -604,9 +611,12 @@ export class SimplemattableComponent<T> implements OnInit, DoCheck, OnChanges, A
       if (this.detailRowComponent) {
         classes = this.addClass(classes, 'smt-element-row');
       }
+      this.rowClassMap.set(row, classes);
       return classes;
     } else {
-      return { 'on-click': !!this.rowClickable, 'smt-element-row': !!this.detailRowComponent };
+      const classes = { 'on-click': !!this.rowClickable, 'smt-element-row': !!this.detailRowComponent };
+      this.rowClassMap.set(row, classes);
+      return classes;
     }
   }
 
@@ -630,11 +640,12 @@ export class SimplemattableComponent<T> implements OnInit, DoCheck, OnChanges, A
   }
 
   getTableRowStyle(row: T): Object {
-    if (this.rowNgStyle) {
-      return this.rowNgStyle(row, this.data);
-    } else {
-      return {};
+    if (!this.disableCssCaching && this.rowStyleMap.has(row)) {
+      return this.rowStyleMap.get(row);
     }
+    const rowStyle = this.rowNgStyle ? this.rowNgStyle(row, this.data) : {};
+    this.rowStyleMap.set(row, rowStyle);
+    return rowStyle;
   }
 
   getTableFooterRowStyle(): Object {
@@ -900,6 +911,7 @@ export class SimplemattableComponent<T> implements OnInit, DoCheck, OnChanges, A
 
   // checks for data changes
   ngOnChanges(changes: SimpleChanges): void {
+    this.clearCssCache();
     if (changes.data) {
       this.onDataChanges();
     }
@@ -973,6 +985,11 @@ export class SimplemattableComponent<T> implements OnInit, DoCheck, OnChanges, A
     }
   }
 
+  clearCssCache(): void {
+    this.rowClassMap.clear();
+    this.rowStyleMap.clear();
+  }
+
   private onDataChanges(): void {
     this.clearAddedEntry();
     this.recreateDataSource();
@@ -1001,6 +1018,7 @@ export class SimplemattableComponent<T> implements OnInit, DoCheck, OnChanges, A
   // checks for column changes
   ngDoCheck(): void {
     if (this.checkForDifferences()) {
+      this.clearCssCache();
       this.clearAddedEntry();
       this.turnOffSorting(); // If columns are changed, resorting might cause bugs
       this.recreateDataSource();
@@ -1254,6 +1272,7 @@ export class SimplemattableComponent<T> implements OnInit, DoCheck, OnChanges, A
     } else {
       this.expandedElement = row;
     }
+    this.clearCssCache();
   }
 
   sortChanged(sortEvent: Sort) {

src/app/custom-css/custom-css.component.css

@@ -0,0 +1,6 @@
+.inline-code {
+  font-family: monospace;
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 2px;
+  padding: 3px;
+}

src/app/custom-css/custom-css.component.html

@@ -40,10 +40,15 @@ <h2 id="customcss">Custom CSS</h2>
     </mat-tab-group>
     <h2 id="rowcss">Row Styling CSS</h2>
     <p>
-      You can easily and dynamically apply css to the rows of the table cell.
+      You can easily and dynamically apply css to the rows of the table.
       SimpleMatTable will simply forward the style-object to Angular, so everything that works with standard Angular
       ngStyle/ngClass works here too.
     </p>
+    <p>Note that the results of rowNgStyle and rowNgClass will be cached. The cache is cleared every time the data or
+      the table column changes. If some external factor changes that might influence the styling, you can call the
+      <span class="inline-code">clearCssCache()</span> method of simplemattable. If you want to disable caching
+      completely, set <span class="inline-code">disableCssCaching</span> to true
+      on the smc-simplemattable element.</p>
     <mat-tab-group>
       <mat-tab>
         <ng-template mat-tab-label>