v0.0.13: Refactored the render-loop to solve hard-to-track bugs and added more (elaborate) unit-tests to make sure it all works

examples/table-2/table-component.jsx

@@ -0,0 +1,72 @@
+import {CustomElement, defineElement, Host, prop, state} from "../../packages/csx";
+import TableComponentStyle from "./table-component.scss";
+
+let tableId = 0;
+
+@defineElement("tripto-table")
+export class TableComponent extends CustomElement {
+
+    #columnDefinitions;
+
+    @prop()
+    set columns(value) {
+        this.#columnDefinitions = value;
+    }
+
+    @state() data;
+
+    @prop()
+    set data(value) {
+        this.data = value;
+        this.rows = new Map();
+    }
+    
+    @prop()
+    rowKey = (value,index)=>index;
+    
+    @prop()
+    cellRef = ()=>null;
+    
+    rows = new Map();
+
+    #tableId = tableId++;
+    render() {
+        console.log(`Table render at for ${this.data?.length??0} rows: ${Date.now()}`);
+        return (
+            <Host>
+                <style>{TableComponentStyle}</style>
+                <style>
+                    {this.#columnDefinitions?.map((col, idx) => (
+                        `#table_${this.#tableId} .cell.cell_${idx} {` +
+                        `   flex: ${(col.size ? (`0 0 ${col.size}px`) : `1`)};` +
+                        `}`
+                    ))}
+                </style>
+                <section className="table" id={`table_${this.#tableId}`}>
+                    <header>
+                        <div className="row">
+                            {this.#columnDefinitions.map((col, idx) => (
+                                <div className={`cell cell_${idx}`}>
+                                    {col.headerRender()}
+                                </div>
+                            ))}
+                        </div>
+                    </header>
+                    <main>
+                        {this.data?.map((dataRow,index) => (
+                            <div className="row"
+                                 key={this.rowKey(dataRow, index)}
+                                 ref={(el)=>this.rows.set(this.rowKey(dataRow,index), el)}>
+                                {this.#columnDefinitions.map((col, idx) => (
+                                    <div className={`cell cell_${idx}`} key={idx} ref={(el)=>this.cellRef(dataRow,idx,el)}>
+                                        {col.render(dataRow)}
+                                    </div>
+                                ))}
+                            </div>
+                        ))}
+                    </main>
+                </section>
+            </Host>
+        );
+    }
+}