From f9463b02e44ad70cb1f654e4c89e42735a6aef21 Mon Sep 17 00:00:00 2001
From: Lars Gebhardt-Kusche <lars@kusche.berlin>
Date: Mon, 9 Feb 2026 00:44:02 +0100
Subject: [PATCH] Tabel

---
 config/current.ver                            |  2 +-
 .../blocks-custom/elements/table-2xn.js       | 75 +++++++++++++++----
 2 files changed, 60 insertions(+), 17 deletions(-)

diff --git a/config/current.ver b/config/current.ver
index 101bb3a..4adb59e 100644
--- a/config/current.ver
+++ b/config/current.ver
@@ -1 +1 @@
-1.2.84
+1.2.85
diff --git a/public/assets/js/bridge/blocks-custom/elements/table-2xn.js b/public/assets/js/bridge/blocks-custom/elements/table-2xn.js
index d3ccabc..e5ea1b2 100644
--- a/public/assets/js/bridge/blocks-custom/elements/table-2xn.js
+++ b/public/assets/js/bridge/blocks-custom/elements/table-2xn.js
@@ -2,23 +2,66 @@
   window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
   window.BridgeBlocksCustomElements.push(function(ctx){
     const { bm, addOnce, css } = ctx;
+    const headStyle = css({'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'});
+    const cellStyle = css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'});
     addOnce(bm, 'cust-table', { id:'cust-table', label:'🧩 Tabelle (2xN)',
-      content:`<table data-bridge-table="1" data-bridge-rows="3" data-bridge-cols="2" data-gjs-selectable="true" data-gjs-hoverable="true" role="presentation" width="100%" cellpadding="0" cellspacing="0" style="${css({'font-family':'Arial,sans-serif','border-collapse':'collapse','width':'100%','margin-bottom':'16px'})}">
-        <tbody data-gjs-selectable="false" data-gjs-draggable="false">
-          <tr data-gjs-selectable="false" data-gjs-draggable="false">
-            <th data-gjs-type="text" contenteditable="true" data-gjs-draggable="false" style="${css({'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'})}">Spalte A</th>
-            <th data-gjs-type="text" contenteditable="true" data-gjs-draggable="false" style="${css({'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'})}">Spalte B</th>
-          </tr>
-          <tr data-gjs-selectable="false" data-gjs-draggable="false">
-            <td data-gjs-type="text" contenteditable="true" data-gjs-draggable="false" style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">Zeile 1</td>
-            <td data-gjs-type="text" contenteditable="true" data-gjs-draggable="false" style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">...</td>
-          </tr>
-          <tr data-gjs-selectable="false" data-gjs-draggable="false">
-            <td data-gjs-type="text" contenteditable="true" data-gjs-draggable="false" style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">Zeile 2</td>
-            <td data-gjs-type="text" contenteditable="true" data-gjs-draggable="false" style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">...</td>
-          </tr>
-        </tbody>
-      </table>`
+      content: {
+        tagName: 'table',
+        attributes: {
+          'data-bridge-table': '1',
+          'data-bridge-rows': '3',
+          'data-bridge-cols': '2',
+          role: 'presentation',
+          width: '100%',
+          cellpadding: '0',
+          cellspacing: '0',
+          style: css({'font-family':'Arial,sans-serif','border-collapse':'collapse','width':'100%','margin-bottom':'16px'}),
+          'data-gjs-selectable': 'true',
+          'data-gjs-hoverable': 'true',
+        },
+        components: [{
+          tagName: 'tbody',
+          selectable: false,
+          hoverable: false,
+          draggable: false,
+          highlightable: false,
+          components: [
+            {
+              tagName: 'tr',
+              selectable: false,
+              hoverable: false,
+              draggable: false,
+              highlightable: false,
+              components: [
+                { type:'text', tagName:'th', editable:true, selectable:true, hoverable:true, draggable:false, attributes:{ style: headStyle, 'data-gjs-draggable':'false' }, content:'Spalte A' },
+                { type:'text', tagName:'th', editable:true, selectable:true, hoverable:true, draggable:false, attributes:{ style: headStyle, 'data-gjs-draggable':'false' }, content:'Spalte B' },
+              ],
+            },
+            {
+              tagName: 'tr',
+              selectable: false,
+              hoverable: false,
+              draggable: false,
+              highlightable: false,
+              components: [
+                { type:'text', tagName:'td', editable:true, selectable:true, hoverable:true, draggable:false, attributes:{ style: cellStyle, 'data-gjs-draggable':'false' }, content:'Zeile 1' },
+                { type:'text', tagName:'td', editable:true, selectable:true, hoverable:true, draggable:false, attributes:{ style: cellStyle, 'data-gjs-draggable':'false' }, content:'...' },
+              ],
+            },
+            {
+              tagName: 'tr',
+              selectable: false,
+              hoverable: false,
+              draggable: false,
+              highlightable: false,
+              components: [
+                { type:'text', tagName:'td', editable:true, selectable:true, hoverable:true, draggable:false, attributes:{ style: cellStyle, 'data-gjs-draggable':'false' }, content:'Zeile 2' },
+                { type:'text', tagName:'td', editable:true, selectable:true, hoverable:true, draggable:false, attributes:{ style: cellStyle, 'data-gjs-draggable':'false' }, content:'...' },
+              ],
+            },
+          ],
+        }],
+      }
     });
   });
 })();