Editing Help:Sorting

{{languages}}
{{H:h}}
[[Help:Table|Tables]] can be made {{mlw|sorting||sortable}} via [[w:client-side JavaScript|client-side JavaScript]] with <code>class="sortable"</code> (in combination with the usual formatting: <code>class="wikitable sortable"</code>). This works in MediaWiki 1.9 and above, which is installed in all Wikimedia projects. 

A table that is sortable is identified by arrows to the right of the header in a header cell. A sortable table may be sortable by one or more columns in the table. Clicking an arrow sorts the table rows based on the selected column. Repeated clicking of an arrow changes the sort state in this sequence: Ascending, Descending, Unsorted.

Shift-clicking the arrows of other columns will trigger a secondary sort based on the most recent column on which the shift-click occurred. NB: Shift-clicking capability extends to tertiary and beyond.

Links and other wiki-markup are not possible in headers.

== JavaScript ==

The JavaScript code [https://phabricator.wikimedia.org/source/mediawiki/browse/master/resources/src/jquery.tablesorter/jquery.tablesorter.js jquery.tablesorter.js (source)] of the tablesorter is loaded by the ResourceLoader. Some sites may have a page [[MediaWiki:Common.js]] which adds and overrides some code. Browsers need to support JavaScript and it needs to be enabled for sorting to work.

== Sort modes == 
The way items are sorted depends on the [[w:data type|data type]] of the first rows. To determine the data type, the first 5 non-blank rows below the header are tested after loading the page and the most appropriate format is chosen. Mismatches are possible. The sort order of a column can be forced. See the relevant section farther [[#Forcing the sort mode for a column|down]]. 

Tags such as ''span'' or ''sup'' are ignored when determining data type, but reference numbers and additional visible comments are not ignored today. 

=== Dates ===

Various date formats are supported, including those with localized month names.
On the German Wikipedia, "16. März 2010" is correctly sorted as 2010-03-16

Most other numerical formats are supported as well, including those with different separators (such as . , ' or / );
On English Wikipedias dates are treated as US-Dates (eg. month-day-year) per default.

=== Numbers ===

The script can recognize numbers with different decimal separators (. and ,) as well as e/E numbers. However, numbers will be sorted alphanumerically (with 9 sorted after 10) unless this default behaviour is overridden. (See below.)

=== Text ===

Text is compared at client-side JavaScript since July 2019 ([https://phabricator.wikimedia.org/rMW1fed6d003dd05efabe38bf5bb8ee3de02fe0481a Commit])  with Intl.Collator. This sort accented characters depend on <code>PageContentLanguage</code> correctly. 
But sort of special characters is depend on Browser implementation. Example for Intl.Collator(de):
 Firefox52.9: _-—,;:!?.'"()[]{}§@*/\&#%^+±<=>|~∞¢$£¥€0…9²³aä…eé…ö…ß…ü…z
 IE11:      '-—!"#$%&()*,./:;?@[\]^_{|}~¢£¥€+<=>±≤≥§♠0²³9∞aä…eé…ö…ß…ü…z

Only Android systems use the old sort mode with [[w:UTF-16|UTF-16]] coded characters. Any accented/special characters follow after the basic latin alphabet. This can be changed site wide by posting code like the following inside the [[MediaWiki:Common.js]]:
<pre>
mw.config.set('tableSorterCollation', {'ä':'a', 'ß':'ss', 'þ':'th', 'aa':'å'});
</pre>
Afterwards, all 'Ä' and 'ä' will be sorted as if they were an 'a' etc.
Partial list showing the default order:<br>'''<code>! " # $ % & ' ( ) * + , - . / 0 9 : ; < = > ? @ [ \ ] ^ _ ` A Z a z { | } ~ É é &mdash;</code>'''
* See: [[#Basic alphabetic sorting order]]
* See also: [https://www.mediawiki.org/wiki/Help:Sorting#Sort_order MediaWiki:Help:Sorting#Sort order] (here capital letters like A–Z are sorted after @)

=== Forcing the sort mode for a column ===

The sort mode can be manually specified by putting <code>data-sort-type="…"</code> inside the header of the respective row. This functionality is based on [https://web.archive.org/web/20180924065055/http://tablesorter.com/docs/ tablesorter.com (webarchive)]. The following (case-insensitive) values are valid for data-sort-type:
*text
*number
*IPAddress
*currency
*url
*isoDate
*usLongDate
*date
*time

Example: 

 <nowiki>{|</nowiki>class="wikitable sortable"
 <nowiki>!</nowiki><b style="color:red">data-sort-type="date"</b><nowiki>|Date!!Name!!Height!!</nowiki><b style="color:red">data-sort-type="number"</b><nowiki>|Salary</nowiki>
 <nowiki>|-</nowiki>
 <nowiki>|01.10.1977||Smith||1.85||1,000.000</nowiki>
 <nowiki>|-</nowiki>
 <nowiki>|11.6.1972||Ray||1.89||900.000</nowiki>
 <nowiki>|-</nowiki>
 <nowiki>|1.9.1992||Bianchi||1.72||2,000.50</nowiki>
 <nowiki>|}</nowiki>

{|class="wikitable sortable"
! data-sort-type="date" | Date!!Name!!Height!!data-sort-type="number" |Salary
|-
|01.10.1977||Smith||1.85||1,000.000
|-
|11.6.1972||Ray||1.89||900.000
|-
|1.9.1992||Bianchi||1.72||2,000.50
|}

== Specifying a sort key ==

Sometimes the value of a cell is not correctly parsed or one wants to sort the row in a special way. (e.g. a cell containing 'John Smith' should actually be sorted as 'Smith' and not as 'John')
This can be easily achieved by setting the <code>data-sort-value</code> attribute. 

Wiki markup:

 <nowiki>{|</nowiki>class="wikitable sortable"
 !Name and Surname!!Height
 <nowiki>|</nowiki>-
 <nowiki>|</nowiki><b style="color:red">data-sort-value="Smith, John"</b>|John Smith||1.85
 <nowiki>|</nowiki>-
 <nowiki>|</nowiki><b style="color:red">data-sort-value="Ray, Ian"</b>|Ian Ray||1.89
 <nowiki>|</nowiki>-
 <nowiki>|</nowiki><b style="color:red">data-sort-value="Bianchi, Zachary"</b>|Zachary Bianchi||1.72
 <nowiki>|}</nowiki>

This gives:

{|class="wikitable sortable"
!Name and Surname!!Height
|-
|data-sort-value="Smith, John"|John Smith||1.85
|-
|data-sort-value="Ray, Ian"|Ian Ray||1.89
|-
|data-sort-value="Bianchi, Zachary"|Zachary Bianchi||1.72
|}

Note, however, that this makes use of a new feature in HTML5, which is enabled by default in MediaWiki (including WMF wikis since September 2012 cfr. [[bugzilla:27478]]).
The old version was to set hidden sort key with {{tiw|sort}}.
See also [[mw:Help:Sorting#Specifying a sort key|mediawiki.org]].

== Controlling sorting and display ==

If some Text undesired for sorting but needed for display, force the sort mode with <code>data-sort-type="…"</code> and write text ''after'' values (e.g. "200 approx", or reference tags "100<sup style="color:blue" title="link to Reference">[1]</sup>"). Empty cell is treated as "-Infinity" when sorting numerically. <!-- See e.g. [[Help:Sorting/countries]]. --> 

In the case of a cell containing a range of dates or numbers (e.g. from 2 to 5), specify a <code>data-sort-value="…"</code>.

== Examples ==

The first column demonstrates how plain numbers are detected and sorted as numbers.
The second column shows that with <code>data-sort-type="number"</code> in table header more content detected as numbers.
The fourth column shows that with <code>data-sort-value="…"</code> a numeric sortvalue is defined, independent of the cell content. 
{|class="wikitable sortable"
! numbers !! data-sort-type="number"| <code>data-sort-type="number"</code> !!class="unsortable"| !! data-sort-type="number"| <code>data-sort-type="number"</code>
|-
| <span title="-8000">-8e3<span> || <span title="-8000">-8 e3<span> || || <span title="-8000">-8 e3<span>
|-
| <span title="-0.003">-3e-3</span> || <span title="-0.003">-3 e-3</span> || || <span title="-0.003">-3 e-3</span>
|-
| 2.000 || <span title="sorted as 2">2-5 km²</span> || <code>data-sort-value="3.5"</code> ||data-sort-value="3.5"| <span title="sorted as 3.5">2-5 km²</span>
|-
| 3.99 || 3.99 km² || || 3.99 km² 
|-
| 4 || 4 km² || || 4 km²
|-
| 90 % || 90 Percent || <code>data-sort-value="90"</code> ||data-sort-value="90"| about 90 Percent
|-
| <span title="100">1E2<span> || 100<sup style="color:blue" title="link to Reference">[1]</sup> ||  || 100<sup style="color:blue" title="link to Reference">[1]</sup>
|-
| 1,000,000.0  || 1 000 000.0  || <code>data-sort-value="1e6"</code> ||data-sort-value="1e6"| one Million
|}
The thousand separator(,) and digits separator(.) depends on language specific configuration of the Mediawiki software.
Currency symbols before or after numbers or the %-symbol will be sorted numerical. 
{|
|- style="vertical-align:top;"
|
{|class="wikitable sortable"
!currencies
|-
|$ 9
|-
|$ 80
|-
|$ 70
|-
|$ 600
|}
|
{|class="wikitable sortable"
!currencies
|-
|9 €
|-
|80 €
|-
|70 €
|-
|600 €
|}
|
{|class="wikitable sortable"
!currencies
|-
|£ 9
|-
|£ 80
|-
|£ 70
|-
|£ 600
|}
|
{|class="wikitable sortable"
!currencies
|-
|¥ 9
|-
|¥ 80
|-
|¥ 70
|-
|¥ 600
|}
|
{|class="wikitable sortable"
!percent
|-
|9 %
|-
|80 %
|-
|70 %
|-
|600 %
|}
|
{|class="wikitable sortable"
!numbers
|-
| −7e270
|-
| {{#expr:-.000000000001/7}}
|-
| 999e9
|-
| 7e270
|}
|}

== Secondary sort key ==

It is possible to sort by column A (primary sort key), while for equal values in column A, sort by column B (secondary sort key): first sort by A by clicking the sort button of column A once or twice, then, while holding the shift-key, click the sort button of column B once or twice.

Example:

First click on column Text and then, while holding the shift-key, on Numbers, you'll see that the ordering is on Text (1), Numbers (2).

{|class="wikitable sortable"
!Numbers!!Text!!Dates!!Currency!!More text
|-
|4||a||01.Jan.2005||4.20||row 1
|-
|5||a||05/12/2006||7.15||row 2
|-
|1||b||02-02-2004||5.00||row 3
|-
|1||a||02-02-2004||5.00||row 4
|-
|2||x||13-apr-2005||||row 5
|-
|2||a||13-apr-2005||||row 6
|-
|3||a||17.aug.2006||6.50||row 7
|-
|3||z||25.aug.2006||2.30||row 8
|-
|3||z||28.aug.2006||5.50||row 9
|-
|3||z||31.aug.2006||3.77||row 10
|-
|3||z||01.sep.2006||1.50||row 11
|-
!Bottom!!!!!!!!
|-
|}

== Additional features ==

=== Excluding the last row from sorting ===

Sometimes it is helpful to exclude the last row of a table from the sorting process.
This can be achieved by setting <code>class="sortbottom"</code> on the last row. Declaring the last row as a footer (with <code>!</code>) will also exclude it from sorting.

Wiki markup:

 <nowiki>{|</nowiki>class="wikitable sortable"
 <nowiki>!</nowiki>Name!!Surname!!Height
 <nowiki>|-</nowiki>
 <nowiki>|</nowiki>John||Smith||1.85
 <nowiki>|-</nowiki>
 <nowiki>|</nowiki>Ron||Ray||1.89
 <nowiki>|-</nowiki>
 <nowiki>|</nowiki>Mario||Bianchi||1.72
 <nowiki>|-</nowiki> <b style="color:red">class="sortbottom"</b>
 ! !!</b>Average:||1.82
 <nowiki>|}</nowiki>

What it looks like in your browser:

{|class="wikitable sortable"
!Name!!Surname!!Height
|-
|John||Smith||1.85
|-
|Ron||Ray||1.89
|-
|Mario||Bianchi||1.72
|-
! !!Average:||1.82
|}

=== Excluding the first row from sorting ===

The same can be applied for first rows as well, by setting <code>class="sorttop"</code>.

Wiki markup:

 <nowiki>{|</nowiki>class="wikitable sortable"
 <nowiki>!</nowiki>Name!!Surname!!Height
 <nowiki>|-</nowiki> <b style="color:red">class="sorttop"</b>
 ! !!Average:||1.82
 <nowiki>|-</nowiki>
 <nowiki>|</nowiki>John||Smith||1.85
 <nowiki>|-</nowiki>
 <nowiki>|</nowiki>Ron||Ray||1.89
 <nowiki>|-</nowiki>
 <nowiki>|</nowiki>Mario||Bianchi||1.72
 <nowiki>|}</nowiki>

{|class="wikitable sortable"
!Name!!Surname!!Height
|- class="sorttop"
! !!Average:||1.82
|-
|John||Smith||1.85
|-
|Ron||Ray||1.89
|-
|Mario||Bianchi||1.72
|}

=== Making a column unsortable ===

If you want a specific column not to be sortable, specify <code>class="unsortable"</code> in the attributes of its header cell.

Wiki markup:

 <nowiki>{|</nowiki>class="wikitable sortable"
 <nowiki>!</nowiki>Numbers!!Alphabet!!Dates!!Currency!!<b style="color:red">class="unsortable"|</b>Unsortable
 <nowiki>|-</nowiki>
 <nowiki>|</nowiki>1||Z||02-02-2004||5.00||This
 <nowiki>|-</nowiki>
 <nowiki>|</nowiki>2||y||13-apr-2005||||Column
 <nowiki>|-</nowiki>
 <nowiki>|</nowiki>3||X||17.aug.2006||6.50||Is
 <nowiki>|-</nowiki>
 <nowiki>|</nowiki>4||w||01.Jan.2005||4.20||Unsortable
 <nowiki>|-</nowiki>
 <nowiki>|</nowiki>5||V||05/12/2006||7.15||See?
 <nowiki>|-</nowiki>
 <nowiki>!</nowiki>Total: 15!!!!!!Total: 29.55!!
 <nowiki>|-</nowiki>
 <nowiki>|}</nowiki>

What it looks like in your browser:

{|class="wikitable sortable"
!Numbers!!Alphabet!!Dates!!Currency!!class="unsortable"|Unsortable
|-
|1||Z||02-02-2004||5.00||This
|-
|2||y||13-apr-2005||||Column
|-
|3||X||17.aug.2006||6.50||Is
|-
|4||w||01.Jan.2005||4.20||Unsortable
|-
|5||V||05/12/2006||7.15||See?
|-
!Total: 15!!!!!!Total: 29.55!![http://www.joostdevalk.nl/code/sortable-table/ Original example]
|-
|}

=== Keeping some rows together ===

If you want that a row will always be below the row just above it and will follow it around, no matter how the sorting is applied, specify <code>class="expand-child"</code> in the attribute of this row.

Wiki markup:

 <nowiki>{|</nowiki> class="wikitable sortable"
 <nowiki>!</nowiki> style="width:9em"| Country !!data-sort-type="number"| Area
 <nowiki>|-</nowiki>
 <nowiki>|</nowiki> France
 <nowiki>|</nowiki> 674 843 km²
 <nowiki>|-</nowiki> <b style="color:red">class="expand-child"</b> style="font-size:85%; line-height:1.2; color:gray"
 <nowiki>|</nowiki> colspan="2" | In Paris is the Eiffel Tower.
 <nowiki>|-</nowiki>
 <nowiki>|</nowiki> U.K.
 <nowiki>|</nowiki> 242 495 km²
 <nowiki>|-</nowiki> <b style="color:red">class="expand-child"</b> style="font-size:85%; line-height:1.2; color:gray"
 <nowiki>|</nowiki> colspan="2" | In the U.K. you cannot pay with euros.
 <nowiki>|-</nowiki> <b style="color:red">class="expand-child"</b> style="font-size:85%; line-height:1.2; color:gray"
 <nowiki>|</nowiki> colspan="2" | And you drive on the left side of the road.
 <nowiki>|-</nowiki>
 <nowiki>|</nowiki> Germany
 <nowiki>|</nowiki> 357 168 km² 
 <nowiki>|-</nowiki> <b style="color:red">class="expand-child"</b> style="font-size:85%; line-height:1.2; color:gray"
 <nowiki>|</nowiki> colspan="2" | Germany includes the former DDR.
 <nowiki>|}</nowiki>

What it looks like in your browser:

{| class="wikitable sortable"
!style="width:9em"| Country !!data-sort-type="number"| Area
|-
| France
| 674 843 km²
|- class="expand-child" style="font-size:85%; line-height:1.2; color:gray"
|colspan="2" | In Paris is the Eiffel Tower.
|-
| U.K.
| 242 495 km²
|- class="expand-child" style="font-size:85%; line-height:1.2; color:gray"
|colspan="2" | In the U.K. you cannot pay with euros.
|- class="expand-child" style="font-size:85%; line-height:1.2; color:gray"
|colspan="2" | And you drive on the left side of the road.
|-
| Germany
| 357 168 km² 
|- class="expand-child" style="font-size:85%; line-height:1.2; color:gray"
|colspan="2" | Germany includes the former DDR.
|}

If you put in ''data-sort-value'' the same content as above row, keep this rows also together. The original mutual order of these rows is preserved. A better way for this is class expand-child, see above [[#Keeping some rows together]].

Example where ''data-sort-value'' is used is the case for the rows about the Netherlands:

 <nowiki>{|class="wikitable sortable"
!Country/province!!Capital
|-
|France||Paris
|-
|Netherlands||Amsterdam
|-
|data-sort-value=Netherlands|South Holland||data-sort-value=Amsterdam|The Hague
|-
|U.K.||London
|}</nowiki>

{|class="wikitable sortable"
!Country/province!!Capital
|-
|France||Paris
|-
|Netherlands||Amsterdam
|-
|data-sort-value=Netherlands|South Holland||data-sort-value=Amsterdam|The Hague
|-
|U.K.||London
|}

== Special dates ==

For years BC we can use, for example, <code>!9937-09-23</code> for [[-0062-09-23]] (subtract the year number BC from 10000, or the absolute value of the astronomical year from 9999).

If a table column contains any or all incomplete dates, this will not cause sorting problems. If only a year and month are given, that incomplete date is positioned alphabetically before the first day of the month in question. Likewise, if only a year is given, the date is positioned before the first month or day given for that year.

=== Use of #time ===

Using parser function #time we can put <code><nowiki><span style="display:none">&{{#expr:3e11+{{#time:U|..}}}}</span></nowiki></code> in front of the displayed date. This works in the range 1 Jan 111, 00:00:00 through 31 Dec 9999, 23:59:59 for the [[w:Proleptic Gregorian calendar|proleptic Gregorian calendar]]. The added value makes all values positive and the same length (if scientific format would show up an additional step is needed to prevent this). The "&" forces string sort mode.

Dates and times can be entered in any [http://www.php.net/manual/en/datetime.formats.php php date/time format]. Note that when we have just a year, a month (typically Jan) must be added in the hidden part.

Example using [[Help:Sorting/date]]:
{|class="wikitable sortable"
!input date!!text!!date and time as interpreted, with hidden sort key!!input with visible sort key!!input with hidden sort key!!Unix time
|-
| || || || ||
{{Help:Sorting/date|010203}}
{{Help:Sorting/date|1/2}}
{{Help:Sorting/date|1/2/3}}
{{Help:Sorting/date|1-2-2003}}
{{Help:Sorting/date|1-2-3}}
{{Help:Sorting/date|2007}}
{{Help:Sorting/date|1 Jan 111, 00:00:00}}
{{Help:Sorting/date|31 Dec 9999, 23:59:59}}
{{Help:Sorting/date|Sep 1970}}
{{Help:Sorting/date|1970}}
{{Help:Sorting/date|Jun 2007| or later}}
{{Help:Sorting/date|Jun 2007| perhaps earlier}}
{{Help:Sorting/date|2007-6}}
{{Help:Sorting/date|Jun 2007}}
{{Help:Sorting/date|4 Jun 2007}}
{{Help:Sorting/date|3 Jul 2007}}
{{Help:Sorting/date|12 Aug 2006}}
{{Help:Sorting/date|1 Mar 2006 -1day}}
{{Help:Sorting/date|1 Mar 2008 -1day}}
{{Help:Sorting/date|1 Mar 2010 -1day}}
{{Help:Sorting/date|1 Mar 1900 -1day}}
{{Help:Sorting/date|1 Mar 1600 -1day}}
{{Help:Sorting/date|Jun 1607}}
{{Help:Sorting/date|{{CURRENTTIMESTAMP}}}} 
{{Help:Sorting/date|yesterday}} 
{{Help:Sorting/date|today}} 
{{Help:Sorting/date|tomorrow}} 
{{Help:Sorting/date|1week}} 
{{Help:Sorting/date|-1week}} 
{{Help:Sorting/date|1day}} 
{{Help:Sorting/date|-1day}} 
{{Help:Sorting/date|1month}} 
{{Help:Sorting/date|-1month}} 
{{Help:Sorting/date|1year}} 
{{Help:Sorting/date|-1year}} 
{{Help:Sorting/date|1000year}} 
{{Help:Sorting/date|10000month}} 
{{Help:Sorting/date|1000000day}} 
{{Help:Sorting/date|10000000hour}} 
{{Help:Sorting/date|1000000000minute}} 
{{Help:Sorting/date|100000000000second}} 
{{Help:Sorting/date|7980year}} 
{{Help:Sorting/date|-1890year}} 
{{Help:Sorting/date|Mon}} 
{{Help:Sorting/date|Tue}} 
{{Help:Sorting/date|Wed}} 
{{Help:Sorting/date|Thu}} 
{{Help:Sorting/date|Fri}} 
{{Help:Sorting/date|Sat}} 
{{Help:Sorting/date|Sun}} 
{{Help:Sorting/date|}}
{{Help:Sorting/date|unknown}}
|}

To use dates before the year 111, add a multiple of 400, e.g. 6000, to all years, this effectively shifts the range to  1 Jan -5889, 00:00:00 through 31 Dec 3999, 23:59:59, without changing the calendar.

See also:
*{{tiw|dts}} - sorting a table by a date column
*{{tim|sd}} - shows weekday in a separate column before date, and link all dates

== Cell spanning multiple rows/cells ==

A cell which spans more than one row or column is treated as if it were multiple cells with the same value.
{|
|
{|class="wikitable sortable"
|+ rowspan
! data-sort-type="date" | Date!!Name!!Height
|-
|01.10.1977||Smith||rowspan="2"|1.85
|-
|11.06.1972||Adams
|-
|01.09.1992||Bianchi||1.72
|}
| <div style="margin-left:3em">
{| class="wikitable sortable" 
|+ colspan
! A !! colspan="2" style="width:2.5em" | B !! C 
|- 
| A
| 2
| 1
|- 
| B
| colspan="2" | 1
| 3
|- 
| C
| colspan="3" | 2
|}

</div>
|}

As of MediaWiki Version [[mw:MediaWiki_1.26/wmf23| 1.26 wmf23]] (Sept. 2015), sorting of colspanned cells works correctly. Also, ''missing'' cells at the end of a row will change after first sort into cells with empty content. 

=== Colspanned cells ===

The auto-detection of [[#Sort modes|sort mode]] is done for colspanned cells for each column separately. Defining the sort mode by putting <code>data-sort-type</code> inside the header will specify this sort mode for all colspanned columns. 

To use separate sort keys for each column in a colspanned cell, use the CSS hack described here:
To allow sorting, the formal number of cells in each row should be equal (If not, all columns become sortable. This should apply at least for the number of cells up to and including the last sortable column.) However, with a CSS hack the number of cells ''shown'' in a row can differ from the formal number of cells. For example, two formal cells can be shown as one by specifying a width for the first column, shifting the contents of the second cell to the left, increasing its width by the same amount, and hiding the cell border that would normally be visible. Hidden sort keys can be used to control the sort order of particular rows with respect to each column.

Example:
{| class="wikitable sortable"
!style="width:9.3em"|Country!!Capital
|-
|France
|Paris
|-
|<span style="display:none">Z</span>
|style="border-left:2px solid #fff;border-left-style:hidden;background:#fff;padding:0.4em 0em"|<span style="display:none">M</span><div style="position:relative;left:-9em;margin-right:-9em;overflow:auto">Sorting with respect to the first column this row sorts like Z, with respect to the second column like M</div>
|-
|U.K.
|London
|}

== Static column ==

A static column, e.g. with row numbers, can be obtained with two side-by-side tables with for each row the same height set in both tables:

{| width="50%"
|-
|
{| class="wikitable" style="margin-right:0" 
! Number
|- 
!style="height:40px;" scope="row"| 1
|- 
!style="height:40px;" scope="row"| 2
|}
|
{| class="wikitable sortable"
! Country !! Capital
|- 
|style="height:40px;"| The Netherlands || Amsterdam (although The Hague is the seat of government)
|- 
|style="height:40px;"| France || Paris
|}
|}

The style can be adjusted to make it appear as a single table. If for some row the height of that row is too small for the text in a cell on one of the sides, the browser increases it, and there is no longer a match.

== Default order ==

It is not possible to make a table appear sorted by a certain column without the user clicking on it. By default, the rows of a table always appear in the same order as in the wikitext. If you want a table to appear sorted by a certain column, you must sort the wikitext itself in that order; see the next section for one way to do this.

=== Sorting the wikitext of a table ===

Sorting the wikitext itself, thus creating a new default sort order, can be done semi-automatically as follows. Take the wikitext of the table without top and bottom lines. Use "find and replace" to replace the cell separators with special code not containing "|". If there are pipes in the table cells, replace all pipes by some code, and replace that code with a newline in front of it (originating from the code for the start of a new row) back. Apply [[mw:Module:Sort]] (see [[mw:Module talk:Sort]]) at [[mw:Special:ExpandTemplates]] by putting:
<code><nowiki>{{#invoke:Sort|f|{{!}}-</nowiki></code><br/>
<code><nowiki>{{!}}</nowiki></code>
(with the newline) before, and <code><nowiki>}}</nowiki></code> after the wikitext, to sort the items between the pipes, with the desired separator in the result. Discard the items at the start containing "-" and a newline. Restore the cell separators and the pipes in the cells by replacing the temporary codes for them. Readd the top and bottom lines.

This method sorts by the wikitext of the rows, so in principal by the first column (and the second as secondary key), although wikitext codes in the cells of the first column before the content can affect the order.

See [[Help:Sorting#Maintaining tables sorted by rank]] for sorting tables by a different column.

=== Using JavaScript to trigger client-side table sorting ===

An addition to [[MediaWiki:Common.js]] can be used to "re-sort" a table automatically on the client side when the page loads (as if the user had clicked the header.) The example below sorts all the tables on a set of pages by the first column (see the [[mw:Tablesorter|Tablesorter]] documentation for syntax.)

This appears to break sorting by clicking on headers. It sorts ascending on the clicked on header, but won't sort the other way when clicked on again

<syntaxhighlight lang="javascript">
function isSortedTablePage() {
    return ( wgPageName == "Page_To_Sort"  || wgPageName == "Other_Page_To_Sort" );
}

jQuery( document ).ready( function( $ ) {
    // wrapped in "mw.loader.using" so this doesn't execute until Tablesorter has loaded
    mw.loader.using( 'jquery.tablesorter', function() {
        if( isSortedTablePage() ) $('table.sortable').tablesorter( {sortList: [ { 0: 'asc'} ]} )
        // or look for tables with an ID attribute of "sortMe" on any page
        // $( '#sortMe' ).tablesorter( {sortList: [ { 0: 'asc'} ]} )
    } );
} );
</syntaxhighlight>

== Basic alphabetic sorting order ==

{|class="wikitable sortable"
!demo
|-
|!
|-
| "
|-
| #
|-
| $
|-
| %
|-
| &
|-
| '
|-
| (
|-
| )
|-
| *
|-
| +
|-
| ,
|-
| -
|-
| .
|-
| /
|-
| 0
|-
| 9
|-
|:
|-
|;
|-
| <
|-
| =
|-
| >
|-
|?
|-
| @
|-
| [
|-
| \
|-
| ]
|-
| ^
|-
| _
|-
| `<!-- yes this is a back quote -->
|-
| A
|-
| Z
|-
| a
|-
| z
|-
| A1
|-
| Z1
|-
| a1
|-
| z1
|-
| {
|-
| <nowiki>|</nowiki>
|-
| }
|-
| ~
|-
|É
|-
|é
|-
|É1
|-
|é1
|-
| &mdash;
|}

The two-character entries such as A1 demonstrate that A and a are at the same position.

This is not a fully alphabetic sort order: letter case is first folded to lowercase using a basic 1-to-1 conversion table (limited to the Basic Multilingual Plane of Unicode, and whose coverage and completeness still depends on browser versions and on their current implementation of the versioned Unicode Character Database), but letters with diacritics (and all other digits, symbols or special whitespaces or format control characters) will still sort according to the binary encoding of the casefolded letter, using the binary order of the UTF-16 code units (exposed and seen in Javascript through the parsed HTML DOM), but not the binary order of UTF-8 code units in the HTML page, and not of codepoints as one could also expect for encoded characters in supplementary planes).

In addition, no normalization of the Unicode text is being performed (so canonically equivalent strings, that should compare equal or with only very minor binary difference, may sometimes compare very far away, with completely different strings interleaved between them). For this reason, MediaWiki pages should always be encoded with their text in the Normalized Form C (preComposed), as recommended in the HTML standards.

As of today, an UCA-based sort is still not implemented in the client-side Javascript code, but some wikis are implementing a limited form of multilevel collation using custom basic replacement rules tuned for specific languages.

== Server issue ==

It has been observed that the MediaWiki code on the server replaces a regular space before "!" by a [[w:non-breaking space|non-breaking space]] <code>&amp;#160;</code>, affecting the sorting order. To avoid this, this blank space can be coded as <code>&amp;#32;</code>, or the exclamation mark may be surrounded by <code>&lt;nowiki&gt;</code> and <code>&lt;/nowiki&gt;</code> tags. This is to comply with French typographic rules, where exclamation marks (and a few other punctuations) must be preceded (or sometimes followed) by a space (preferably narrow) which must still be unbreakable when it is effectively needed and present, the substitution being performed as an convenient editing facility of the Wiki code for cases that are very frequent within many texts.

== Persistent sort states using cookies ==

Adding this snippet to your [[MediaWiki:Common.js]] page will make the sortable tables remember their columns sort states in a cookie so they look the same next time the page is visited. Each sortable table must have a unique '''id''' attribute for its state to be stored in the cookie.
<syntaxhighlight lang=javascript>
addOnloadHook( function() {
    jQuery('.sortable').each( function() {
        var id = jQuery(this).attr('id');
        document.shCookie = getCookie('sortheader-'+id);
        document.sortheaderId = 0;
        jQuery('#'+id+' a.sortheader').each( function() {
            var id = jQuery(this).parent().parent().parent().parent().attr('id');
            var sh = document.sortheaderId++;
            if( sh+100 == document.shCookie ) { ts_resortTable(this); ts_resortTable(this); }
            if( sh == document.shCookie ) { ts_resortTable(this); sh += 100; }
            jQuery(this).bind('click', {id: id, sh: sh}, function(e) {
                setCookie('sortheader-'+e.data.id, e.data.sh, 1);
                e.data.sh += e.data.sh < 100 ? 100 : -100;
            });
        });
    });
});

function setCookie(c_name,value,exdays) {
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + c_value;
}

function getCookie(c_name) {
    var i,x,y,ARRcookies=document.cookie.split(";");
    for (i=0;i<ARRcookies.length;i++) {
        x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
        y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
        x=x.replace(/^\s+|\s+$/g,"");
        if (x==c_name) return unescape(y);
    }
}
</syntaxhighlight>

== See also ==

*[[Help:Table]]
*[[:w:Category:Sorting templates]]
*[https://phabricator.wikimedia.org/diffusion/MW/browse/master/resources/src/jquery.tablesorter/jquery.tablesorter.js jquery.tablesorter.js] - sorting code
*[[phab:tag/mediawiki-jquery-tablesorter/]] Tablesorter Workboard for bugs and improvments
*http://www.kryogenix.org/code/browser/sorttable/ - explanation of the original version of the code by Stuart Langridge; an improvement in the MediaWiki version is that tables no longer need to have an id.
*[[mw:Help:Sorting]]
*[[mw:Extension:Sort2]] generates sorted lists based on existing token lists.

Examples elsewhere:

*[[w:Ranked list of Dutch provinces]]
*[[w:List of countries by GDP estimates for 2006 (nominal)]]
*[[w:List of countries by GDP (PPP), 2006]]
*[[w:List of longest reigning current monarchs]] - date columns are sortable for people with "no preference" for date formatting, and for people with preference <nowiki>[[YYYY-MM-DD]]</nowiki>.
*[http://en.wikipedia.org/w/index.php?title=User:Smurrayinchester/Template&oldid=97802084 Pokémon table] - prefixes numbers with "#" to have them before "-".
*[[w:Nuclear_power_by_country|Nuclear power by country]] (Featured List)
*[[w:Desert Island Discs: castaways' choices]]
*[[:zh:秘鲁行政区划#大区人口|zh:秘鲁行政区划]] (Subdivisions of Peru) for sorting of Chinese (CJK)
*[[w:Standard electrode potential (data page)‎]]


{{h:f|enname=Sorting}}

[[Category:Editor handbook]]