History: PluginFancyTable
Preview of version: 50
Plugin FancyTable
This plugin displays the data using the Tiki odd/even table style. Settings allow the table to be sortable by multiple rows, cause rows to span multiple columns and vice versa, set individual column widths and align text horizontally and vertically.
Usage
The data (and the head parameter) is given one row per line, with columns separated by | (with version 4.0 and higher) or ~|~.
To display a fancy table in a wiki page, use the syntax:
Copy to clipboard
{FANCYTABLE(head=h1c1|h1c2|h1c3>>h2c1|h2c2|h2c3 , headclass= , headaligns=left|right|center|justify , headvaligns=top|middle|bottom|baseline , colwidths= , colaligns=left|right|center|justify , colvaligns=top|middle|bottom|baseline , sortable= , sortList= )}cells{FANCYTABLE}
Copy to clipboard
{FANCYTABLE(head=> ,headclass=> )}cells{FANCYTABLE}
Parameters
| Parameter | Accepted values | Effect | Optional | Since |
|---|---|---|---|---|
| head | text separated by | (starting with 4.0) or ~|~ (all versions) for each cell separate by >> for each header row (with 4.2) |
Creates specially formatted header cells and rows | optional | |
| (body - between FANCYTABLE tags) | text separated by | (starting with 4.0) or ~|~ (all versions) for each cell | Creates cells in the body of the table. Start a new line to start a new row. | required | |
| headclass | Any valid CSS class | Applies class styling to the header rows | optional | 2.0 |
| sortable | y or n | Makes rows sortable by column. See Prerequisites and Tips below for the features that must be activated for this to work. | optional | 4.0 |
| sortList | [0,1],[1,0]... Pairs of numbers for: [columnIndex, sortDirection],... where columnIndex is a zero-based index for the columns left-to-right, and sortDirection is 0 for ascending and 1 for descending. Example that sorts ascending first by column 1 and then column 2: [0,0],[1,0] |
Table is initially pre-sorted according to this setting. | optional | 4.0 |
| (in any cell) | one or more forward slashes (/) or backslashes (\) at the beginning of the cell | Cell will span the number of columns indicated by the number of forward slashes, and will span the number of rows indicated by the number of backslashes. | optional | 4.0 |
| headaligns colaligns |
left right center justify |
Aligns text horizontally in header columns (headaligns) or table body columns (colaligns). Separate setting for each column by a | | optional | 4.1 |
| headvaligns colvaligns |
top middle bottom baseline |
Aligns text vertically in header columns (headvaligns) or table body columns (colvaligns). Separate setting for each column by a | | optional | 4.1 |
| colwidths | number of pixels followed by 'px', or percent followed by '%', for each column separated by a | | Sets the width of the columns | optional | 4.1 |
Prerequisites and Tips
- The following must be enabled for the table sort to work:
- The Disable Javascript option at Admin Home > General > Logging and Reporting should be unchecked
- The JQuery Sortable Tables option at Admin Home > Features > Interface should be checked
- Sorting a table with cells that span multiple columns or rows can give unexpected results
- Starting with Tiki7, place any | or ~|~ that you don't want interpreted as cell dividers (or anyinside of the ~np~ and ~/np~ tags. Other tags and plugins within the table content that may have been buggy before should be handled properly with Tiki7.
Examples
Sortable Table
The sortlist parameter setting below causes the table to be sorted first by the first column and then by the second column.
This code:
Copy to clipboard
{FANCYTABLE( head=" Quantity | Vegetables | Fruits", sortable="y",sortList="[0,0],[1,0]")} 10 | onions | apples 10 | cucumbers | lemons 100 | carrots | oranges 10 | tomatoes | water melons 50 | peas | strawberries {FANCYTABLE}
Would produce:
| Quantity | Vegetables | Fruits |
|---|---|---|
| 10 | onions | apples |
| 10 | cucumbers | lemons |
| 100 | carrots | oranges |
| 10 | tomatoes | water melons |
| 50 | peas | strawberries |
Cells Spanning More Than One Row
This code:
Copy to clipboard
{FANCYTABLE( head=" Type | Value ")} \\Vegetable | onions carrots \\\Fruits | lemons tomatoes strawberries {FANCYTABLE}
Would produce:
| Type | Value |
|---|---|
| Vegetable | onions |
| carrots | |
| Fruits | lemons |
| tomatoes | |
| strawberries |
Related pages
- PluginSplit - arranges elements into an unformatted table
- Wiki Plugin
- JQuery
- http://tablesorter.com/docs/ - documentation for the JQuery plugin used for the sort features