Node based tables

Using Neos & Flow
1

Hey everybody,
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.

2

you could technically create rowand cellelements, make 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.

1 Like
3

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"
 data-node-_identifier="50bc5487-9ae8-4f80-9689-1e71961a5a18" data-node-__workspace-name="live">
<div id="ember874" class="ember-view neos-contentelement-overlay" style="width: 285px; height: 142508px;">
    <span></span></div>

The element neos-contentelement-overlay increments its height to infinity.
Any idea why and how to solve this?

4

Nice,

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.

6

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.