User:Tcncv/Table Sort Demo

This page contains several tables used to demonstrate proposed colspan/rowspan enhancements to Wikipedia table sorting functions. To view the enhancements in operation, you must add importScript('User:Tcncv/sorttables.js'); to your monobook.js file (or appropriate xxx.js file for your chosen skin).

In addition to these tables, you can try the functionality on your own tables (on a suitable test page - not mainspace) by adding class="wikitable tsx_sortable" to the table header. The class="autorowspan" attribute can also be added to columns or the entire table to maximize cell merge operations.

Another example: 2008 Olympics Medal table
Note that the Rank column has a number of merged cells, but when the table is sorted, they are split, so that the table layout is not corrupted. If you sort by Rank again, previously merged cells are recombined. Also, if you sort a number of adjacent columns right to left (uch as Bronze, Silver, then Gold), cells are merged in all these columns. (That may not be desirable in all cases, but for this example, its been enabled.)

Another example: 2008 Olympics Medal table (with multirow header)
Note that the Rank column has a number of merged cells, but when the table is sorted, they are split, so that the table layout is not corrupted. If you sort by Rank again, previously merged cells are recombined. Also, if you sort a number of adjacent columns right to left (uch as Bronze, Silver, then Gold), cells are merged in all these columns. (That may not be desirable in all cases, but for this example, its been enabled.)

What happens when rowspan and colspan conflict
Overlapping row spans and column spans are invalid in HTML and are not supported by the updated sortable script. These examples are included just to see how they render.

Examples from Help talk:Sorting
... plus a small sample of mainspace articles that currently have sorting problems.

Example 1
From Statewide opinion polling for the Democratic Party presidential primaries, 2008 referenced from Help talk:Sorting.

Demonstrates multi-row headers with rowspans and fixed (unsortable) footer.

Example 2
Example from Help talk:Sorting

Demonstrates multi-row headers with rowspans and colspans.

Example 3
From List of Colorado Avalanche players referenced from m:Help talk:Sorting.

Demonstrates multi-row headers with rowspans and colspans.

Example 4
From Comparison of email clients referenced from m:Help talk:Sorting.

Demonstrates multi-row headers with rowspans and colspans. Sort icons are suppressed on some header cells. Also changed "sortbottom" to "unsortable" to stablize the footer rows.

Example 5
From Anamorphosée

Demonstrates multi-row headers with rowspans and colspans and rowspans in the data.

Example 6
From In Blue

Demonstrates rowspans in the data.

Example 7
From List of British Columbia senators

Demonstrates a colspan in the header that previously caused sort icons to sort the wrong columns.

Example 8
From TV Land Award

Demonstrates rowspans in the data.

Example 9
From Eurovision Song Contest winners

Demonstrates rowspans in the data and the use of unsortable and autorowspan column options added by other editors.

(Note: Editors of that article has already marked up the table, even though this functionality is not yet generally available.)


 * }

Mix of colspans and rowspans
The following data is not real, it has been adapted/fabricated to test assorted complex rowspan/colspan combinations. Note that the data in the first set of columns matches the data in the second set.

An example from MediaWiki talk:Common.js
Another table with a header containing rowspan and colspan from this discussion.