we built a technical documentation platform for our customer and he just loves it.
But I recently received a nightmare requirement:
They want to have tables:
- Configurable borders
- rowspan and colspan
- Images inside table cells (probably also other content)
- background color of table cells
I have the following idea, but I would love to have some feedback on this:
I’m thinking of building a new ContentElement of type “FatTable” (or any other fancy name^^). This element has a property called tableConfiguration where the editor can paste a html or markdown table (like generated from Table generator).
I use AOP to detect the change of that property in TYPO3CR and generate childContent elements of type “FatTableCell” (which have properties like rowspan, colspan, border, background).
Building the table renderer will be a bit tricky, but I don’t have a better solution atm.
Hope for your feedback.
you could technically create
row be a ContentColleciton that accepts only
cell and the
Table only accepts
row. That would avoid the dangerous AOP stuff and editors can just create rows and cells.
I just implemented the first version and released it to Github https://github.com/1drop/Onedrop.FatTable.
Structure and rendering works and it currently features most functionality of Bootstrap3 tables.
Unfortunately the Neos backend does some weird stuff. It generates the following HTML (excerpt) of it:
<div typeof="typo3:Onedrop.FatTable:Table" about="/sites/manuals/main/node-56e810f2e70b8@user-hhoechtl;language=en"
tabindex="0" class="neos-contentelement neos-not-inline-editable"
<div id="ember874" class="ember-view neos-contentelement-overlay" style="width: 285px; height: 142508px;">
neos-contentelement-overlay increments its height to infinity.
Any idea why and how to solve this?
To solve your overlay issue you just need to allow inline editing, just set
inlineEditable: TRUE in the
ui: section of your node type configuration.
I fixed it, it was the ContentCollection of the table cell. It didn’t work to render it’s main collection as
td tag, but at this point to have the td tag inside the template.