Help:Sortable tables: Difference between revisions

Content deleted Content added

Inline

Revision as of 10:41, 22 February 2014

This help page is a how-to guide.

It explains concepts or processes used by the Wikipedia community. It is not one of Wikipedia's policies or guidelines, and may reflect varying levels of consensus.

Shortcut

WP:SORT

Using sortable tables

When browsing Wikipedia you may encounter tables that have been made sortable. A sortable table is identified by the arrows in one or more 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.

The actual sorting process will happen on your computer using client-side JavaScript. For this reason it is only possible to use this functionality if you have JavaScript enabled in your web browser. The sorting process is also dependent on your computer and the amount of data. Sorting a very large table on a slow computer may take quite long.

Example

This is an example of a small sortable table.

name	data	more data
cats	273	53
dogs	65	8,492
mice	1,649	548

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. For example, to sort the table below on the Text column, then the Numbers column, first click on the "Numbers" column heading (the secondary sort key), then the "Text" column heading (the primary sort key).

Another way to sort a table using multiple sort keys is to hold down the shift key while clicking on the column headings for the subsequent sort keys. For example, to sort the table below on the Text column, then the Numbers column, first click on the "Text" column heading (the primary sort key), then hold down the shift key and click on the "Numbers" column heading (the secondary sort key).

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

Creating sortable tables

Tables can be made sortable via client-side JavaScript by adding class="wikitable sortable" to their top line. These tables need to be properly formatted, with the right amount of cells. Additionally you need to make sure that the headers of your column are properly indicated in the wikicode. For this the ! character is used in the table syntax.

Simple example

This is the wikisource of the table shown in the first section and shows the typical way to enable table sorting:

{| class="wikitable sortable" border="1"
|-
! name
! data
! more data
|-
| cats
| 273
| 53
|-
| dogs
| 65
| 8,492
|-
| mice
| 1,649
| 548
|}

The ! indicates cells that are header cells. In order for a table to be sortable, the first row(s) of a table need to be entirely made up out of these header cells. You can learn more about the basic table syntax by taking the Introduction to tables.

Initial sort order of rows

When users are first presented with a table, the rows will 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. This is usually done for the first column.

Restrictions

Tables can only click-to-sort vertically downwards (clicking on a topmost-column-name will cause the rows of the table to re-order themselves in their up-and-down positions). It is not possible to click-to-sort horizontally across (there is no way to click on a leftmost-row-cell so as to cause the columns of the table to re-order themselves in their left-to-right positions).

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?
|-
!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

Configuring the sorting

Forcing a column to have a particular data type

For more info see meta:Help:Sorting#Forcing the sort mode for a column.

The data-sort-type="..." attribute can be added inside the header of a column to ensure that the cells underneath are all treated as a specified type of data.

The following (case-insensitive) values are valid for data-sort-type:

text
number
currency
url for website addresses
IPAddress for numeric internet protocol addresses
date
isoDate for dates in the ISO yyyy-mm-dd format. Only works from 100 CE onwards.
usLongDate for dates in the US format (with the month before the day)
time

For example:

Wikitext Without any data-sort-type With data-sort-type="text"

{| class="wikitable sortable"
|-
! data-sort-type="text" | Album
|-
 ... etc ...
|}

Album
21
19
21
21
19
21
Matinée
21
19
Everything Is New
Love & War

Album
21
19
21
21
19
21
Matinée
21
19
Everything Is New
Love & War

Without data-sort-type="text" in the header, the tablesorter gets confused by the numeric titles in the first few rows into treating the entire column as numeric. This results in it wrongly sorting the non-numeric titles as zero regardless of the alphabetical ordering of their text.

Default data type of a column

If you do not specify a data-sort-type, the sort modes (the data types, which, in addition to the choice "ascending" or "descending", determine the sorting order) are as follows:

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 (if characters positioned at c and f are equal together and are either '/' or '-' separator) is positioned as ghijdeab, the string abcdefgh of length 8 (if characters positioned at c and f are equal together and are either '/' or '-' separator) 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; ideally it should also recognize the ISO 8601 format "YYYY-MM-DD" if the separators in a 10-character string are at positions e and h (instead of c and f).
"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)

If more than one possible type matches, the first type in the above order is chosen. For example, "24-12-2007" matches as a date, so is not treated as a number. Formatting and markup tags are ignored when determining the matching type.

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.

Specifying a sort key for a cell

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 Doe' should actually be sorted as 'Doe' and not as 'John') This can be easily achieved by setting the data-sort-value attribute.

Wiki markup

{|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
|-
!Average:||1.82
|}

This gives:

Name and Surname	Height
John Smith	1.85
Ian Ray	1.89
Zachary Bianchi	1.72
Average:	1.82

Keeping some rows together

data-sort-value 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:

{|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
|}

Country/province	Capital
France	Paris
Netherlands	Amsterdam
South Holland	The Hague
Poland	Warsaw
U.K.	London

If you have rows that contain colspans, then this might become a bit difficult. You can also use the class="expand-child" on a row. This row will then always be below the row just above it and will follow it around, no matter how the sorting is applied.

{| class="wikitable sortable"
!style="width:9.3em"|Country!!Capital
|-
|'''France'''
|Paris
|- class="expand-child"
| colspan="2" | In Paris is the Eiffel Tower.
|-
|'''U.K.'''
|London
|- class="expand-child"
| colspan="2" | In the U.K. you cannot pay with euros.
|- class="expand-child"
| colspan="2" | And you drive on the left side of the road.
|-
|'''Germany'''
|Berlin
|- class="expand-child"
|colspan="2" | Germany includes the former DDR.
|}

Country	Capital
France	Paris
In Paris is the Eiffel Tower.
U.K.	London
In the U.K. you cannot pay with euros.
And you drive on the left side of the road.
Germany	Berlin
Germany includes the former DDR.

Dealing with problems

Numerical sorting problems

Most of these problems can now be fixed by manually specifying the sort mode of a column by putting data-sort-type="number" in the column header. See the example tables below, and see also meta:Help:Sorting#Sort modes and the section about forcing the sort mode of a column.

By default
Estimated attendance
500,000
200,000 - 400,000
100,000
60,000 - 350,000
40,000
35,000 - 50,000
20,000 - 100,000
10,000 - 100,000
6,000 - 7,000
5,000 - 10,000

With *data-sort-type*
Estimated attendance
500,000
200,000 - 400,000
100,000
60,000 - 350,000
40,000
35,000 - 50,000
20,000 - 100,000
10,000 - 100,000
6,000 - 7,000
5,000 - 10,000

Normally, 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. This problem with {{N/A}} can be fixed by putting data-sort-type="number" in the column header,

Even when using data-sort-type="number" in the column header, text in front of a number in any cell breaks numerical sorting. Text after a number is not a problem if the sort order of a column is specified by using data-sort-type="number".

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. Dashes are allowed anywhere in cells if data-sort-type="number" is used in the column header.

A dash after a number breaks numerical sorting of a column. Therefore a range (30-40) breaks numerical sorting of a column. Click the sorting button in the first table to the right, and see that sorting does not work. One solution is to use 2 columns for a range. See and experiment with preview views of the table in 15 October 2011 global protests. Using two columns there allows one to sort by either the minimum estimated crowd sizes, or by the maximum estimated crowd sizes.

Another option is to use one column and add data-sort-type="number" in the column header. Click the sorting button in the table to the far right. For more info see meta:Help:Sorting#Sort modes and the section about forcing the sort mode for a column.

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 after numbers currently break numerical sorting of a column. For example; compare these 2 versions of an article: [1] [2]. One has a reference in the "Wins" column and one does not. If data-sort-type="number" is used in the column header then references are OK after numbers.

"c." (circa, indicates "approximately") is often found in columns of numbers. It needs to be moved to a different column. Or if data-sort-type="number" is used in the column header then "c." can be put after the number.

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.

Date sorting problems

There is now a way to manually force a column to sort by date. This is done by adding data-sort-type="date" to the column header. See the cases where this is necessary below.

Year only

See List of countries by income equality. 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.

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.

Year and month

Date sorting does not work for columns with the year before the month. Adding data-sort-type="date" or data-sort-type="isoDate" to the column header does not help. Click each column header a couple times in the tables below to see. Year/month/day works, but only with data-sort-type="isoDate". See section farther down.

Year and month
1999 Dec
1999 Jan
2004 May
2004 Aug

Year and month
1999 December
1999 January
2004 May
2004 August

Year and month data-sort-type="date"
1999 Dec
1999 Jan
2004 May
2004 Aug

Year and month data-sort-type="date"
1999 December
1999 January
2004 May
2004 August

Year and month data-sort-type="isoDate"
1999 December
1999 January
2004 May
2004 August

Month and year

Date sorting does not work for columns with the month before the year. Adding data-sort-type="date" to the column header does not help.

Month and year
Dec 1999
Jan 1999
May 2004
Aug 2004

Month and year
December 1999
January 1999
May 2004
August 2004

Month and year data-sort-type="date"
Dec 1999
Jan 1999
May 2004
Aug 2004

Month and year data-sort-type="date"
December 1999
January 1999
May 2004
August 2004

Day, month, and year

Sorting works correctly in all cases below. Years before 100 break sorting. For example; year 99. If a number for a day is missing, sorting is broken.

Day, month, and year
5 Dec 1999
7 Jan 1999
14 May 2004
4 Aug 2004

Day, month, and year
5 December 1999
7 January 1999
14 May 2004
4 August 2004

Day, month, and year data-sort-type="date"
5 Dec 1999
7 Jan 1999
14 May 2004
4 Aug 2004

Day, month, and year data-sort-type="date"
5 December 1999
7 January 1999
14 May 2004
4 August 2004

Month, day, and year

Sorting works correctly in all the tables below. Years before 100 break sorting. For example; year 99. If a number for a day is missing, sorting is broken.

Month, day, and year
Dec 5, 1999
Jan 7, 1999
May 14, 2004
Aug 4, 2004

Month, day, and year
December 5, 1999
January 7, 1999
May 14, 2004
August 4, 2004

Month, day, and year data-sort-type="date"
Dec 5, 1999
Jan 7, 1999
May 14, 2004
Aug 4, 2004

Month, day, and year data-sort-type="date"
December 5, 1999
January 7, 1999
May 14, 2004
August 4, 2004

Year, month, and day

Sorting only works correctly with data-sort-type="isoDate". Years before 100 break sorting. For example; year 99. If a number for a day is missing, sorting is broken.

Date (year-month-day)
100-12-5
100-1-13
1011-8-1
207-11-7

Date (year-month-day) data-sort-type="date"
100-12-5
100-1-13
1011-8-1
207-11-7

Date (year-month-day) data-sort-type="isoDate"
100-12-5
100-1-13
1011-8-1
207-11-7

Date (year/month/day)
100/12/5
100/1/13
1011/8/1
207/11/7

Date (year/month/day) data-sort-type="date"
100/12/5
100/1/13
1011/8/1
207/11/7

Date (year/month/day) data-sort-type="isoDate"
100/12/5
100/1/13
1011/8/1
207/11/7

Date (year-month-day) (year/month/day) data-sort-type="isoDate"
100/12/5
100-1-13
1011/8/1
207-11-7

Date
100 Dec 5
100 Jan 13
1011 Aug 1
207 Nov 7

Date data-sort-type="date"
100 Dec 5
100 Jan 13
1011 Aug 1
207 Nov 7

Date data-sort-type="isoDate"
100 Dec 5
100 Jan 13
1011 Aug 1
207 Nov 7

Date data-sort-type="isoDate"
100 December 5
100 January 13
1011 August 1
207 November 7

Years before year 100

Non-date keys are the only option. For example; with data-sort-type="number". Sorting is down via the hidden data-sort-value number. Month and day must use 2 digits each in the hidden number value. Use the full number for the year in the hidden value:

year mm dd (no spaces).

Date
5 Dec 111
7 Jan 35
5 Dec 207
5 Dec 111 BC
7 Jan 35 BC
5 Dec 207 BC

{| class="wikitable sortable" border="1"
|-
! data-sort-type="number" | Date
|-
| data-sort-value="1111205" | 5 Dec 111
|-
| data-sort-value="350107" | 7 Jan 35
|-
| data-sort-value="2071205" | 5 Dec 207
|-
| data-sort-value="-1111205" | 5 Dec 111 BC
|-
| data-sort-value="-350107" | 7 Jan 35 BC
|-
| data-sort-value="-2071205" | 5 Dec 207 BC
|}

Any format can be used for what is seen by readers:

Date
5 Dec 111
7 Jan 35
5 Dec 207
5 Dec 111 BC
7 Jan 35 BC
5 Dec 207 BC

Date
5 December 111
7 January 35
5 December 207
5 December 111 BC
7 January 35 BC
5 December 207 BC

Date
Dec 5, 111
Jan 7, 35
Dec 5, 207
Dec 5, 111 BC
Jan 7, 35 BC
Dec 5, 207 BC

Date
December 5, 111
January 7, 35
December 5, 207
December 5, 111 BC
January 7, 35 BC
Dec 5, 207 BC

Date (year-month-day)
111-12-5
35-1-7,
207-12-5
111BC-12-5
35BC-1-7,
207BC-12-5

Examples of datatype auto detection

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

first alphabetic, later also numeric mode
123.4 ghi
2,500,000,000
300,000,000
3,000,000 abc
5,000,000
2,000 def
4,000
9,999
800,000
900,000

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 (?)
c. 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 "c. 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.

Tips & Tricks

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 is a workaround.

Styling workaround: 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

Excluding rows from sorting

Sometimes it is helpful to exclude the last row of a table from the sorting process. There are two methods to achieve this.

Header as a footer

You want a repeat of the header at the bottom. You do this by using the ! (Exclamation mark) syntax for all cells in the last row of the table. This will be recognized as a footer and the row will not be part of the sorting.

Wiki markup

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

What it looks like in your browser

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

This applies to all rows at the end of the table that are consecutive and fully made up out of header cells.

Plain footer

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"
|colspan="2" | 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, as long as the lines are consecutive.

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

Sorting with a hidden key

This methodology is deprecated, in favor of using data-sort-value

You can customize the sorting on a table by placing a value that is easily sorted before the content, and then hiding that value with HTML/CSS. To do this, enclose the value you wish to hide in and , or use the template {{Hs}}. For example, this technique can be used to create a sortable table containing the months:

{|class="wikitable sortable"
!Months
|-
|<span style="display: none;">a</span>January
|-
|<span style="display: none;">b</span>February
|-
|<span style="display: none;">c</span>March
|-
|<span style="display: none;">d</span>April
|-
|<span style="display: none;">e</span>May
|-
|<span style="display: none;">f</span>June
|-
|<span style="display: none;">g</span>July
|-
|<span style="display: none;">h</span>August
|-
|<span style="display: none;">i</span>September
|-
|<span style="display: none;">j</span>October
|-
|<span style="display: none;">k</span>November
|-
|<span style="display: none;">l</span>December
|}

{|class="wikitable sortable"
!Months
|-
|{{Hs|a}}January
|-
|{{Hs|b}}February
|-
|{{Hs|c}}March
|-
|{{Hs|d}}April
|-
|{{Hs|e}}May
|-
|{{Hs|f}}June
|-
|{{Hs|g}}July
|-
|{{Hs|h}}August
|-
|{{Hs|i}}September
|-
|{{Hs|j}}October
|-
|{{Hs|k}}November
|-
|{{Hs|l}}December
|}

Months
aJanuary
bFebruary
cMarch
dApril
eMay
fJune
gJuly
hAugust
iSeptember
jOctober
kNovember
lDecember

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

This methodology is deprecated, in favor of using data-sort-value="string" combined with data-sort-type="text"

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. 999 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

This methodology is deprecated, in favor of using data-sort-value="number" combined with data-sort-type="number"

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`	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

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

Note: {{dts}} is being merged with another template. Click its link for info.

The simplest way to format sortable dates in a table is to use the {{dts}} template. In accordance with the manual of style, the template would be invoked using the following format:

{{dts|4 July 1776}}

Please see the documentation of the template {{dts}} for full details on how to use this.

Issues

String sort mode
2006-12-032006-12-03
-0000-03-27-0000-03-27
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
2006-11-082006-11-08
0304-12-310304-12-31
2005-05-152005-05-15

Date sorting works by formatting dates so they can be sorted numerically. For example:

yyyy mm dd

or

2001 07 21

...for 21 July 2001. The "display:none" style can be used to hide a sortable numeric date before the displayed date. {{dts}} does this automatically, and is recommended in most cases.

You can use July 7, 2012 etc. to get sortable dates. Example:

Date
July 7, 2012
May 7, 2012

For years BC, !9937-09-23 can be used for -0062-09-23 (62 BC): Simply subtract the year BC from 10,000.

See also: bugzilla:8226

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 !}}c. 500 BC ||

|-
| [[Axum]] || [[Kingdom of Axum]] || [[Ethiopia]] || {{Hs|-400 !}}c. 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	c. 500 BC
Ife		Osun State, Nigeria	c. 8th century	earliest traces of habitation date to the 4th century BC.
Yeha	D'mt	Ethiopia	c. 700 BC	Oldest site of continuous habitation in Sub-Saharan Africa.
Axum	Kingdom of Axum	Ethiopia	c. 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	c. 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.

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.

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.

Maintaining tables sorted by rank

Tables in rank order may become difficult to maintain as the list is updated. People keep adding more rows to the table, but fail to renumber all the ranks each time a new one is added, because it seems too laborious.

One way to resort a table that has been updated is to copy the table (in wiki markup), remove the table code ("|-", etc.), replace the cell separation code ("||") with Tab characters using Notepad (built-in with Windows) or TextEdit (built-in with OS X) and paste the table data into Excel or Google Docs (free of charge). Type "1" and "2" in the first two rows of the rank column, select both cells and then fill out the rest by dragging down the little blue square on the lower-right corner of the second cell. Copy the table from the spreadsheet and paste it into a text editor. Finally, add back the wiki table code with the text editor.

Initial alphabetical sort versus initial sort by rank order

See also: Category:Tables that may need a separate rank column.

Note: A template that can be added to article or talk pages: {{Rank order}}. Or copy this link wikitext to talk pages:

[[Help:Sorting#Initial alphabetical sort versus initial sort by rank order]]

It is a good idea to keep lists and tables in some kind of initial non-random sort order. Numbered rank order can be difficult to maintain as the list is updated, and as the rankings change. For example; in a nation list, updating the info for a single nation may require changing the rank numbers of many nations.

This discourages people from updating the list. If they do update the list, they may not bother to update the rank order. So the list becomes more and more incorrect over time. See lists of country data. See Category:Lists of countries by per capita values and Category:Lists of countries.

It is much easier to keep a list in rank order if the numbered rank column (1,2,3) is removed from the table, and then put next to the table in a separate column. See how-to sections below. Just removing or separating the rank column (1,2,3) can greatly ease future updating of the table, whether the table is initially in rank order or alphabetical order.

It can be even easier maintenance and updating in some cases if the list is initially in alphabetical order, especially if the sources and references are also in alphabetical order. Readers can be instructed to use the sort button to order a number column.

Removing a rank column (1,2,3) from a table

You can remove the rank column cells one-by-one manually, or with a quicker method. Unfortunately, none of the quick methods listed below can be done with the Notepad text editor that comes with Windows. The methods below are specific to NoteTab Light (freeware version of NoteTab). It installs quickly and easily.

If the rank column (1,2,3) is the first column, then there is a fast way to remove it. First paste the wikitext for the table list into a new page in Notetab Light. Click your mouse cursor at the top left. Do not select anything. Click on the "modify" menu, then "block", and then "delete". Enter the block dimensions in the dialog box. For long lists you will need to break up the list first into a 1-digit (0-9) rank section, a 2-digit (10-99) rank section, and a 3-digit (100-999) rank section.

To get the number of lines go to the tools menu, then "text statistics", then "more", and then scroll down to the bottom for the total number of paragraphs. Enter that number in the spot for "block rows" in the dialog box. Then click OK. The block with the rank column will be removed.

Then put back |- (wikitext for row) between each line. Do that via find-and-replace by replacing ^p with ^p|-^p

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

|- is the wikitext for a table row.

If there are blank lines between the entries replace ^p^p with ^p|-^p

Putting a table in alphabetical order

If you also want to alphabetize the table, then first make sure the alphabetical column is the first column. To quickly alphabetize the list paste the wikitext into a new page in Notetab Light.

Click on the "modify" menu, then "lines", then "sort", and then "ascending". That will put "A" at the top and "Z" at the bottom. Put back |- (wikitext for row) between each line as described above. Copy the wikitext and paste it back into the article. Save the page.

Auto-ranking or adding a separate rank column (1,2,3) next to a table

Note: Copy separate rank-order table (1,2,3) from here. It is 1 to 250. Use as much as is needed. See also this list of just the numbers.

There are Bugzilla threads asking for a table option for auto-ranking, fixed rank-order column, or row numbering, as an integral part of a table. See Bugzilla:40634 and Bugzilla:40618. For info on a separate rank column see below.

The rank column (1,2,3) can be removed, and put to the side of the table. See examples farther down. The rank column then never has to be updated, except to add more numbers at the end if necessary. This allows any initial sort order for the table. It allows any column to be sorted later via the sort button.

Click the sort button above a column in the main table on the right. Note that the rank column does not change. This allows one to see rank order for any data column. A note can be added above the table; something like this:

See the rank order of any data column by clicking the sort button above any data column.

A separate rank column only works when there is only one line per row in the main table. So wide tables, or tables with a notes column are problematic. There could be 2 lines in some rows, depending on screen width, and the length of notes. For example: List of countries and dependencies by area.

Tables that extend all the way across the page may be problematic for the same reason. In some cases this can be fixed by narrowing the headers by using breaks in the header titles:  . The number of lines in the header in the rank column can be made to match that for the main table. See examples farther down.

Tables with references in cells other than header cells are problematic. Reference numbers are in superscript, and this increases the height of the cell. So a separate rank column may not work in this case, especially when multiple cells in a column have references. See this example. Note that the rows in the rank-order column gradually stop lining up with the rows to the right as one goes down the table.

Here is how to combine a main table and a separate table with just a rank column.

name	data	more data
cats	273	53
dogs	65	8,492
mice	1,649	548

Rank
1
2
3

The two tables are combined by wrapping them within a 3rd table that does not have a border. Look at the wikitext to understand. See examples below, and here: List of countries by public debt.

Rank
1
2
3

name	data	more data
cats	273	53
dogs	65	8,492
mice	1,649	548

The number of lines in the rank header cell should match the maximum number of lines in header cells in the main table.

2 lines in header cells.

Rank order
1
2
3

name	data	more data
cats	273	53
dogs	65	8,492
mice	1,649	548

3 lines in header cells.

Rank order -
1
2
3

name	data	even more data
cats	273	53
dogs	65	8,492
mice	1,649	548

References in the headers in the main table add a little height to the header cells. This additional height can be ignored since it does not effect alignment much. Or a reference note can be added to the rank column to make it line up more perfectly with the main table.

Rank order - ^[1]
1
2
3

name	data	even more data^[2]
cats	273	53
dogs	65	8,492
mice	1,649	548

^ Note: The reference number in the rank-order column header makes the table rows line up perfectly.
^ Reference.

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

Sorting with increase/decrease/steady templates

To enable sorting of cells with Template:Increase, Template:Decrease or Template:Steady, add a sort key, e.g. {{increase|2}}2, {{decrease|-1}}1 or {{steady|0}}. To fix an existing table, use Search and replace (right icon in the Advanced toolbar) with Treat search string as a regular expression selected to do the following replacements:

Search for	Replace with
(\{\{increase)(\}\})([0-9]*)	$1\|$3$2$3
(\{\{decrease)(\}\})([0-9]*)	$1\|-$3$2$3
(\{\{steady)(\}\})	$1\|0$2

Example	Without key	With key
Apple	10	10
Banana	2	2
Cherry	1	1
Durian