SID-02346: Twisty inserting new rows in a table

Status:	Answered	TWiki version:		Perl version:
Category:	TwistyPlugin	Server OS:		Last update:	7 years ago

I was trying to use a twisty to allow a user to collapse/expand rows following a given one in a table. What I tried to do is the following:

value1Row1 | value2Row1 |

where I was hoping to achieve a two-column table with an header and two rows following the header. The first row would have a twisty option that would display one more row below the first one (and before the original second one).

This seems to get pretty close but the first row of values is not recognized as a row of the table itself and I'm not sure how to handle this. Any help is very appreciated. Thanks!

-- TWiki Guest - 2018-02-18

Discussion and Answer

This is tricky because TwistyPlugin can't do its magic within TWiki table markup. The Twisty environment uses nested div / span elements to wrap the contents, depending on the mode parameter. For a table row, there is no valid nesting, and any HTML tag written in a table line before the | stops TWiki from interpreting a line as belonging to the table. That's why you see the vertical bars before your toggle, and if you look closely at the column widths you'll notice that TWiki renders one separate table per row.

To achieve what you want to see, you would need to create your table in HTML. You can use TWISTYSHOW and TWISTYHIDE in span mode in a table element, but the rest is just naked HTML+CSS:

Column1	Column2
value1Row1	value2Row1
subTableVal1	subTableVal2
value1Row2	value2Row2

If I drop all the layout attributes, the source code looks like this (use "view raw" if you want to see how the table above was created):

<table>
  <tr>
    <th>Column1</th>
    <th>Column2</th>
  </tr>
  <tr>
    <td>
      %TWISTYSHOW{id="foo" link="" imgleft="%ICONURLPATH{toggleopen}%"}%
      %TWISTYHIDE{id="foo" link="" imgleft="%ICONURLPATH{toggleclose}%"}%
      value1Row1
    </td>
    <td> value2Row1 </td>
  </tr>
  <tbody class"twistyPlugin">
    <tr id="footoggle" class="twistyContent twikiMakeHidden twistyInited">
      <td>subTableVal1</td>
      <td>subTableVal2</td>
    </tr>
  </tbody>
<tr>
  <td>value1Row2</td>
  <td>value2Row2</td>
</tr>
</table>

-- Harald Jörg - 2018-02-19

Thank you so much for the example and explanation Herald.

-- TWiki Guest - 2018-02-19

If you answer a question - or someone answered one of your questions - please remember to edit the page and set the status to answered. The status selector is below the edit box.