This is version . It is not the current version, and thus it cannot be edited.
[Back to current version]   [Restore this version]

Table plugin#

This plugin implements additional table formatting for JSPWiki :

  • extra syntax to merge cells horizontally and/or vertically (aka colspan and rowspan)
  • multi-line table editing to ease the entry of complex table data, such as nested tables
  • additional formatting for odd/even rows, headers, etc.
  • auto-numbering of rows
  • client-side sorting of tables : now handled by BrushedTemplateSortableTables / 24 oct 05
--DF

Usage:#

[{Table <table-parameters>

... body with table definition, don't forget to put an empty line before this body
}]
or use the full syntax when your searchPath was not modified (see [How to install])
[{brushed.jspwiki.tableplugin.Table <table-parameters>

... body with table definition ...
}]

Table Plugin parameters :#

  • escape : <string> , escape special characters which normally are interpreted as table syntax. The first character after the 'escape string' will be passed unprocessed to the output. This also allows you to call other plugins inside table cells. (see example [3])
    The default 'escape' string is '~'.
  • 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;'

Table syntax#

The table plugin supports 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.

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 |d
   |#  |^ |b |^ |d
becomes
   +----+-------+-------+
   | Nr | A     | C     |
   +----+---+---+---+---+
   | 1  | a | b | c | d |
   +----+   +---+   +---+
   | 2  |   | b |   | d |

   +----+---+---+---+---+

Multi-line table editing#

This feature was implemented to overcome the limitation of having to edit a complete table row on a single line of text.

  • When the line contains only one cell, it is assumed that the table cell is continued on the next line. (this is multi-line table editing)
    • When the next line starts with '|' or '||', a new cell on the same row is started.
      Otherwise the line is added to the previous table cell
    • All subsequent lines starting with '| or '||' are merged into the same table row.
    • An empty line ends the table row.
  • When more than one table cell is encountered on the same line, single-line editing is assumed, using the standard wiki syntax.

This way, it should be more easy to have lots of text, and even wiki markup, merged into one table-cell. Table cells are listed underneath each other, similar to a bulleted list.

You can combine this multi line syntax with the '|<', '|^' and '#' stuff as well as mix it with the more compact standard wiki table syntax.

Example:

   || Heading 1 
   || Heading 2

   | ''Gobble'' starts a new row!
   * and some more text with wiki markup, all in the same table cell
   * and the name of this page [{$pagename}~]
   | Bar

   | [Main]     
   | [SandBox]

Table sorting#

When enclosing the table in %%sortable markers, the table becomes sortable. You need to install some javascript in your wiki template. See BrushedTemplateSortableTables for more info.


Installation Instructions [how to install]#

  • 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

Additional stuff when you want to use the table sort functionality

  • Copy tablesort.js to your template directory (e.g. templates/default/tablesort.js )
  • Add a reference to the tablesort.js in e.g. your templates/default/header.jsp file

       <script src="templates/<wiki:TemplateDir/>/cssinclude.js" type="text/javascript"></script>
       <script src="templates/<wiki:TemplateDir/>/tablesort.js" type="text/javascript"></script> <!-- add this line -->

SS - The latest distribution doesn't have a header.jsp -- it has a commonheader.jsp. Also, the relative URL shown doesn't work if you're using ShortViewURLConstructor -- I suggest inserting <wiki:BaseURL/> at the beginning, like this:
<script src="<wiki:BaseURL/>templates/<wiki:TemplateDir/>/tablesort.js" type="text/javascript"></script> 
  • Add following css to the jspwiki.css located in that same template directory.
    Note: when sort is on, the header cells located on the first row, are encapsulated inside a THEAD element. The arrow class is used to display an up or down arrow indicating the sort direction of the column which was clicked.
  .arrow { font-family: webdings; 
           font-weight: normal;  // be careful, dont remove
           color:       black; 
           overflow:    hidden;
         }
  .wikitable thead td,
  .wikitable th { /*give same formatting to header cells */ }
  .sortable thead { cursor:pointer; }


Discussion#

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


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] -- DF
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

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

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
  .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


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
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

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


Excellent Plugin!

Just one thing:

  • The tilde (~) for ignoring CamelCase is ignored. Any Ideas?

Thanks -- GP

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


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

Add new attachment

Only authorized users are allowed to upload new attachments.

List of attachments

Kind Attachment Name Size Version Date Modified Author Change note
jar
Table.jar 6.6 kB 10 06-Nov-2008 22:40 Dirk Frederickx Reset to v0.3
java
Table.java 15.6 kB 11 06-Nov-2008 22:41 Dirk Frederickx Reset to v0.3
gif
anchorLightBG.gif 0.1 kB 1 21-Feb-2006 17:59 206.17.172.5
« This particular version was published on 06-Feb-2006 20:17 by Dirk Frederickx.