Tabel
This commit is contained in:
@@ -1 +1 @@
|
|||||||
1.2.84
|
1.2.85
|
||||||
|
|||||||
@@ -2,23 +2,66 @@
|
|||||||
window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
|
window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
|
||||||
window.BridgeBlocksCustomElements.push(function(ctx){
|
window.BridgeBlocksCustomElements.push(function(ctx){
|
||||||
const { bm, addOnce, css } = 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)',
|
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'})}">
|
content: {
|
||||||
<tbody data-gjs-selectable="false" data-gjs-draggable="false">
|
tagName: 'table',
|
||||||
<tr data-gjs-selectable="false" data-gjs-draggable="false">
|
attributes: {
|
||||||
<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>
|
'data-bridge-table': '1',
|
||||||
<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>
|
'data-bridge-rows': '3',
|
||||||
</tr>
|
'data-bridge-cols': '2',
|
||||||
<tr data-gjs-selectable="false" data-gjs-draggable="false">
|
role: 'presentation',
|
||||||
<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>
|
width: '100%',
|
||||||
<td data-gjs-type="text" contenteditable="true" data-gjs-draggable="false" style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">...</td>
|
cellpadding: '0',
|
||||||
</tr>
|
cellspacing: '0',
|
||||||
<tr data-gjs-selectable="false" data-gjs-draggable="false">
|
style: css({'font-family':'Arial,sans-serif','border-collapse':'collapse','width':'100%','margin-bottom':'16px'}),
|
||||||
<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>
|
'data-gjs-selectable': 'true',
|
||||||
<td data-gjs-type="text" contenteditable="true" data-gjs-draggable="false" style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">...</td>
|
'data-gjs-hoverable': 'true',
|
||||||
</tr>
|
},
|
||||||
</tbody>
|
components: [{
|
||||||
</table>`
|
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:'...' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}],
|
||||||
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
|
|||||||
Reference in New Issue
Block a user