History: PluginFancyTable
Preview of version: 51
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:
{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}
{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:
{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:
{FANCYTABLE( head=" Type | Value ")} \\Vegetable | onions carrots \\\Fruits | lemons tomatoes strawberries {FANCYTABLE}
Would produce:
| Type | Value |
|---|---|
| Vegetable | onions |
| carrots | |
| Fruits | lemons |
| tomatoes | |
| strawberries |
Multiple live filtering
Since Tiki12, when you set sortable to y, you also get a line with fields to filter your data by matching a search string in one or more columns.
Example from http://i18n.tiki.org/Status :
Content is like:
{FANCYTABLE(head="Language code (ISO)|English name|Native Name|Completion|Percentage|Number of strings", sortable="y")} ar | Arabic | العربية | {gauge value="2,29" size="100" showvalue="false"} | 2,29% | Total: 14923 %%% Translated: 341 %%% Untranslated: 14582 bg | Bulgarian | български език | {gauge value="0,01" size="100" showvalue="false"} | 0,01% | Total: 14922 %%% Translated: 2 %%% Untranslated: 14920 ca | Catalan | Català | {gauge value="39,22" size="100" showvalue="false"} | 39,22% | Total: 14996 %%% Translated: 5882 %%% Untranslated: 9114 ... {FANCYTABLE}
The table upper paert looks like this:
Then you can sort by one or more columns, and filter you results by searching for some string in one or more columns. In the example below, sorted by one column ("Percentage"), and filtered by content in another column ("Native name" containing "de"):
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