!!Table plugin

This plugin extends JSPWiki's table markup :
* merge cells horizontally and/or vertically (aka colspan and rowspan)
* auto-numbering of rows
* multi-line table markup to ease the entry of large or complex table cells, including nested tables
* additional formatting for odd/even rows, headers, etc.
--[DF|DirkFrederickx]


%%tabbedSection
%%tab-TableSyntax
! Basic markup
The table plugin is compatible with the standard JSPWiki table syntax :
* a new line of text starting with a pipe sign '|' indicates the start of 
  a new table row. 
* every line corresponds with a horizontal row of the table, containing one 
  or more table cells.
** a single pipe signs ('|') starts a new data cell. 
** a double pipe signs ('||') starts a header cell with different formatting.
* end the table with a line which does not start with a pipe sign.

! Extended markup
Following syntax is also supported:
* use '|<' or '||<' to collapse a cell with the previous cell so 
  it __spans multiple columns__.
* use '|^' or '||^' to collapse a cell with the cell above so that 
  it __spans multiple rows__.
* use '|( <css-style> ) ' to add specific __formatting__ to a cell.
* use '#' inside a table cell to display the current row number. 
  (__auto row numbering__)

Example:
{{{
   |Nr |A |< |C |<
   |#  |a |b |c |(background:yellow;)d
   |#  |^ |b |^ |(background:yellow;)d
}}}
becomes (simulated)

{{
&nbsp;&nbsp;+----+-------+-------+\\
&nbsp;&nbsp;| Nr | A &nbsp; &nbsp; | C &nbsp; &nbsp; |\\
&nbsp;&nbsp;+----+---+---+---+---+\\
&nbsp;&nbsp;| 1&nbsp; | a | b | c |%%(background:yellow;) d %%|\\
&nbsp;&nbsp;+----+ &nbsp; +---+ &nbsp; +---+\\
&nbsp;&nbsp;| 2&nbsp; | &nbsp; | b | &nbsp; |%%(background:yellow;) d %%|\\
&nbsp;&nbsp;+----+---+---+---+---+\\
}}
! Multi-line table editing

The standard table markup of JSPWiki requires you to put every row on a single line without carriage returns.

With the Table plugin, a single ''table row'' and even a single ''table cell'' can be entered on multiple lines.

A multi-line ''table row'' is similar to a bulleted list, where you replace the bullets ('*') with pipes ('|' or '||').
A blank line indicates the end of a table row.
{{{
| These cells
| will all appear
| as a single table row

}}}
It is also possible to put the contents of a single ''table cell'' across multiple lines.
So it is easy to put lots of text and markup inside a single table cell and still keep your markup readable.
{{{
| This cell
  is put over 2 lines
| The 2nd cell comes here

}}}
You can combine muti-line rows with standard wiki table syntax too.
As long as a single line contains only one table cell, it is assumed to continue on the next line.
Multi-line rows always need to be terminated with blank lines; for standard wiki table rows you may omit the blank lines. 
{{{
| This row has 
| Two cells

| You can also    | use standard wiki markup.
| Here is another | table row
}}}

Of course, you can combine this multi line syntax with the '|<', '|^' and '#' stuff as well.

Example:
{{{
   || Heading 1 
   || Heading 2

   | ''Gobble'' starts a new row! 
   * and some more text with wiki markup, all in the same table cell
   |(background:yellow;) Bar

   | [{Image src='some-nice-picture'}]  
   |<
}}}
%%
%%tab-Usage
! Usage

{{{
[{Table <table-parameters>

|| Table Header Example || More... 
|  Table Data Example   |  More...
}]
}}}

Following parameters are supported:

* __rowNumber : <integer>__ , row number starts counting at this value, default = 0 
  (used in conjunction with '#' syntax)
* __style : <css-style>__ , add formatting to the table 
  e.g. {{style:'border=2px solid black;'}}
* __dataStyle : <css-style>__ , format all data cells 
  (prefixed by single pipe signs '|')
* __headerStyle :  <css-style>__ , format all header cells 
  (prefixed by double pipe signs '||')
* __evenRowStyle :  <css-style>__  , format the even rows, 
  e.g. {{evenRowStyle='background: #ffff00;'}}
* __oddRowStyle :  <css-style>__  . format the odd rows, 
  e.g. {{oddRowStyle='color: red;'}}

! Change History
* v0.1 : first version
* v0.2 : client-side sorting of tables : now handled by [BrushedTemplateSortableTables] / 24 oct 05 
* v0.3 : removed escape parameter: JSPWiki (v2.4.x) now supports nested plugin calls / jun 06 


!Installation Instructions

* Copy {{Table.jar}} to the folder {{/WEB-INF/lib/}} 
* Modify the plugin searchPath in your {{WEB-INF/jspwiki.properties}} and make
  sure there are no spaces between the different entries. Example:
  {{{
       jspwiki.plugin.searchPath = brushed.jspwiki.tableplugin
  }}}
* Restart JSPWiki

%%
%%tab-Examples

!Example 1 : table with row and column spans

{{{
[{Table

|Nr |A |< |C |<
|#  |a |b |c |(background:yellow;)d
|#  |^ |b |^ |(background:yellow;)d
}]
}}}

[{Table 

|Nr |A |< |C |<
|#  |a |b |c |(background:yellow;)d
|#  |^ |b |^ |(background:yellow;)d
}]

!Example 2: table with extra style
{{{
[{Table oddRowStyle='background:#f0f0f0;' rowNumber='-1'

|| [THE 15 MOST POPULAR ICE CREAM FLAVORS|http://www.sendicecream.com/15mospopicec.html] 
||< 
||< 

|| ||Flavor|| percent preferring
|#. |Vanilla| 29%
|#. |Chocolate| 8.9%
|#. |Butter pecan| 5.3%
|#. |Strawberry| 5.3%
|#. |Neapolitan| 4.2%
|#. |Chocolate chip| 3.9%
|#. |French vanilla| 3.8%
|#. |Cookies and cream| 3.6%
|#. |Vanilla fudge ripple| 2.6%
|#. |Praline pecan| 1.7%
|#. |Cherry| 1.6%
|#. |Chocolate almond| 1.6%
|#. |Coffee| 1.6%
|#. |Rocky road| 1.5%
|#. |Chocolate marshmallow| 1.3%
|All others|< | 23.7%  
}]
Source: International Ice Cream Association, 888 16th St. Washington, D.C., 20006
}}}

[{Table oddRowStyle='background:#f0f0f0;' rowNumber='-1'

|| [THE 15 MOST POPULAR ICE CREAM FLAVORS|http://www.sendicecream.com/15mospopicec.html] 
||< 
||< 

|| ||Flavor|| percent preferring
|#. |Vanilla| 29%
|#. |Chocolate| 8.9%
|#. |Butter pecan| 5.3%
|#. |Strawberry| 5.3%
|#. |Neapolitan| 4.2%
|#. |Chocolate chip| 3.9%
|#. |French vanilla| 3.8%
|#. |Cookies and cream| 3.6%
|#. |Vanilla fudge ripple| 2.6%
|#. |Praline pecan| 1.7%
|#. |Cherry| 1.6%
|#. |Chocolate almond| 1.6%
|#. |Coffee| 1.6%
|#. |Rocky road| 1.5%
|#. |Chocolate marshmallow| 1.3%
|All others|< | 23.7%  
}]
Source: International Ice Cream Association, 888 16th St. Washington, D.C., 20006

!Example 3: table with multi-line editing

{{{
[{Table style='border:3px solid #cccccc;'

|(text-align:center;font-weight:bold; background:#cccccc;) Hi dear Wiki. 
|<
|<

| Date: [{CurrentTimePlugin format='dd:MMM:yyyy'}] 
| Time: [{CurrentTimePlugin format='hh:mm:ss'}]
| This page: [{$pagename}] 

| [{Table 

| Nested table | Nested table
| Nested table | Nested table
}]
|<
|<

}]
}}}


[{Table style='border:3px solid #cccccc;'

|(text-align:center;font-weight:bold; background:#cccccc;) Hi dear Wiki. 
|<
|<

| Date: [{CurrentTimePlugin format='dd:MMM:yyyy'}] 
| Time: [{CurrentTimePlugin format='hh:mm:ss'}]
| This page: [{$pagename}] 

| [{Table 

| Nested table | Nested table
| Nested table | Nested table
}]
|<
|<

}]
%%
%%tab-Discussion

! Discussions

Hello,
I don't know if this is the right place, 
but I have trouble to get this TablePlugin to work. 
I copied the Table.jar to my WEB-INF\lib directory, 
but if I just use the new Syntax I get normal Tables, 
not the ones which are described on this page.

Do I have to use a special Syntax or make known that I 
do want to use the plugin Syntax? 
Maybe, someone can help me out on this and/or post 
more detailed installation  instructions.

Thanks a lot,
Christian

-- What you describe should be sufficient. Just copy the jar and restart the JSPWiki application in your web server.
--[DF|DirkFrederickx]

----
I wanted to try the sortable table but I got only a plain looking regular table. Here is what I used:
{{{
Table example:

[{Table 

||Name||SKU||title
|blouse|1234|A piece of clothing
|oil|234324|Industrial material
|cake|9987|Delicious foo
}]
}}}

The generated html:
{{{
  Table example:
<p><table border='1' class='wikitable sortable' onclick="sortColumn(event)" > 
<thead>
<tr>
<td>Name</td>
<td>SKU</td>
<td>title</td>
</tr>
</thead>
<tbody>
<tr>
<td>blouse</td>
<td>1234</td>
<td>A piece of clothing</td>
</tr>
<tr>
<td>oil</td>
<td>234324</td>
<td>Industrial material</td>
</tr>
<tr>
<td>cake</td>
<td>9987</td>
<td>Delicious foo</td>
</tr>
</tbody>
</table>
}}}
It looks like the plugin did its job but there is still something missing in the CSS/JavaScript part. The html source had no mention of the tablesort.js file.

Any ideas? I did all the extra steps like copying the .js file and updating my .css file.\\
I am using the latest JSPWiki v2.1.144-alpha with the mrg template. I made the suggested changes to the jspwiki.css, perhaps I should have modified a different .css file?

;:Yep, you are right. I forgot to mention in the install section that you need to add a reference to the {{tablesort.js}}. I updated the [How To Install section|9] -- [DF|DirkFrederickx]

;:The above suggests that we should have a way for JSPWiki to pick up automatically any Javascripts as well, after they have been dropped in /scripts/... --[JanneJalkanen]

;:Thanks DF. I tried your instructions for the mrg template and it didn't work - same old behavior as before. Since the .jsp structure in this template is quite different from the one in the default template I had to make some adaptations, but I ''think'' I did it right... And I agree with Janne, it would be great to have a solution that is transparent to the template you're using! -- [NascifAbousalhNeto]

----
Hi, I added the table.jar to the web-inf\lib directory, but I try out the table plugin, I get this error - "An unknown exception javax.servlet.jsp.JspException was caught by Error.jsp"

Sometimes, intermittently, the whole page has only one line that says "org.apache.log4j...". Should I copy log4j.jar into the lib directory as well? -- SriramGopalan
;:Yes, log4j.jar should be in the lib directory. This is normally the case, since it is part of the JSPWiki distribution. --[DF|DirkFrederickx]

Thanks, Dirk. In my case, there is log4j in the lib directory and I still get this error! So, I explicitly added org.apache.log4j to the search path. That error went away, but I got this error - " (class: org/apache/log4j/LogManager, method:  signature: ()V) Incompatible argument to function". Is it possible that log4j version that is shipped with jspwiki 2.0.52 is not compatible with the latest TablePlugin? -- SriramGopalan
;: Mmm, dont know. The TablePlugin uses the logging functions as used throughout JSPWiki, so I don't understand why this would only give exceptions in the TablePlugin ? Anyway, TablePlugin was developed on a v2.1.xx. BTW, why keep stuck with a v2.0.xx while v2.2.xx is alive and kicking ?  --[DF|DirkFrederickx]

Thanks, Dirk. Once I upgraded to 2.2, most the problems went away. I also formatted the wikitable css to my heart's content. The only snag is whenever I click on a header to sort, the numbers 5 or 6 appear alternately next to the column header! I am assuming that arrows were supposed to appear, but for some reason, I am seeing the numbers 5 or 6! Are there any other images I need to download? - SriramGopalan

;:The arrows are shown if you format 5 or 6 with a webding font. Make sure following css defs are available: --[DF|DirkFrederickx]
{{{
  .arrow { font-family: webdings; 
           font-weight: normal;  // be careful, dont remove
           color:       black; 
           overflow:    hidden;
         }
}}}

----
New version of Table plugin loaded, dd. 29 mar 2005 -- [DF|DirkFrederickx]


----
It would be really useful (to me & possibly others) if the auto numbered values would behave the same as numbered bullets (i.e. ## results in 1.1). BTW, the tablesort script has the problems reported above (up/down arrows replaced by chars 5/6) in Mozilla Firefox, works fine in MS IE. 
--[DW|DaveWolf]
;:How would you use the ## feature : the # counter is incremented for each new row; what about the second digit of the ## counter ?  The up/down arrows and webdings are not really cross-browser compatible, so I need to change that. Anyway, I am looking into a table-sort solution which could be applied to any wiki table, thus not only a ~TablePlugin tables. --[DF|DirkFrederickx]

I'd want the first digit to remain the same, and allow the second digit to increment starting from <rowNumber>. So, you would see something like:
|| Id | title
| # |
| ## |
| ## |
| #  |
| ## |
| ## |
| #  |
| ## |
| ### |
| ### |

And would get:
|| Id | title
| 1 |
| 1.1 |
| 1.2 |
| 2  |
| 2.1 |
| 2.2 |
| 3  |
| 3.1 |
| 3.1.1 |
| 3.1.2 |

Each increment of the first digit would occur when a single '#' is found and the counter for each subsequent digit would be reset. [DW|DaveWolf]

----

Excellent Plugin!\\

Just one thing:
* The tilde (~) for ignoring CamelCase is ignored. Any Ideas?\\

Thanks -- [GP|GregP]

;: This is because it is mixed up with the default escape character of the TablePlugin, being the {{~~}}. Actually, the TablePlugin will skip over any character just after the escape character AND remove that escape character.  An easy way around it, is to use a double {{~~~}} : the TablePlugin will remove the first escape character; and the JSPWiki rendering engine will process the second one. Another approach is to define another escape character, e.g. {{$$$}} or any sequence.\\Of course, the best solution would be that the JSPWiki engine is intelligent enough to support nested plugins (i.e. plugins nested inside the body of a plugin). This is still not the case in the v2.3.x new engine. So long, plugins will have to implement there own escape algorithms - mixing up with default JSPWiki behaviour. Too bad ;-)  (a similar issues was faced by the Forms plugins - which need to include e.g. variables)  --[DF|DirkFrederickx]
\\
----

Hi

Is it possible to change the color of a single cell or an entire row?

I use the following css definition which works great, but would like to ''"override"'' the def for a single cell

My table def is as follows

{{{
[{Table headerStyle : 'background-color: Gold; font-size: 12px; text-align: center; border: 2px ridge #CCCC66;'
        style:'font-size: 11px; font-weight: bold; width: 100%; border: 2px ridge #CCCC66; background-color: CCCC66;'
        dataStyle : 'text-align: left;	border: 2px ridge #CCCC66;'
        evenRowStyle: 'background: #ffff00;'
        oddRowStyle: 'background: #f0f0f0;'
}}}

Thanks 

[GWP]

;: Put a %~%(background:red;)  cell-content %~% inside your table cell. Dont know a way to color the complete row. --[DF|DirkFrederickx]


----
Hello,

Does this plug in affect the ability to have pictures inside the table?  I have tried the following and in the table cell the url is rendered and ''not'' the image.  

I have also tried using the image plugin inside this table plug in and that doesnt appear to work either.  What am i doing wrong or is this not possible?
{{{
 [{Table 
        headerStyle : 'background-color: Gold; font-size: 12px; text-align: center; border: 0px;'
        style:'font-size: 11px; width: 100%; border: 0px; background-color: CCCC66;'
        dataStyle : 'text-align: left;  border: 0px;'
        evenRowStyle: 'background: #ffff00;'
        oddRowStyle: 'background: #f0f0f0;'

|| Heading 1 
|| Heading 2


| [http://www.ecyrd.com/~jalkanen/test.png] | hello
| [{Image src='my_image_url' link='http://www.bbc.co.uk' width=86 height=27}~]    | 

}] 
}}}

I need to have a table of images which hyperlink to websites. I would like to have control over this table, such as have no border, span cells etc. Therefore i need a combination of this table plugin and the image plugin.  Can you not currently have 2 plugins working together?

Thanks Sarah

;:You can have nested plugins working, by using the escape character, which defaults to ~~. I updated your example to show how to to this. --[DF|DirkFrederickx]


----

Dear All,

I have one simple (but useful) patch into Table.java. This patch makes working nested
plugins in Table cels, without any escape characters (tested in JSPWiki v2.4.0-beta). :-)

line 191 of Table.java

if( startsWith( "}" + m_escape + "]", sb, i) ) 

replace by

if( startsWith( "}]", sb, i) )

recompile, deploy and there will start working examples like

{{{
[{Table

| [{Image src='Pics/HP.jpg'}] | [{nbsp count='5'}] | %%()
\\
__Electric Energy Utilization__ : \\
__Electric Energy Production__:

%% }]
}}}

JK

--[xkrumpha|mailto:xkrumpha@poli.feld.cvut.cz], 28-Apr-2006

;:Tx ! V0.3 has been adjusted accordingly. --[DF|DirkFrederickx], Jun 06

----

Hi Everybody,

How do I get the Table Plugin to work with the 2.4.x release? The content just shows up as text!
Thank you.

*The TablePlugin stil works on v2.4.x. However, in case you have nested plugin calls in your table, you need to escape some chars. Because of the different behaviour of JSPWIki (it actually now supports nested plugins ! )  you need a bit to anticipate its behaviour. You need to escape BOTH the starting [[{ as well as the closing }] plugin brackets. (in the past, it was sufficient to escape the closing brackets only) --[DF|DirkFrederickx]
*V0.3 has been uploaded!. Plse try with the latest plugin version --[DF|DirkFrederickx], Jun 06


%%
%%


----

Hi, just starting trying to use this plugin and have a question, which may be my usage. I have the following
{{{
[{Table  headerStyle  : 'background-color: Blue; text-align: center;'
         dataStyle    : 'text-align: center;'
         evenRowStyle : 'background: #c6c6c6;'  
         oddRowStyle  : 'background:#dddddd;'

||Started || Ended
|6/6/2006 | 6/20/2006
|6/20/2006 | 7/4/2006
|7/4/2006 | 7/18/2006
|7/18/2006 | 8/1/2006
}]
}}}
but the alternating colors do not appear to work in Firefox.  It seems fine in IE7.  Both the odd and even styles get rendered in the cell: so a td entry has one style for text-align, one for even background and one for odd background.

Here's the results below:
{{{      
<table border='1' class='wikitable'> 
<tr>
<th style="background-color: Blue; text-align: center;">Started </th>
<th style="background-color: Blue; text-align: center;"> Ended</th>
</tr>
<tr>
<td style="text-align: center; ">6/6/2006 </td>
<td style="text-align: center; "> 6/20/2006</td>
</tr>
<tr>

<td style="text-align: center; " style="background:#dddddd;" style="background: #c6c6c6;">6/20/2006 </td>
<td style="text-align: center; " style="background:#dddddd;" style="background: #c6c6c6;"> 7/4/2006</td>
</tr>
<tr>
<td style="text-align: center; ">7/4/2006 </td>
<td style="text-align: center; "> 7/18/2006</td>
</tr>
<tr>
<td style="text-align: center; " style="background:#dddddd;" style="background: #c6c6c6;">7/18/2006 </td>
<td style="text-align: center; " style="background:#dddddd;" style="background: #c6c6c6;"> 8/1/2006</td>

</tr>
</table>
}}}
Am I doing something wrong?

--[Mike Miller|mailto:mike.miller@jda.com], 15-Jun-2006