Table Sorter Snippet
XWiki has the ability to turn basic tables in advanced tables featuring filters and the ability to automatically sort columns.
It works the following way:
- You write a basic html table
- You set its class as "grid sortable filterable doOddEven"
- You set the header row class as "sortHeader"
- You can change the filter type of a column by setting its class to "selectFilter"
- Do not forget to close all your table elements properly :-)
Warning: This snippet works only from XWiki Enterprise 1.0 onwards
Code (xwiki/2.0 syntax)
{{velocity}}
$xwiki.jsfx.use("js/xwiki/table/tablefilterNsort.js")
$xwiki.ssfx.use("js/xwiki/table/table.css")
{{/velocity}}
{{html}}
<table id="ChooseYourTableID" class="grid sortable filterable doOddEven" cellpadding="0" cellspacing="0" border="0">
<tr class="sortHeader">
<th>Header 1</th>
<th class="selectFilter">Header 2 with a select filter</th>
<th>Header 3</th>
</tr>
<tr>
<td>Content of row 1, column 1</td>
<td>Content of row 1, column 2</td>
<td>Content of row 1, column 3</td>
</tr>
</table>
{{/html}}Code (xwiki/1.0 syntax)
$xwiki.jsfx.use("js/xwiki/table/tablefilterNsort.js")
$xwiki.ssfx.use("js/xwiki/table/table.css")
<table id="ChooseYourTableID" class="grid sortable filterable doOddEven" cellpadding="0" cellspacing="0" border="0">
<tr class="sortHeader">
<th>Header 1</th>
<th class="selectFilter">Header 2 with a select filter</th>
<th>Header 3</th>
</tr>
<tr>
<td>Content of row 1, column 1</td>
<td>Content of row 1, column 2</td>
<td>Content of row 1, column 3</td>
</tr>
</table>Result
| Content of row 1, column 1 |
Content of row 1, column 2 |
Content of row 1, column 3 |
You can also see examples of tables using this feature on the following pages:
