History: PluginFancyTable

Source of version: 98 (current)

! Plugin Fancy Table
Use this ((wiki plugin)) to display data using the 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. Beginning with ((Tiki12)) add sorting, filtering and pagination using the ((tablesorter)) parameters (separate tab below).

!! Parameters
{TABS(tabs="General|Tablesorter")}
{pluginmanager plugin="fancytable" paramtype="none"}
/////
{pluginmanager plugin="fancytable" paramtype="tablesorter" showtopinfo="n"}
{TABS}
!!! Prerequisites and Tips
* In order to use tablesorter,
** Javascript must be enabled (enabled by default at __Control Panels > Features > Programmer (tab)__
** jQuery Sortable Tables must be activated (at __Control Panels > Features > Interface (tab)__
* Sorting a table with cells that span multiple columns or rows can give unexpected results
* Any -+|+- that you don't want interpreted as cell dividers may need to be placed inside of the -+~126~~110~~112~~126~+- and -+~126~~47~~110~~112~~126~+- tags, or using the -+~|~+- cell dividers may help.
!! Examples
!!! Sorting, Filtering and Paginating
There are a number of options that allow the user to filter, sort and paginate a table. Below is an example that demonstrates many of these options.

''This code:''
{CODE(colors="tiki")}{FANCYTABLE(head=" Fruit | Number | Vegetables | Date | Amount" sortable="type:reset" sortList="[0,0],[1,0]" tsortcolumns="type:text;group:letter|type:digit;group:number|type:word;group:word|type:shortDate;group:date-year|type:digit;group:number-10" tsfilters="type:text;placeholder:Type to filter...|type:range;from:0;to:200|type:dropdown|type:date|type:range;from:5;to:60;style:popup" tsfilteroptions="type:reset" tspaginate="max:5")}
apples|10 | onions | 2/1/2010|40
lemons|200 | cucumbers | 3/3/2011|50
oranges|100 | carrots | 4/3/2012|60
lemons |10| tomatoes|1/2/2011|30
berries |50 | peas|6/6/2011|55
apples|10 | onions | 2/1/2010|66
lemons|200 | cucumbers | 3/3/2011|66
oranges|100 | carrots | 4/3/2012|30
lemons |10| tomatoes|1/2/2011|22
berries |50 | peas|6/6/2011|77
apples|10 | onions | 2/1/2010|77
lemons|200 | cucumbers | 3/3/2011|34
oranges|100 | carrots | 4/3/2012|56
lemons |10| tomatoes|1/2/2011|67
berries |50 | peas|6/6/2011|78
apples|10 | onions | 2/1/2010|89
lemons|200 | cucumbers | 3/3/2011|12
oranges|100 | carrots | 4/3/2012|43
lemons |10| tomatoes|1/2/2011|32
berries |50 | peas|6/6/2011|76
apples|10 | onions | 2/1/2010|76
lemons|200 | cucumbers | 3/3/2011|87
oranges|100 | carrots | 4/3/2012|11
lemons |10| tomatoes|1/2/2011|22
berries |50 | peas|6/6/2011|6
{FANCYTABLE} 
{CODE}
''Would produce:''

{FANCYTABLE(head=" Fruit | Number | Vegetables | Date | Amount" sortable="type:reset" sortList="[0,0],[1,0]" tsortcolumns="type:text;group:letter|type:digit;group:number|type:word;group:word|type:shortDate;group:date-year|type:digit;group:number-10" tsfilters="type:text;placeholder:Type to filter...|type:range;from:0;to:200|type:dropdown|type:date|type:range;from:5;to:60;style:popup" tsfilteroptions="type:reset" tspaginate="max:5")}
apples|10 | onions | 2/1/2010|40
lemons|200 | cucumbers | 3/3/2011|50
oranges|100 | carrots | 4/3/2012|60
lemons |10| tomatoes|1/2/2011|30
berries |50 | peas|6/6/2011|55
apples|10 | onions | 2/1/2010|66
lemons|200 | cucumbers | 3/3/2011|66
oranges|100 | carrots | 4/3/2012|30
lemons |10| tomatoes|1/2/2011|22
berries |50 | peas|6/6/2011|77
apples|10 | onions | 2/1/2010|77
lemons|200 | cucumbers | 3/3/2011|34
oranges|100 | carrots | 4/3/2012|56
lemons |10| tomatoes|1/2/2011|67
berries |50 | peas|6/6/2011|78
apples|10 | onions | 2/1/2010|89
lemons|200 | cucumbers | 3/3/2011|12
oranges|100 | carrots | 4/3/2012|43
lemons |10| tomatoes|1/2/2011|32
berries |50 | peas|6/6/2011|76
apples|10 | onions | 2/1/2010|76
lemons|200 | cucumbers | 3/3/2011|87
oranges|100 | carrots | 4/3/2012|11
lemons |10| tomatoes|1/2/2011|22
berries |50 | peas|6/6/2011|6
{FANCYTABLE} 

{REMARKSBOX(type="tip" title="Tip")}''Shift-click on column headings to sort by multiple columns.''{REMARKSBOX}
!!! Automatic Totals
Automatic columns, row and table totals can be added. In addition to sums, the totals can be the count, max, min, mean, median, mode, range, varp, vars, stdevp, and stdevs (click [http://mottie.github.io/tablesorter/docs/example-widget-math.html#attribute_settings|here] for a description of these options). The number format can also be set to apply to all totals or specific formats for each.  The example below has all three types of totals (column, row and table) as well as variations showing totals based on whether values are hidden or not, including due to filtering.

''This code:''
{CODE(colors="tiki")}
{FANCYTABLE(head=" Fruit | Number | Vegetables |  Amount" sortable="type:reset" sortList="[0,0],[1,0],[2,y],[3,y],[4,n]" colaligns="left|right|left|right" tsortcolumns="type:text|type:digit|type:word|type:digit" tsfilters="type:text;placeholder:Type to filter...|type:range;from:0;to:200|type:dropdown|type:range;from:5;to:60;style:popup" tsfilteroptions="type:reset" tspaginate="max:5" tstotals="type:col|type:col;filter:hidden|type:col;filter:all|type:all|type:all;filter:hidden|type:all;filter:all|type:row" tstotaloptions="ignore||ignore|" tstotalformat="#,###.")}
apples|10 | onions | 40
lemons|200 | cucumbers | 50
... (leaving out some rows for illustration)
lemons |10| tomatoes|22
berries |50 | peas|6
{FANCYTABLE}{CODE}
''Would produce:''

{FANCYTABLE(head=" Fruit | Number | Vegetables |  Amount" sortable="type:reset" sortList="[0,0],[1,0],[2,y],[3,y],[4,n]" colaligns="left|right|left|right" tsortcolumns="type:text|type:digit|type:word|type:digit" tsfilters="type:text;placeholder:Type to filter...|type:range;from:0;to:200|type:dropdown|type:range;from:5;to:60;style:popup" tsfilteroptions="type:reset" tspaginate="max:5" tstotals="type:col|type:col;filter:hidden|type:col;filter:all|type:all|type:all;filter:hidden|type:all;filter:all|type:row" tstotaloptions="ignore||ignore|" tstotalformat="#,###.")}
apples|10 | onions | 40
lemons|200 | cucumbers | 50
oranges|100 | carrots | 60
lemons |10| tomatoes|30
berries |50 | peas|55
apples|10 | onions | 66
lemons|200 | cucumbers | 66
oranges|100 | carrots | 30
lemons |10| tomatoes|22
berries |50 | peas|77
apples|10 | onions |77
lemons|200 | cucumbers |34
oranges|100 | carrots | 56
lemons |10| tomatoes|67
berries |50 | peas|78
apples|10 | onions | 89
lemons|200 | cucumbers | 12
oranges|100 | carrots | 43
lemons |10| tomatoes|32
berries |50 | peas|76
apples|10 | onions |76
lemons|200 | cucumbers | 87
oranges|100 | carrots | 11
lemons |10| tomatoes|22
berries |50 | peas|6
{FANCYTABLE} 
!!! Multiple live filtering
In a simpler example, all you need to do is set -+sortable+- to -+y+-, in addition to being able to sort each column, 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] :
''This code:''
{CODE(colors="tiki")}
{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}
{CODE}

''Would produce (upper part):''

{img src="display849" link="display849" width="600" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"}

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"):

{img src="display850" link="display850" width="600" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"}
!!! Cells Spanning More Than One Row Or More Than One Col
If the cell begins with (multiple) \, then the cell spans (multiple) rows. Define lesser cols in the following rows.
If the cell begins with (multiple) /, then the cell spans (multiple) cols. Define lesser cols in this row.

''This code:''
{CODE(colors="tiki")}
{FANCYTABLE( head=" Col 1 | Col 2 ")}
\\1,1 (spans 2 rows)|1,2
2,2
//3,1 (spans 2 cols)
{FANCYTABLE}
{CODE}

''Would produce:''
{FANCYTABLE( head=" Col 1 | Col 2 ")}
\\1,1 (spans 2 rows)|1,2
2,2
//3,1 (spans 2 cols)
{FANCYTABLE}

!! Related pages
* ((PluginSplit)) - arranges elements into an unformatted table
* ((jQuery))
* ((Tablesorter)) - jQuery plugin used for sorting, filtering and pagination features
* [http://mottie.github.io/tablesorter/docs/] - documentation for the jQuery plugin used for the sorting, filtering and pagination features
History: PluginFancyTable

Source of version: 98 (current)

About Tiki

Support

Community

Documentation

Development

Legal

Tiki Project Sites

Networks

Navigation and related functionality and content

Related content

History: PluginFancyTable

Source of version: 98 (current)

Related content
