From 432629413e9b5b4902c1392cc23b1703d8dbb700 Mon Sep 17 00:00:00 2001 From: Henning Wobken Date: Thu, 23 Dec 2021 22:07:44 +0100 Subject: [PATCH] 13.2.0: caching of row style/classes --- projects/simplemattable/README.md | 1 + projects/simplemattable/package.json | 2 +- .../simplemattable.component.ts | 29 +++++++++++++++---- src/app/custom-css/custom-css.component.css | 6 ++++ src/app/custom-css/custom-css.component.html | 7 ++++- 5 files changed, 38 insertions(+), 7 deletions(-) diff --git a/projects/simplemattable/README.md b/projects/simplemattable/README.md index 0255e0d..b7cd845 100644 --- a/projects/simplemattable/README.md +++ b/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 diff --git a/projects/simplemattable/package.json b/projects/simplemattable/package.json index 7d5e4c2..9cf1f79 100644 --- a/projects/simplemattable/package.json +++ b/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", diff --git a/projects/simplemattable/src/lib/simplemattable/simplemattable.component.ts b/projects/simplemattable/src/lib/simplemattable/simplemattable.component.ts index 7b6b4bf..78a6065 100644 --- a/projects/simplemattable/src/lib/simplemattable/simplemattable.component.ts +++ b/projects/simplemattable/src/lib/simplemattable/simplemattable.component.ts @@ -218,6 +218,7 @@ export class SimplemattableComponent 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 implements OnInit, DoCheck, OnChanges, A */ stringRepresentationMap = new Map, string>>(); + rowStyleMap = new Map(); + rowClassMap = new Map(); + constructor( private fb: FormBuilder, ) { @@ -596,6 +600,9 @@ export class SimplemattableComponent 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 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 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 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 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 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 implements OnInit, DoCheck, OnChanges, A } else { this.expandedElement = row; } + this.clearCssCache(); } sortChanged(sortEvent: Sort) { diff --git a/src/app/custom-css/custom-css.component.css b/src/app/custom-css/custom-css.component.css index e69de29..cdf027c 100644 --- a/src/app/custom-css/custom-css.component.css +++ b/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; +} diff --git a/src/app/custom-css/custom-css.component.html b/src/app/custom-css/custom-css.component.html index 7b63a8e..17fc3e2 100644 --- a/src/app/custom-css/custom-css.component.html +++ b/src/app/custom-css/custom-css.component.html @@ -40,10 +40,15 @@

Custom CSS

Row Styling CSS

- 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.

+

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 + clearCssCache() method of simplemattable. If you want to disable caching + completely, set disableCssCaching to true + on the smc-simplemattable element.