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/index.jsx

@@ -0,0 +1,132 @@
+import {render, CustomElement, defineElement, Host, prop, state} from "../../packages/csx";
+import style from "./index.scss";
+import {TableComponent} from "./table-component";
+
+@defineElement("table-tester")
+class TableTester extends CustomElement{
+    /**
+     *
+     * @type {({[headerRender]: (function(): string), render: (function(User): *), [size]: number})[]}
+     */
+    #columnDefinitions = [
+        {
+            headerRender: () => "Id",
+            render: (u) => u.userId,
+            size: 110
+        },
+        {
+            headerRender: () => "Email",
+            render: (u) => u.identity?.email,
+        },
+        {
+            headerRender: () => "FirstName",
+            render: (u) => u.identity?.firstName,
+            size: 160
+        },
+        {
+            headerRender: () => "LastName",
+            render: (u) => u.identity?.lastName,
+            size: 160
+        },
+        {
+            headerRender: () => "Up",
+            render: (u) => {
+                let d = new Date();
+                return (<button onClick={(ev) => this.moveUp(ev, u, d)}>Up</button>)
+            },
+            size: 110
+        },
+        {
+            headerRender: () => "Down",
+            render: (u) => {
+                let d = new Date();
+                return (<button onClick={(ev) => this.moveDown(ev, u, d)}>Down</button>)
+            },
+            size: 110
+        },
+    ];
+    
+    @state()
+    users = [];
+    
+    rowKey = (user)=>user.userId;
+    cellRef = (user, colIdx, el)=>user.cells[colIdx]=el;
+    
+    render(){
+        
+        return <TableComponent
+                columns={this.#columnDefinitions}
+                data={this.users}
+                rowKey={this.rowKey}
+                cellRef={this.cellRef}
+        />
+    }
+    
+    connectedCallback() {
+        super.connectedCallback();
+        
+        setTimeout(()=>this.load(), 0);
+    }
+    
+    interval;
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if(this.interval) {
+            clearInterval(this.interval);
+        }
+    }
+    
+    load(){
+        let users = [];
+        
+        let rndFirstNames = ['Loes', 'Johnny', 'Maria', 'Jezus', 'Philippe', 'Filip', 'Annie'];
+        let rndLastNames = ['Peeters', 'Wachters', 'Jannsens', 'De Schaetzen', 'Becks', 'Konings', 'De Clerk'];
+        
+        for(let i = 0; i < 10; ++i){
+            let first = rndFirstNames[Math.floor(rndFirstNames.length*Math.random())];
+            let last = rndLastNames[Math.floor(rndLastNames.length*Math.random())];
+            users.push({
+                userId: (Math.random()*99999).toString(36).slice(-6).toUpperCase(),
+                identity: {
+                    firstName: first,
+                    lastName: last,
+                    email: `${first}.${last}@example.com`.toLocaleLowerCase()
+                },
+                cells: []
+            })
+        }
+        
+        this.users = users;
+    }
+    
+    lastClear = new Date();
+    
+    moveUp = (ev, u, d)=>{
+        let data = this.users.slice();
+        let indexOf = this.users.indexOf(u);
+    
+        if(indexOf>0) {
+            let [before, after] = data.splice(indexOf - 1, 2);
+            data.splice(indexOf - 1, 0, after, before);
+            console.log(data.map((u,index)=>this.rowKey(u,index)))
+            this.users = data;
+        }
+        console.log(this.users);
+    }
+    
+    moveDown = (ev, u, d)=>{
+        let data = this.users.slice();
+        let indexOf = this.users.indexOf(u);
+        
+        if(indexOf<(this.users.length-1)) {
+            let [before, after] = data.splice(indexOf, 2);
+            data.splice(indexOf, 0, after, before);
+            console.log(data.map((u,index)=>this.rowKey(u,index)));
+            this.users = data;
+        }
+        console.log(this.users);
+    }
+}
+
+document.body.appendChild(render(<style>{style}</style>));
+document.body.appendChild(render(<TableTester/>));