projects/emailtemplate.it
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tabel

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2026-02-09 00:44:02 +01:00
parent 9ce1cb7086
commit f9463b02e4
2 changed files with 60 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
public/assets/js/bridge/blocks-custom/elements/table-2xn.js
View File

@@ -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:'...' },
],
},
],
}],
}
});
});
})();