How to generate <table> compatible with jQueryMobile in TYPO3

Question

I'm trying to create a jQueryMobile compatible <table> with TYPO3.

It means adding data-role="table" and class="class="ui-responsive"".

This table can be generated with RTE or a Table Content Element.

RTE

Default <table> HTML

<table style="" class="contenttable">
    <thead>
        <tr>
            <th scope="col">head 1</th>
            <th scope="col">head 2</th>
            <th scope="col">head 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>L 1</td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <td>L 2</td>
            <td>...</td>
            <td>...</td>
        </tr>
    </tbody>
</table>

attempt to solve problem

I've added the following setup but jQuery seams not to work anymore. It load (spinning animation) indefinitely.

lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.data-role.always = 1
lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.data-role.default = table

lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.default = ui-responsive
lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.list = ui-responsive

Content Element

Default <table> HTML

<table class="contenttable contenttable-0 test">
    <thead>
        <tr class="tr-even tr-0">
             <th class="td-0" scope="col" id="col162967-0">head 1</th>
             <th class="td-1" scope="col" id="col162967-1">head 2</th>
             <th class="td-last td-2" scope="col" id="col162967-2">head 3</th>
         </tr>
     </thead>
     <tbody>
         <tr class="tr-odd tr-1">
             <td class="td-0" headers="col162967-0">L 1</td>
             <td class="td-1" headers="col162967-1">...</td>
             <td class="td-last td-2" headers="col162967-2">...</td>
         </tr>
         <tr class="tr-even tr-last">
             <td class="td-0" headers="col162967-0">L 2</td>
             <td class="td-1" headers="col162967-1">...</td>
             <td class="td-last td-2" headers="col162967-2">...</td>
         </tr>
    </tbody>
</table>

attempt to solve problem

I don't find in tt_content where to add configuration to add a classand data-role.

Ornithosis

Answer 1

For the TABLE content element you have at least 2 options:

A. Render the table yourself - You can create your own PHP method that would do the processing of the tables. I presume you are using css_styled_content extension whose method render_table() does the rendering of the tables. You can copy that method, add it to your own class and modify it so that it adds the data-role attribute as you want.

B. Do some replacing of the outputted code - You can try to use the replacement property (available in TYPO3 >=4.6) of the stdWrap to replace class="contenttable with data-role="table" class="ui-responsive. I currently cannot test it but try this:

tt_content.table.20.stdWrap.replacement {
  10 {
    search = class="contenttable
    replace = data-role="table" class="ui-responsive
  }
}

Marivelmariya

Answer 2

There's a bug report open at forge to override the Flexform values via TSconfig TYPO3 forge.

The suggested workaround by overriding the flexform completly works fine though:

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPiFlexFormValue('*', 'FILE:EXT:'.$_EXTKEY.'/flexform_table.xml', 'table');

Connote