Help:Sortable tables

This page is about sortable tables. For category sorting, see Wikipedia:Categorization § Sort keys.

Tables can be made sortable via client-side JavaScript with class="wikitable sortable".

A sortable table is identified by the arrows in each of its header cells. Clicking them will cause the table rows to sort based on the selected column, in ascending order first, and subsequently toggling between ascending and descending order.

JavaScript source

The JavaScript code is found at //en.wikipedia.org/skins-1.5/common/wikibits.js, in addition MediaWiki:Common.js adds and overrides some code.

Sort modes

The sort modes (the data types, which, in addition to the choice "ascending" or "descending", determine the sorting order) are as follows; in the given order (as soon as there is a match, subsequent criteria are not applicable, e.g., 24-12-2007 is a date, not a number. For the criteria, tags (e.g. span, sup, sub) are ignored.

• date (see also below)
  • criterion: the first non-blank element is of the form "dd-dd-dddd", "dd-dd-dd", or "dd aaa dddd"
  • order: the string abcdefghij of length 10 is positioned as ghijdeab, the string abcdefghijk of length 8 as 19ghdeab if gh>=50 (string comparison) and 20ghdeab otherwise (i.e., the assumed format is DD-MM-YYYY or DD-MM-YY), and the string "dd aaa dddd" with aaa an abbreviated month name: chronologically
• "currency" (this mode can be useful for other data also)
  • criterion: the first non-blank element starts with $, £, €, or ¥
  • order: numeric, ignoring these symbols and all ordinary letters and commas, but not spaces; note that scientific notation cannot be used, as e and E are removed
• numeric
  • criterion: the first non-blank element consists of just digits, points, commas, spaces, "+", "-", possibly followed by "e" or "E" and a string consisting of "+", "-", digits
  • order: after removing the commas and spaces, if any, if the string starts with a number the order is numeric according to the first number in the string (parseFloat is applied); it is regarded as zero if it is empty; in other cases (parseFloat returns NaN), the element is positioned like -∞.

proposed internationalisation: in German etc., treat comma as a decimal point

• string
  • criterion: all other cases; to avoid one of the other modes, start e.g. with a hidden "&"; this can be done conveniently with m:Template:sms (backlinks edit), which also allows more hidden text, as a sort key; while the similar templates above are called at the end of a table element, call this one at the start
  • order: after conversion of capitals to lowercase the order is ASCII - partial list showing the order: !"#$%&'()*+,-./09:;<=>?@[\]^_'az{|}~é— (see also below; a blank space comes before every other character; an nbsp code counts as a space; two adjacent ordinary blank spaces count as one; for multiple blank spaces one can use nbsps or alternate nbsps and ordinary blank spaces)

The sort mode is determined by the table element that is currently in the first non-blank row below the header. In the case of different data types within one column (according to the criteria mentioned above) the sort mode may change after sorting, which can give a cycle of four or even more instead of two. This is confusing and gives undesired sorting orders, so that can better be avoided. However, it can be complicated to assess whether an element can ever be at the top after any sorting operations on the same and other columns, and this can also change after deleting a row, or adding a column. Therefore it is wise to make sure that every element matches the criterion for the required data type. Using a row template this can be done very conveniently.

An alternative method of making sure the sort mode of each column is as desired, is creating a first row that determines the sort modes, but in such a way that this row is not displayed and is excluded from sorting, see below.

Examples

The script sees what the cells contains at the first data row. The sorting mode becomes numeric if the cell of the first data row contains number only (comma and full-stop used in number formatting are accepted as number). The sorting order will work properly even though other cells contains text after numbers (e.g. "200 approx"). Empty cell is treated as "zero" when sorting numerically.

It is sorted ascendingly first, and then descendingly. However bear in mind that the cell of the first data row will change accordingly after sorting. If that cell no longer contains number only after sorting, the sorting mode will change. For example, if the cell of the first data row becomes "200 approx" after sorting, this will make the sorting mode alphabetic.

numbers 123,456,789 2,500,000,000 300,000,000 3,000,000 abc 5,000,000 2,000 def -4,000 aaa -9,999 4,000 9,999 800,000 900,000

numbers 123 564,589.7e12 9 -80 80 abc 5 abc 80 70 600

Rs |150 Rupees Rs 250 Rs 300

currencies $ 9 $ 80 $ 70 $ 600

currencies € 9 € 80 € 70 € 600

currencies £ 9 £ 80 £ 70 £ 600

currencies ¥ 9 ¥ 80 ¥ 70 ¥ 600

comparison a 9 a 80 a 70 a 600

comparison e 9 e 80 e 70 e 600

The example with "a" gives alphabetic sorting; that with "e" ditto, the data are not mistaken for numbers in scientific format.

mixed notations 1.4285714285714E+17 1000000000000000000 -1000000000000000000 .0000000000000000001 -.0000000000000000001 -1.4285714285714E+17 1.4285714285714E-13 -1.4285714285714E-13 89 123 456 788 89,123,456,789 333 1e10 e 9 e 80 e 70 e 600 999e9 88e80 7e270 999e-9 88e-80 7e-270 -999e9 −999e9 -88e80 -7e270 -999e-9 -88e-80 -7e-270 e3 -e3 1e3 e9 e80 e270 6e11 8e11

first number in each element counts 7-4 2 4 22/7 111

percentage 7% 2 4 22 111

mixed notations 14 -14 11 -12 (retrograde) 12 or 13 12 (?) ca. 12 12 (approx.) ?

The first example demonstrates that text is positioned at zero, and that e.g. e3 for 1000 is not allowed; use 1e3 instead. It also shows that "-" should be used, not "−".

The second example shows that expressions are not sorted according to their evaluated value, but according to the first number.

The third example shows that a percentage is accepted for numeric sorting mode, but ignored in the actual sorting, so if a column contains percentages, all numbers have to be written as a percentage.

The fourth example shows again that "ca. 12" sorts at 0, as opposed to 12 with some text after it, which sorts at 12. In case such an element arrives at the top of a column, it causes alphabetic sorting mode.

Numerical sorting problems

Text breaks numerical sorting whether the text is before or after the number. The {{N/A}} template in any cell in a numerical column breaks numerical sorting of that column.

A dash, of any kind, in a blank cell breaks numerical sorting of a column. A dash is only allowed in front of a number. A dash after a number breaks numerical sorting of a column. Therefore a range (30-40) breaks numerical sorting of a column. Use 2 columns for a range. See and experiment with preview views of the table in 15 October 2011 global protests.

A plus sign (+) in front of a number does not break numerical sorting of a column. A plus sign in an otherwise empty cell can break numerical sorting of a column if the first non-empty cell going down a column consists of just a plus sign. A plus sign after a number can break numerical sorting if the first non-empty cell going down a column consists of a number followed by a plus sign. See and experiment with preview views of the table in 15 October 2011 global protests.

References and reference notes after numbers do not break numerical sorting of a column. See: List of sovereign states by public debt.

"c." (circa, indicates "approximately") is often found in columns of numbers. It needs to be moved to a different column. See List of countries by incarceration rate for how to do that.

Leading zeroes are not necessary for numerical sorting of a column. If it seems that way, then that means the column is being sorted alphabetically. Check for cells with anything other than numbers, and correct those cells according to the above rules.

Year sorting problems

Year sorting of a column works as long as no text is the first thing in a cell in the column. The year must be first. Text is OK after a year in a cell. References after the year are OK. See List of countries by income equality.

A dash, of any kind, in a blank cell breaks year sorting of a column. Dashes after the year are OK.

Unlike for numerical sorting the {{N/A}} template in any cell in a year column does not break year sorting of that column.

If there are problems with year sorting check for any cells in the column with text or a dash (of any kind) as the first thing in a cell. Remove that text or dash to return the column to correct year sorting.

Header styling, links, and markup

Links and wikilinks are allowed in sortable headers (tooltips over links will indicate the sorting operation). Styling markup in a header may cause that column to be unsortable - see bug 31755. There are two workarounds.

Styling workaround 1: use style="background-color:...;" instead of style="background:...;" e.g.:

{|class="wikitable sortable"
|-
!style="background-color:#cfcfcf;"  align="center" |Name!![[Surname]]!![http://example.com Height]
|-
|John||Smith||1.85
|-
|Ron||Ray||1.89
|-
|Mario||Bianchi||1.72
|-class="sortbottom"
|||Average:||1.82
|}

Produces this sortable table:

Name	Surname	Height
John	Smith	1.85
Ron	Ray	1.89
Mario	Bianchi	1.72
	Average:	1.82

Styling workaround 2: Add a row of empty headers above named headers (this produces non-standard appearing tables, and may not work in subsequent releases of MediaWiki). For example:

{|class="wikitable sortable"
|-
! <br>
! <br>
! <br>
|-
!style="background:#cfcfcf;"  align="center" |Name!!Surname!!Height
|-
|John||Smith||1.85
|-
|Ron||Ray||1.89
|-
|Mario||Bianchi||1.72
|-class="sortbottom"
|||Average:||1.82
|}

This sortable table is produced:

Name	Surname	Height
John	Smith	1.85
Ron	Ray	1.89
Mario	Bianchi	1.72
	Average:	1.82

This allows for more columns to fit within the width of the screen. It also allows more space for the text within the header cells, since no space is taken up by the sorting icon. This is useful for tables with many columns. For example; see

• List of countries by intentional homicide rate.
  

Go to the page of tables and make your browser window more narrow (the middle button in the set of 3 buttons at the top of your browser window). Drag the right side of the window to get various window widths. Scroll down the page. Note that when the sorting icon is to the right of the text that the sorting icon does not wrap. So the table then requires a horizontal scrolling bar sooner than a table with the sorting icons above the headers.

Additional features

Excluding rows from sorting

Sometimes it is helpful to exclude the last row of a table from the sorting process.

This can be achieved using class="sortbottom" on the desired table row (line starting with |-).

Wiki markup

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

What it looks like in your browser

Name	Surname	Height
John	Smith	1.85
Ron	Ray	1.89
Mario	Bianchi	1.72
	Average:	1.82

It is possible to keep multiple lines fixed at the bottom:

Using more than one "sortbottom", to keep these lines fixed

Name	Surname	Height
John	Smith	1.85
Ron	Ray	1.89
	Average:	1.82
Name	Surname	Height

The first unsortable row can also be a hidden row, with each element marked with <span style="display:none">...</span>, to ensure that each column has the desired sort mode. However, this technique creates tables that have accessibility issues, as it causes problems with screen readers and text browsers. Alternatively, the entire row can be marked as hidden with |-style="display:none", which is just as bad regarding accessibility.

Forcing proper sort type and positioning rows with a hidden sort key

One way to ensure each row is sorted appropriately is to add identical hidden rows ( |-style="display:none;" ) to the top and bottom of the table. If these contain very high and very low values of the appropriate type for sorting each column, then no matter what sorting is done, one of the rows always remains at the top and one at the bottom of the table, forcing the appropriate mode for the next sort. If it is acceptable to keep identical rows fixed at the top and the bottom of a table, these can be implemented using less extreme high and low hidden sort key values. The hidden rows to force proper sort type may be unnecessary if the rows for display at the top and bottom of the table contain the right sort of values. For example, the hidden top and bottom rows in the example below can be deleted without harm, but if "(meters)" were added in the third column they would be needed.

Since the numeric sorting recognizes scientific notation, the number 9e99 and its negative are good candidates for forced numeric sorting when dealing with tables that contain large numbers. On the other hand, characters are ranked "ASCIIbetically," which places the exclamation mark (!) as the first sortable character and the tilde key (~) as the last; as such those two characters are good candidates for alphabetical sorting.

{|class="wikitable sortable"
!Name!!Surname!!Height
|-style="display:none;"
|!a||!a||-9e99
|-
|<span style="display:none;">!b</span>''(brief)''
|<span style="display:none;">!b</span>''(from records)''
|<span style="display:none;">-9998</span>
|-
|John||Smith||1.85
|-
|Ron||Ray||1.89
|-
|Mario||Bianchi||1.72
|-
|<span style="display:none;">~y</span>''(brief)''
|<span style="display:none;">~y</span>''(from records)''
|<span style="display:none;">9998</span>
|-style="display:none;"
|~z||~z||9e99
|}

Name	Surname	Height
!a	!a	-9e99
!b(brief)	!b(from records)	-9998
John	Smith	1.85
Ron	Ray	1.89
Mario	Bianchi	1.72
~y(brief)	~y(from records)	9998
~z	~z	9e99

Making a column unsortable

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

Wiki markup

{|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?
|-class="sortbottom"
!Total: 15!!!!!!Total: 29.55!!
|}

What it looks like in your browser

Numbers	Alphabet	Dates	Currency	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	Original example

Striping

A correct solution to make striping work was suggested at Help talk:Table/Archive 4#Alternating row colors? If the following code was added to MediaWiki:Common.css, marking a table with class="zebra" would create a correct striping.

table.zebra   tr:nth-child(odd) {background: #E9E9E9;}

Sorting with a hidden key

You can apply sorting using a key which, due to CSS, is not displayed:

<span style="display:none">...</span>

Example:

p<span style="display:none">q</span>r displays pqr

Javascript sorting sorts the text inside and outside the tags, without the tags themselves. A hidden key can be put at the start. Both in the case of alphabetic and that of numeric sorting the first parts determine the order. Both parts together are used to determine the sort mode, so for numeric sorting the whole should be a valid number.

Alphabetic sorting with hidden key

The key comes at the start and is separated from the displayed text in such a way that the latter does not affect the sorting order. For example, if there are no blank spaces in any key, then a blank space can be used for separation. If a single blank space is possible in a key, two nbsps can be used. For table elements for which the text to be displayed is equal to the key, no duplication is needed, of course.

If the text inside and outside the tags together is of a form that would cause a sorting mode other than alphabetic (if and when the element is at the top), a character can be appended at the end of the key to avoid this, again making sure it does not affect the sorting order by putting a space or two nbsps. This can be dispensed with if the element can never be at the top, but this can be complicated to assess as that can be caused by sorting other columns, with varying sorting modes, and it can change when deleting a row, adding a column, etc.

Instead of "display=none" another way is using a font color equal to the background, e.g. <font color="#f9f9f9">999</font> gives "999". With this method the hidden code can be seen in selected text (e.g. with the mouse). Also the hidden text is included when copying the rendered text. The first may be an advantage or a disadvantage, the second seems only a disadvantage. A complication is also that if a user uses a background color different from the default, the specified text color may not match it; to make sure they are the same the background color can be specified also.

Numeric sorting with hidden key

If one needs to use alphabetic sort mode for numbers, one can construct a hidden alphabetic key for this purpose. The simple way of achieving this is to use template {{nts}} or {{ntsh}}.

It can also be done manually for all numbers between −1e100 and 1e100 in arbitrary precision as follows:

• where scientific notation is used, it is normalized such that the absolute value of the mantissa is between 1 and 10; the exponent is put first
• scientific notation is used for all negative numbers, and all positive numbers outside some interval (below: 1e-9 to 1e9), and not inside that interval
• where the absolute value of the exponent and/or the mantissa is a decreasing function of the number, the notation uses its complement with respect to 99 for exponents and 10 for mantissas; the code "c" is added in these cases
• numbers 0 ≤ x < 1000 get a "+" in front
• positive numbers in scientific notation with a negative exponent get "+0" in front
• spaces inside the code and &-signs in front are added where needed:
  • for numbers not in scientific notation the positions of all explicit and implicit decimal points are aligned
  • for the starting position, i.e. the position of the first "-", "+", or "e", of other numbers, see the example table
  • no code should satisfy the criterion for numeric sorting mode (below we have always either an ampersand or two letters e): although this matters only for the element at the top, any element might arrive at the top due to sorting another column

In the following the left column shows the code for alphabetic sorting, where cryptic followed by the regular notation. The second column contains the same (hence sorting the same), but with code hidden with CSS. The third column does not contain hidden parts and uses numeric sort mode. When sorting the first or second column "more than 1e9" is positioned suitably, while when sorting the third column it is positioned like 0. Moreover, if this cell would be at the top alphabetic sort mode would be used.

full code for alphabetic sorting	display form	plain number
&&&&&&&&&+6	&&&&&&&&&+6	6
&&&&&&&&&+7	&&&&&&&&&+7	7
&&1,048,576	&&1,048,576	1,048,576
&&&&&&1,234	&&&&&&1,234	1,234
&&&&&&&+123	&&&&&&&+123	123
&16,777,216	&16,777,216	16,777,216
&&&&&65,536	&&&&&65,536	65,536
&67,108,864	&67,108,864	67,108,864
e23 6 6e23	e23 6 6e23	6e23
e09 1.01 more than 1e9	e09 1.01 more than 1e9	more than 1e9
e09 1 1e9	e09 1 1e9	1e9
&&&&&&&&&+0 ec89 9.999,99 9.999,99e-10	SMS &&&&&&&&+0 ec89 9.999,99 9.999,99e-10	9.999,99e-10
&&&&&&&&&+0.000,000,001	&&&&&&&&&+0.000,000,001	0.000,000,001
&&&&&&&&&+0 ec87 6 6e-12	&&&&&&&&&+0 ec87 6 6e-12	6e-12
&&&&&&&&&+0 ec86 7 7e-13	&&&&&&&&&+0 ec86 7 7e-13	7e-13
&&&&&&&&&+0 ec87 5 5e-12	&&&&&&&&&+0 ec87 5 5e-12	5e-12
&&&&&&&&&&-e-10 c0.000,01 -9.999,99e-10	&&&&&&&&&&-e-10 c0.000,01 -9.999,99e-10	-9.999,99e-10
&&&&&&&&&&-e-08 c6.8 −3.2e-8	&&&&&&&&&&-e-08 c6.8 −3.2e-8	−3.2e-8
&&&&&&&&&&&-ec86 c0.3 −9.7e13	&&&&&&&&&&&-ec86 c0.3 −9.7e13	−9.7e13
&&&&&&&&&&&-ec99 c7.7 −2.3	&&&&&&&&&&&-ec99 c7.7 −2.3	−2.3
&&&&&&&&&+0	&&&&&&&&&+0	0
&&&&&&&&&+0.3	&&&&&&&&&+0.3	0.3

Padding

Sometimes entries are padded on the left for alignment purposes. This can adversely affect how they are sorted.

Non-breaking spaces

The effect of left-padding with " " codes, which render as blank spaces, depends on the browser: in IE they are (unlike actual blank spaces) counted for sorting as leading blank spaces, so in a list of numbers with text (for which the alphabetic sorting mode applies) they could be used to equalize the number of characters before the explicit or implicit decimal separator. However, in Firefox they are ignored for the purpose of sorting.

Sorting using nbsps, works on IE but not on Firefox	Name
100.3 FM	Third
89.5 FM	First
107.3 FM	Fourth
95.3 FM	Second

See also w:Talk:List_of_U.S._states_by_population#Sortable_Table.

Padding with zeros

Example:

• 000156

Formatnum can be combined with padleft:

Integer:

{{formatnum:{{padleft:299792458|16|0}}}} gives:

• 0,000,000,299,792,458

Real:

{{formatnum:{{padleft:{{#expr:((299792458.056 - .5) round 0)}}|16|0}}}}.{{padleft:{{#expr:(1000000*(299792458.056 - ((299792458.056 - .5) round 0))) round 0}}|6|0}} gives:

• 0,000,000,299,792,458.056000

Dates

The sort mode is based on the rendered format; in the case of links: the labels, not the targets (though including any content hidden by "display:none").

See also:

• Template:dts (backlinks edit)
• bugzilla:8226.

Date sort mode

Dates 1 Date sort mode 07 Apr 2001 16 Apr 2007 16 Mar 2007 05-04-2007 04-05-2007 18 Mar 2007 27 Mar 2007 20 Aug 2006 22 Jul 2006

Dates 2 Date sort mode, sorting works for no preference and preference dmy 07 Apr 2007 00 Jan 2007 00 Mar 2007 16 Apr 2007 28 Feb 2007 28 Feb 2007 28 Jan 2007 28 Jan 2007 07 Apr 2007 16 Apr 2007 1 Mar 2007 01 Mar 2007 27 Mar 2007 20 Aug 2006 22 Jul 2006 1 Mar 2007 01 Mar 2007 27 Mar 2007 20 Aug 2006 22 Jul 2006

One of the formats allowed for the date sort mode is produced by the Mediawiki's date-formatting feature in the right combination of preference and wikitext format: we need to use in the wikitext the format [[dd mmm]] [[yyyy]] (done in the example) and either no preference or preference dmy, or use with preference dmy one of the formats [[mmm dd]][[yyyy]], [[yyyy]][[mmm dd]], or [[yyyy]][[dd mmm]].

Incomplete dates:

• <span style="display:none">00 Jan </span>2007
• <span style="display:none">00</span> Mar 2007

String sort mode

Dates 3 String sort mode 2006 a Template:Dts1 Template:Dts1 2006-12 December 2006 !9936-04 April 64 BC !9900-07-13-0099-07-13 !9937-09-23-0062-09-23 !9937-10-08-0062-10-08 !9998-12-21-0001-12-21 Template:Dts1 Template:Dts1 Template:Dts1

String sort mode provides chronological sorting for dates formated as <span style="display:none">&</span>YYYY-MM-DD; the hidden "&" avoids numeric sort mode.

Also we can hide the YYYY-MM-DD and put after that any choice of displayable text, including Mediawiki date formatting. The Wikipedia template Template:dts (backlinks edit) provides a convenient way of applying this method while using the date-formatting feature for display.

For years BC we can use, for example, !9937-09-23 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.

If at some point (i.e., after possible previous sorting) the form [[YYYY]] is at the top with a non-negative year, sorting would be numerical; in this case, after toggling between ascending and descending there would be no proper sorting within each year (because parsefloat is applied, finding the first number in the string, and basing sorting on only that number). Also, years BC would not be sorted properly. Therefore, alphabetic sorting has to be enforced. This can be done by putting a non-displayed character after the year, separated by a space.

Numeric sort for BC/AD years

In certain circumstances the following sort technique may be used to provide a simple intuitive numeric sort for BC/AD years which are often surrounded by qualifying text. The sort in the BC/AD column (the fourth column in the example) is forced to be numeric (just as the other columns are forced to be alphabetic) by the inclusion of the first two hidden rows. These rows contain extreme values which will mean that these rows will ALWAYS be sorted to the top and bottom of the table, regardless of which column is sorted. As the sort mechanism determines the sort type to be used by examining the first cell in the column to be sorted the hidden rows ensure that a purely numeric value is always found in the first or last cell.

The mechanisms used here are explained in the current article at: #Forcing proper sort type and positioning rows with a hidden sort key and #Examples.

With numeric sorting guaranteed all that is needed is to precede the BC/AD text with a positive or negative year number in a hidden sort key ( {{Hs|-9999 ! }} ) which suitably represents the cell text. As this number will be the first thing the sort code sees it will sort it as a number, in the order large negatives -> zero -> large positives, or the opposite. Once the sort type is fixed at the start of a sort the presence of alphabetic values in subsequent rows is ignored. The sort is done numerically on the first text in each row. The detail of the exclamation mark after the positive/negative year number in the hidden sort key is to clearly mark an end to the number which the sort mechanism must consider. In certain circumstance, if the exclamation mark is not present, and the hidden sort key is immediately followed by another number, that number may be treated as a continuation of the hidden sort key number, to produce an incorrect sort.

The tables in the article: List of cities by time of continuous habitation have been modified to used this sort. The following example is modified (maintaining some defects in the content which will need resolving in the original!) from one of those tables:

{| class="wikitable sortable"
|-
! Name
! Historical region
! Location
! Continuously inhabited since
! class="unsortable" | Notes

<!-- force numeric sorting on the hidden values in col 4 with hidden extreme max and min rows -->
|-style="display:none;"
|!a||!a||!a||-9e99

|-style="display:none;"
|~z||~z||~z||9e99

|-
| [[Ife]] || || {{Hs|Nig}}[[Osun State]], [[Nigeria]] || {{Hs|-500 !}}ca. 500 BC ||

|-
| [[Axum]] || [[Kingdom of Axum]] || [[Ethiopia]] || {{Hs|-400 !}}ca.400 BC || Ancient capital of the Kingdom of Axum
.
.
.
|-
| [[Mogadishu]] || || [[Somalia]] || {{Hs|900 !}}c. 900 || settled by Arab traders

|-
| [[Dar es Salaam]] || || [[Tanzania]] || {{Hs|1865 !}}1865 || Founded by the Sultan of [[Zanzibar]].

|}

Name	Historical region	Location	Continuously inhabited since	Notes
!a	!a	!a	-9e99
~z	~z	~z	9e99
Ife		Osun State, Nigeria	ca. 500 BC
Ife		Osun State, Nigeria	c. 8th century	earliest traces of habitation date to the 4th century BC.
Yeha	D'mt	Ethiopia	ca.700 BC	Oldest site of continuous habitation in Sub-Saharan Africa.
Axum	Kingdom of Axum	Ethiopia	ca.400 BC	Ancient capital of the Kingdom of Axum
Igodomigodo	Kingdom of Benin	Nigeria	c. 400 BC	City of Benin, one of the oldest cities in Nigeria
Djenné-Jeno		Mali	ca.200 BC	oldest known city in sub-Saharan Africa
Mogadishu		Somalia	c. 900	settled by Arab traders
Cape Town	Cape Colony	South Africa	1652	Founded by Jan van Riebeeck of the Dutch East India Company
Monrovia		Liberia	1822	Settled by freed American slaves through the American Colonization Society
Dar es Salaam		Tanzania	1865	Founded by the Sultan of Zanzibar.

Secondary key

If a column contains a value multiple times then sorting the column preserves the order of the rows within each subset that has the same value in that column (stable sorting). Thus sorting based on a primary, secondary, tertiary, etc. key can be done by sorting the least-significant key first, etc.

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

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

Keeping some rows together

Partly hidden keys can be used to keep certain rows together. The original mutual order of these rows is preserved.

Example where this is the case for the rows about the Netherlands:

Country/province	Capital
France	Paris
NetherlandsSouth Holland	AmsterdamThe Hague
NetherlandsSouth Holland	AmsterdamThe Hague
U.K.	London

Limitations

Javascript sorting may not work properly on tables with cells extending over multiple rows and/or columns (however, sorting of columns up to and including the first with colspan does not seem to be affected). Also, while cells can be empty, they should not be missing at the end of a row. In these cases sometimes the table gets messed up when attempting to sort, while other times some of the sorting buttons work while others don't.

Colspan workaround

To allow sorting, the formal number of cells in each row should be equal (if not all columns are made 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 keys can be used to control, for sorting with respect to each column, how this row should be sorted.

Example:

Country	Capital
France	Paris
Z	M Sorting with respect to the first column this row sorts like Z, with respect to the second column like M
U.K.	London

This can be combined with the method of "keeping some rows together" demonstrated above. For an example of an application of this, consider a table of three columns where the third column would make the table too wide, such as a column of miscellaneous details. These details can be put in separate rows, each staying below the corresponding row when the table is sorted.

Example:

Country	Capital
France	Paris In Paris is the Eiffel Tower.
France	Paris In Paris is the Eiffel Tower.
U.K.	London In the U.K. you cannot pay with euros.
U.K.	London In the U.K. you cannot pay with euros.
Germany	Berlin Germany includes the former DDR.
Germany	Berlin Germany includes the former DDR.

A table row template makes this technique less cumbersome to apply, see e.g. w:List of furry conventions, w:Template:Furry-con-list-start and w:Template:Furry-con-list-entry.

Controlling sorting and display

Text undesired for sorting but needed for display:

• In numeric sorting mode, text breaks numerical sorting whether the text is before or after the number. Sorting then becomes alphanumeric. Empty cell is treated as "zero" when sorting numerically.
• In date sorting mode, this text needs to be put in a separate column; in the case of a cell containing a range of dates or numbers (e.g. from .. to ..), text in surplus of what is required for sorting is put in the extra column. If the first part of the text is used for sorting, then the extra column needs to be the following one; conversely, if the last part of the text is used for sorting, then the extra column needs to be the previous one; depending on the table format, this dividing of an item over two cells may look ugly.
• In alphabetic sorting, any footnotes etc. do not require a separate column; they can simply be put at the end of the element.

Text undesired for display but needed for sorting:

• can be put as hidden text in the column to be sorted

Combining the two, we can have displayed text independent of text used for sorting, by fully hiding the latter, and fully putting the former in a separate column (in date sorting mode and numeric sorting mode) or in the same column after the hidden text (in alphabetic sorting). Fully putting the displayed text in a separate column may look ugly if it is not done consistently for a whole column, but only for elements that require this (e.g. if most entries in a column are single numbers, but some are ranges).

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:

Number 1 2

Country Capital The Netherlands Amsterdam (although The Hague is the seat of government) 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.

A static column can also be created by enclosing the sortable table with the templates {{static column begin}} and {{end}}. See the documentation of {{static column begin}} for details.

Sorting tables by default

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.

Initial alphabetical sort

It is a good idea to keep lists and tables in some kind of initial non-random sort order. Numbered rank order is difficult to maintain, as the rankings can change. So alphabetical order is better for lists of country data. For example; List of sovereign states by public debt.

Sometimes it is necessary to remove numbered rank columns from tables for country data. People keep adding more nations, but have difficulty renumbering all the ranks each time a nation is added. It takes too long. So then it is better to remove the rank column, and then put the nations in alphabetical order.

It is easy to alphabetize a nation list if the first column is for the nation. One way is to use the freeware Notetab Light. Paste the list into a new page in Notetab Light. Click on the "modify" menu, then "lines", and then "sort".

Then put back |- between each line. Do that via find-and-replace. Replace ^p with ^p|-^p

^p is the underlying text editor code for line breaks in Notetab.

|- is the wikitext for a table row.

People will see the list table in alphabetical order when they first open the page. They can see the data in ascending or descending order by clicking the sort icons at the top of the columns in sortable tables.

Sorting the wikitext of a table

One difficult way to sort the wikitext itself by a certain column is to use the following 'trick'. You can make an auxiliary sortable table containing the wikitext for the original table, and sort it. You can then replace the original wikitext by this sorted wikitext.

Unfortunately this method is anything but quick and easy. The heavy modifications needed make it unsuitable for larger tables, while small tables generally are sorted faster by hand.

Example:

Original table:

demo
9
12
11

Auxiliary table:

{|class="wikitable sortable"
!demo

header
|- | 9
|- |12
|- |11

|}

Now you can sort the above table, and copy the rendered text to the edit box. After deleting the "header" line, this renders as a new defaultly sorted table:

demo
12
11
9

Alphabetic sorting order

Sort the following table to see an example of the alphabetic sort order. Note that sorting is case-insensitive: the two-character entries such as A1 demonstrate that A and a are at the same position.

demo
!
"
#
$
%
&
'
(
)
*
+
,
-
.
/
0
9
:
;
<
=
>
?
@
[
\
]
^
_
'
A
Z
a
z
A1
Z1
a1
z1
{
|
}
~
—
É
é
É1
é1

Browser issues

With older versions of Safari a table can only be sorted by the first column: all sort buttons have the effect that only the leftmost one is supposed to have.

See also

• {{Sortname}} - Sort by surname without placing first name and surname in two separate columns
• m:Help:Sorting
• Sortable collapsible table
• Template:dts (backlinks edit) - sorting a table by a date column, while following w:Wikipedia:Manual_of_Style_(dates_and_numbers)#Dates_containing_a_month_and_a_day for display
• w:Category:Sorting templates
• m:Template:sd (backlinks edit) - shows buggy date sorting when some or all dates are linked
• Help:Table
• wikibits.js - contains, among other things, the sorting code
  • changes regarding sorting:
    • Sep 2008: allow negative numbers and scientific notation in determining numeric sort mode
    • Nov 2007 allow multiple commas in numbers - from [1]
    • Feb 2007 allow pound and euro in currency sort mode
    • Jan 2007 sorttable.js merged into wikibits.js
    • for older revisions see the revision history of sorttable.js
  • meta:MediaWiki:Common.js page overriding function ts_parseFloat(num) and function ts_resortTable(lnk) on Meta with improved versions
  • page overriding function ts_parseFloat(num); adaptation to decimal comma

    [2] [3] [4] [5] [6] [7] [8] [9] force sortorder of a column more numbers [10]

• bugzilla:2001 - resolved feature request
• bugzilla:8063 - request to enable sorting of numbers with a point as thousands separator
• bugzilla:8115
• 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.
• http://blog.webkist.com/archives/000043.html (from the wayback machine)
• http://www.joostdevalk.nl/code/sortable-table/
• w:Wikipedia:Wikipedia Signpost/2007-01-02/Technology report
• Template:sort (backlinks edit)
• mw:Extension:Sort2
• mw:Extension:Sort
• w:User:TimR/Tables

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 [[YYYY-MM-DD]].
• Pokémon table - prefixes numbers with "#" to have them before "-".
• Nuclear power by country (Featured List)
• w:Desert Island Discs: castaways' choices
• zh:秘鲁行政区划 (Subdivisions of Peru) for sorting of Chinese (CJK)
• w:Standard electrode potential (data page)‎