TWiki/TablePlugin.mdwn

   1 # <a name="Table Plugin"></a> Table Plugin
   2
   3 Gives extra control of table display:
   4
   5 - Allows sorting
   6 - Changing table properties like border width, cell spacing and cell padding
   7 - Changing background color for header cells
   8 - Changing background color for data cells - colors can _alternate_
   9 - Behaviour can be specified for a specific table using %TABLE\{...\}% or with global preferences
  10
  11 ## <a name="%TOPIC% Global Settings"></a> %TOPIC% Global Settings
  12
  13 Plugin settings are stored as preferences variables. To reference a plugin setting write <code>**%&lt;plugin&gt;\_&lt;setting&gt;%**</code>, for example, <code>**%INTERWIKIPLUGIN\_SHORTDESCRIPTION%**</code>
  14
  15 - One line description, shown in the [[TextFormattingRules]] topic:
  16   - Set SHORTDESCRIPTION = Control attributes of tables and sorting of table columns
  17
  18 - Set DEBUG to 1 to get debug messages in `data/debug.txt`. Default: `0`
  19   - Set DEBUG = 0
  20
  21 - Table border width. Default: 1
  22   - Set TABLEBORDER = 1
  23
  24 - Table cell padding. Default: 0
  25   - Set CELLPADDING = 0
  26
  27 - Table cell spacing. Default: 1
  28   - Set CELLSPACING = 1
  29
  30 - Vertical alignment of cells. Set to: `top`, `middle`, `bottom` or `baseline`; default: (empty)
  31   - Set VALIGN =
  32
  33 - Table header cell alignment. Set to: `left`, `center`, `right` or `justify`; default: (empty)
  34   - Set HEADERALIGN =
  35
  36 - Table data cell alignment. Set to: `left`, `center`, `right` or `justify`; default: (empty)
  37   - Set DATAALIGN =
  38
  39 - Color for header cells ('\*'s around text). Default: <span>\#99CCCC</span>
  40   - #Set HEADER\_BG = red
  41
  42 - Background color for table rows, two alternate colors. Default: <span>\#FFFFCC</span>,<span>\#FFFFFF</span>
  43   - Set DATA\_BG = #FFFFCC,#FFFFFF
  44
  45 - Make sortable:
  46   - #Set SORT = attachments
  47   - Set SORT = all
  48   - #Set SORT = none
  49
  50 ## <a name="Sorting"></a> Sorting
  51
  52 Click on column heading text to sort by a column. Initial column will be sorted in descending order, click again to get ascending order. The type of data in the cell is determined automatically:
  53
  54 - date if format is:
  55   - dd MMM YYY - hh:mm
  56   - dd-MMM-YY or dd-MM-YYYY (can be / or space in place of -)
  57   - MMM is Jan, Feb, etc
  58 - number is digits, with optional decimal point
  59 - otherwise treated as text
  60
  61 ## <a name="Per Table Settings"></a> Per Table Settings
  62
  63 On line before the table use `%TABLE{...}%`:
  64
  65 <table border="1" cellpadding="0" cellspacing="0" style="border-width: 1px">
  66   <tr>
  67     <th bgcolor="#6b7f93" maxcols="0" style=""><a href="http://localhost?sortcol=0;table=1;up=0#sorted_table" rel="nofollow" title="Sort by this column"><font color="#ffffff">Argument</font></a></th>
  68     <th bgcolor="#6b7f93" maxcols="0" style=""><a href="http://localhost?sortcol=1;table=1;up=0#sorted_table" rel="nofollow" title="Sort by this column"><font color="#ffffff">Comment</font></a></th>
  69     <th bgcolor="#6b7f93" maxcols="0" style=""><a href="http://localhost?sortcol=2;table=1;up=0#sorted_table" rel="nofollow" title="Sort by this column"><font color="#ffffff">Example</font></a></th>
  70   </tr>
  71   <tr>
  72     <td bgcolor="#ecf2f8" style=""><code>sort</code></td>
  73     <td bgcolor="#ecf2f8" style=""> Set table sorting <code>on</code> or <code>off</code></td>
  74     <td bgcolor="#ecf2f8" style=""><code>sort="on"</code></td>
  75   </tr>
  76   <tr>
  77     <td bgcolor="#ffffff" style=""><code>initsort</code></td>
  78     <td bgcolor="#ffffff" style=""> Column to sort initially (1 to number of columns) </td>
  79     <td bgcolor="#ffffff" style=""><code>initsort="2"</code></td>
  80   </tr>
  81   <tr>
  82     <td bgcolor="#ecf2f8" style=""><code>initdirection</code></td>
  83     <td bgcolor="#ecf2f8" style=""> Initial sorting direction for <code>initsort</code>, set to <code>up</code> or <code>down</code></td>
  84     <td bgcolor="#ecf2f8" style=""><code>initsort="down"</code></td>
  85   </tr>
  86   <tr>
  87     <td bgcolor="#ffffff" style=""><code>headerbg</code></td>
  88     <td bgcolor="#ffffff" style=""> Header cell background colour </td>
  89     <td bgcolor="#ffffff" style=""><code>headerbg="#99CCCC"</code></td>
  90   </tr>
  91   <tr>
  92     <td bgcolor="#ecf2f8" style=""><code>databg</code></td>
  93     <td bgcolor="#ecf2f8" style=""> Data cell background colour, a comma separated list. Specify <code>"none"</code> for no colour, that is to use the colour/background of the page the table is on. </td>
  94     <td bgcolor="#ecf2f8" style=""><code>databg="#C8CB8F,#DBDDB5"</code></td>
  95   </tr>
  96   <tr>
  97     <td bgcolor="#ffffff" style=""><code>tableborder</code></td>
  98     <td bgcolor="#ffffff" style=""> Table border width (pixels) </td>
  99     <td bgcolor="#ffffff" style=""><code>tableborder="2"</code></td>
 100   </tr>
 101   <tr>
 102     <td bgcolor="#ecf2f8" style=""><code>cellpadding</code></td>
 103     <td bgcolor="#ecf2f8" style=""> Cell padding (pixels) </td>
 104     <td bgcolor="#ecf2f8" style=""><code>cellpadding="0"</code></td>
 105   </tr>
 106   <tr>
 107     <td bgcolor="#ffffff" style=""><code>cellspacing</code></td>
 108     <td bgcolor="#ffffff" style=""> Cell spacing (pixels) </td>
 109     <td bgcolor="#ffffff" style=""><code>cellspacing="3"</code></td>
 110   </tr>
 111   <tr>
 112     <td bgcolor="#ecf2f8" style=""><code>valign</code></td>
 113     <td bgcolor="#ecf2f8" style=""> Vertical alignment of cells, set to <code>top</code>, <code>middle</code>, <code>bottom</code> or <code>baseline</code></td>
 114     <td bgcolor="#ecf2f8" style=""><code>valign="top"</code></td>
 115   </tr>
 116   <tr>
 117     <td bgcolor="#ffffff" style=""><code>headeralign</code></td>
 118     <td bgcolor="#ffffff" style=""> Header cell alignment, set to <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code>. Overrides individual cell settings </td>
 119     <td bgcolor="#ffffff" style=""><code>headeralign="left"</code></td>
 120   </tr>
 121   <tr>
 122     <td bgcolor="#ecf2f8" style=""><code>dataalign</code></td>
 123     <td bgcolor="#ecf2f8" style=""> Data cell alignment, set to <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code>. Overrides individual cell settings </td>
 124     <td bgcolor="#ecf2f8" style=""><code>dataalign="center"</code></td>
 125   </tr>
 126 </table>
 127
 128 All default to the global setting
 129
 130 ## <a name="Examples"></a> Examples
 131
 132 Line before table: `%TABLE{sort="on" tableborder="0" cellpadding="1" cellspacing="3" headerbg="#99CCCC" databg="#C8CB8F,#DBDDB5"}%`
 133
 134 <table border="0" cellpadding="1" cellspacing="3" style="border-width: 0px">
 135   <tr>
 136     <th bgcolor="#99CCCC" maxcols="0" style=""><a href="http://localhost?sortcol=0;table=2;up=0#sorted_table" rel="nofollow" title="Sort by this column"><font color="#ffffff">Num</font></a></th>
 137     <th bgcolor="#99CCCC" maxcols="0" style=""><a href="http://localhost?sortcol=1;table=2;up=0#sorted_table" rel="nofollow" title="Sort by this column"><font color="#ffffff">Status</font></a></th>
 138     <th bgcolor="#99CCCC" maxcols="0" style=""><a href="http://localhost?sortcol=2;table=2;up=0#sorted_table" rel="nofollow" title="Sort by this column"><font color="#ffffff">Action</font></a></th>
 139     <th bgcolor="#99CCCC" maxcols="0" style=""><a href="http://localhost?sortcol=3;table=2;up=0#sorted_table" rel="nofollow" title="Sort by this column"><font color="#ffffff">Who</font></a></th>
 140     <th bgcolor="#99CCCC" maxcols="0" style=""><a href="http://localhost?sortcol=4;table=2;up=0#sorted_table" rel="nofollow" title="Sort by this column"><font color="#ffffff">When</font></a></th>
 141     <th bgcolor="#99CCCC" maxcols="0" style=""><a href="http://localhost?sortcol=5;table=2;up=0#sorted_table" rel="nofollow" title="Sort by this column"><font color="#ffffff">Progress</font></a></th>
 142   </tr>
 143   <tr>
 144     <td bgcolor="#C8CB8F" style=""> 1 </td>
 145     <td bgcolor="#C8CB8F" style=""> C </td>
 146     <td bgcolor="#C8CB8F" style=""> Chose new colours </td>
 147     <td bgcolor="#C8CB8F" style=""> John </td>
 148     <td bgcolor="#C8CB8F" style=""> 1-Dec-02 </td>
 149     <td bgcolor="#C8CB8F" style="">   </td>
 150   </tr>
 151   <tr>
 152     <td bgcolor="#DBDDB5" style=""> 2 </td>
 153     <td bgcolor="#DBDDB5" style=""> X </td>
 154     <td bgcolor="#DBDDB5" style=""> Release </td>
 155     <td bgcolor="#DBDDB5" style=""> John </td>
 156     <td bgcolor="#DBDDB5" style=""> 1-Apr-02 </td>
 157     <td bgcolor="#DBDDB5" style="">   </td>
 158   </tr>
 159   <tr>
 160     <td bgcolor="#C8CB8F" style=""> 3 </td>
 161     <td bgcolor="#C8CB8F" style="">   </td>
 162     <td bgcolor="#C8CB8F" style=""> Get feedback </td>
 163     <td bgcolor="#C8CB8F" style=""> Anne </td>
 164     <td bgcolor="#C8CB8F" style=""> 1-Feb-02 </td>
 165     <td bgcolor="#C8CB8F" style="">   </td>
 166   </tr>
 167   <tr>
 168     <td bgcolor="#DBDDB5" style=""> 12 </td>
 169     <td bgcolor="#DBDDB5" style=""> C </td>
 170     <td bgcolor="#DBDDB5" style=""> Spec error handling </td>
 171     <td bgcolor="#DBDDB5" style=""> Jack </td>
 172     <td bgcolor="#DBDDB5" style=""> 1-Dec-02 </td>
 173     <td bgcolor="#DBDDB5" style="">   </td>
 174   </tr>
 175   <tr>
 176     <td bgcolor="#C8CB8F" style=""> 5 </td>
 177     <td bgcolor="#C8CB8F" style="">   </td>
 178     <td bgcolor="#C8CB8F" style=""> Abc </td>
 179     <td bgcolor="#C8CB8F" style=""> John </td>
 180     <td bgcolor="#C8CB8F" style="">   </td>
 181     <td bgcolor="#C8CB8F" style="">   </td>
 182   </tr>
 183 </table>
 184
 185 ## <a name="Plugin Installation Instructions"></a> Plugin Installation Instructions
 186
 187 **Note:** You do not need to install anything on the browser to use this plugin. Below installation instructions are for the administrator who needs to install this plugin on the TWiki server.
 188
 189 - Download the ZIP file from the Plugin web (see below)
 190 - Unzip <code>**%TOPIC%.zip**</code> in your twiki installation directory. Content: <table border="1" cellpadding="0" cellspacing="0" style="border-width: 1px">
 191   <tr>
 192     <th bgcolor="#6b7f93" maxcols="0" style=""><a href="http://localhost?sortcol=0;table=3;up=0#sorted_table" rel="nofollow" title="Sort by this column"><font color="#ffffff">File:</font></a></th>
 193     <th bgcolor="#6b7f93" maxcols="0" style=""><a href="http://localhost?sortcol=1;table=3;up=0#sorted_table" rel="nofollow" title="Sort by this column"><font color="#ffffff">Description:</font></a></th>
 194   </tr>
 195   <tr>
 196     <td bgcolor="#ecf2f8" style=""><code><b>data/TWiki/%TOPIC%.txt</b></code></td>
 197     <td bgcolor="#ecf2f8" style=""> Plugin topic </td>
 198   </tr>
 199   <tr>
 200     <td bgcolor="#ffffff" style=""><code><b>data/TWiki/%TOPIC%.txt,v</b></code></td>
 201     <td bgcolor="#ffffff" style=""> Plugin topic repository </td>
 202   </tr>
 203   <tr>
 204     <td bgcolor="#ecf2f8" style=""><code><b>lib/TWiki/Plugins/%TOPIC%.pm</b></code></td>
 205     <td bgcolor="#ecf2f8" style=""> Plugin Perl module </td>
 206   </tr>
 207   <tr>
 208     <td bgcolor="#ffffff" style=""><code><b>pub/TWiki/%TOPIC%/diamond.gif</b></code></td>
 209     <td bgcolor="#ffffff" style=""> Diamond symbol </td>
 210   </tr>
 211   <tr>
 212     <td bgcolor="#ecf2f8" style=""><code><b>pub/TWiki/%TOPIC%/down.gif</b></code></td>
 213     <td bgcolor="#ecf2f8" style=""> Down arrow </td>
 214   </tr>
 215   <tr>
 216     <td bgcolor="#ffffff" style=""><code><b>pub/TWiki/%TOPIC%/up.gif</b></code></td>
 217     <td bgcolor="#ffffff" style=""> Up arrow </td>
 218   </tr>
 219 </table>
 220 - Test if the plugin is correctly installed:
 221   - Check above example if the table renders as expected
 222   - Try click on heading to sort. Other tables should also be sortable
 223
 224 ## <a name="Plugin Info"></a> Plugin Info
 225
 226 <table border="1" cellpadding="0" cellspacing="0" style="border-width: 1px">
 227   <tr>
 228     <td align="right" bgcolor="#ecf2f8" style=""> Plugin Author: </td>
 229     <td bgcolor="#ecf2f8" style="">[[TWiki/JohnTalintyre]], [[TWiki/PeterThoeny]]</td>
 230   </tr>
 231   <tr>
 232     <td align="right" bgcolor="#ffffff" style=""> Plugin Version: </td>
 233     <td bgcolor="#ffffff" style=""> 13 Mar 2002 </td>
 234   </tr>
 235   <tr>
 236     <td align="right" bgcolor="#ecf2f8" style=""> Change History: </td>
 237     <td bgcolor="#ecf2f8" style="">  </td>
 238   </tr>
 239   <tr>
 240     <td align="right" bgcolor="#ffffff" style=""> 05 Jun 2002: </td>
 241     <td bgcolor="#ffffff" style=""> PTh: Added "none" value to databg parameter (suggested by TWiki:Main/TaitCyrus); fixed sorting by stripping HTML tags, removing links and making sort ignore case (suggested by TWiki:Main/ShawnBradford) </td>
 242   </tr>
 243   <tr>
 244     <td align="right" bgcolor="#ecf2f8" style=""> 13 Mar 2002: </td>
 245     <td bgcolor="#ecf2f8" style=""> PTh: Added TWiki:Main/ShawnBradford 's initsort and initdirection </td>
 246   </tr>
 247   <tr>
 248     <td align="right" bgcolor="#ffffff" style=""> 12 Mar 2002: </td>
 249     <td bgcolor="#ffffff" style=""> PTh: Added valign, headeralign and dataalign; fixed bug of swapped cellpadding/cellspacing; fixed warning of uninitialized value </td>
 250   </tr>
 251   <tr>
 252     <td align="right" bgcolor="#ecf2f8" style=""> 05 Jan 2002: </td>
 253     <td bgcolor="#ecf2f8" style=""> PTh: Fixed sorting bug of cells with leading white space </td>
 254   </tr>
 255   <tr>
 256     <td align="right" bgcolor="#ffffff" style=""> 06 Dec 2001: </td>
 257     <td bgcolor="#ffffff" style=""> PTh: Fixed date sorting bug <br /> 03 Dec 2001 PTh: Fixed sort="off" bug and more </td>
 258   </tr>
 259   <tr>
 260     <td align="right" bgcolor="#ecf2f8" style=""> 29 Nov 2001: </td>
 261     <td bgcolor="#ecf2f8" style=""> PTh: Fixed Perl warnings </td>
 262   </tr>
 263   <tr>
 264     <td align="right" bgcolor="#ffffff" style=""> 16 Nov 2001: </td>
 265     <td bgcolor="#ffffff" style=""> PTh: Added table border, cell spacing, cell padding, gif files </td>
 266   </tr>
 267   <tr>
 268     <td align="right" bgcolor="#ecf2f8" style=""> 07 Oct 2001: </td>
 269     <td bgcolor="#ecf2f8" style=""> JT: Initial version </td>
 270   </tr>
 271   <tr>
 272     <td align="right" bgcolor="#ffffff" style=""> CPAN Dependencies: </td>
 273     <td bgcolor="#ffffff" style=""> none </td>
 274   </tr>
 275   <tr>
 276     <td align="right" bgcolor="#ecf2f8" style=""> Other Dependencies: </td>
 277     <td bgcolor="#ecf2f8" style=""> none </td>
 278   </tr>
 279   <tr>
 280     <td align="right" bgcolor="#ffffff" style=""> Perl Version: </td>
 281     <td bgcolor="#ffffff" style=""> 5.0 </td>
 282   </tr>
 283   <tr>
 284     <td align="right" bgcolor="#ecf2f8" style=""> Plugin Home: </td>
 285     <td bgcolor="#ecf2f8" style=""><a href="http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%" target="_top">http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%</a></td>
 286   </tr>
 287   <tr>
 288     <td align="right" bgcolor="#ffffff" style=""> Feedback: </td>
 289     <td bgcolor="#ffffff" style=""><a href="http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev" target="_top">http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev</a></td>
 290   </tr>
 291 </table>
 292
 293 **_Related Topics:_** [[TWikiPreferences]], [[TWikiPlugins]]
 294
 295 -- [[JohnTalintyre]] - 07 Oct 2001 <br /> -- [[PeterThoeny]] - 05 Jun 2002 <br />