View source for Help:Sorting

{{short description|Help with sorting of rows in tables}}
{{About|sorting of tables|sorting of categories|Wikipedia:Categorization#Sort keys|sorting of article sections|WP:ORDER|sorting of AfD entries|WP:DELSORT|sorting of stubs|WP:STUBSORT}}
{{Wikipedia how to|WP:SORT|WP:TABLESORT}}
{{Wiki markup}}
{{TOC limit|3}}

== Using sortable tables ==
When browsing Wikipedia you may encounter [[Help:Table|tables]] that have been made ''[[Help:Table#Sorting|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 in ascending order based on the selected column. A second click on the same arrow will sort in descending order. A third click will restore the original order of the whole table. For example; a third click causes [[List of countries by intentional homicide rate]] to reset to its original order by subregion. 

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 a long time.

=== Example ===
This is an example of a small ''sortable'' table.

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

=== Tables with complex headers ===

Tables with more complex headers than before now sort correctly. For example:

{| class="wikitable sortable"
|-
! rowspan=2 | name
! colspan=2 | data columns
! rowspan=2 | another column
|-
! data
! more data
|-
| cats
| 273
| 53
| 1
|-
| dogs
| 65
| 8,492
| 2
|-
| mice
| 1,649
| 548
| 3
|}

Using two or more header rows, the sort arrows are placed on the bottom header row by default. They can be placed a maximum of one row higher by setting <code>class="sorttop"</code> at the top of the bottom header row.

{| 
|- style=vertical-align:top;
|
'''Default'''
{| class="wikitable sortable"
|-
! column 1
! column 2
|-
! style="text-align:left;" | 3
! style="text-align:left;" | 7
|-
| 1
| 3
|-
| 2
| 4
|}
|
<pre>
{| class="wikitable sortable"
|-
! column 1
! column 2
|-
! style="text-align:left;" | 3
! style="text-align:left;" | 7
|-
| 1
| 3
|-
| 2
| 4
|}
</pre>
|
|
|
|
'''Using <code>class="sorttop"</code>'''
{| class="wikitable sortable"
|-
! column 1
! column 2
|- class="sorttop"
! style="text-align:left;" | 3
! style="text-align:left;" | 7
|-
| 1
| 3
|-
| 2
| 4
|}
|
<pre>
{| class="wikitable sortable"
|-
! column 1
! column 2
|- class="sorttop"
! style="text-align:left;" | 3
! style="text-align:left;" | 7
|-
| 1
| 3
|-
| 2
| 4
|}
</pre>
|}

=== Tables with complex data rows ===
:
Tables can have cells spanning multiple rows, using <code>|rowspan=''n''</code>. (See [[Help:Table#Cells spanning multiple rows or columns|Help:rowspan]]).

The number of rows must be indicated with each use of rowspan. Before any sorting can be done, the rowspan setup must be correct. An incorrect rowspan organisation breaks sorting option, leaving incorrect data.

See examples below.

When sorted all the rows are filled. Tables without rowspan are much easier to maintain by less experienced editors, and by editors who are stopping by only once to edit the table.

Correct rowspan numbers, with sorting in working order:

{| class="wikitable sortable"
|-
! name
! popularity
! data
! more data
! year
|-
| cats
| rowspan=2 | popular pet
| 273
| 53
| 2013
|-
| dogs
| 65
| 8,492
| rowspan=2 | 2014
|-
| mice
|
| 1,649
| 548
|}
Note that, after sorting, the rowspanning cells are cut into rows and their content is repeated (the year "2014" in the example). If the original order of a table is restored by clicking a third time on the same arrow then the cells will remain repeated and not revert to the original rowspan.

Incorrect rowspan numbers breaking sorting, and causing mix-ups in rows and columns:

{| class="wikitable sortable"
|+ {{!xt|1=Bad use of rowspan breaks sorting option}}
|-
! name
! popularity
! data
! more data
! year
|-
| cats
| rowspan=3 | popular pet
| 273
| 53
| 2013
|-
| dogs
| 65
| 8,492
| rowspan=3 | 2014
|-
| mice
|
| 1,649
| 548
|}

==== Online table editors and rowspan ====

There is an easy online wiki table editor here:
* [http://wikitable.eu5.org wikitable.eu5.org]

It makes it easy to edit the text and links in individual cells of a table. It is especially easy when there are no rowspans in the body of a table. See the previous section. Without rowspans it is easier to change the underlying framework of a table, and move stuff around. Once the wikitext framework is simpler, the online table editor is simpler too, because you don't have to edit the wikitext as much in order to edit the table.

=== 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 ([[Sorting algorithm#Stability|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).

{|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-03-2004||5.00||row 3
|-
|1||a||03-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
|-
|25||z||01.sep.2006||1.50||row 12
|-class="sortbottom"
!Bottom!!!!!!!!
|-
|}

== Options for more columns in a narrow screen ==

=== Vertical headers ===

:See: '''[[Template:Vert header]]'''

{| class="wikitable sortable"
|-
! {{vert header|stp=1|name}}
! {{vert header|stp=1|data}}
! {{vert header|stp=1|more data}}
! {{vert header|stp=1|another column}}
|-
| cats
| 273
| 53
| 1
|-
| dogs
| 65
| 8,492
| 2
|-
| mice
| 1,649
| 548
| 3
|}

This template also works with headers that span rows or columns (using ''rowspan'' and ''colspan''). '''Note''' that there is no vertical bar <code>|</code> between <code>rowspan=2</code> and <code>{{vert header</code>

{| 
|- style=vertical-align:top;
|
{| class="wikitable sortable"
|-
! rowspan=2 {{vert header|stp=1|name}}
! colspan=2 {{vert header|data columns}}
! rowspan=2 {{vert header|stp=1|another column}}
|-
! {{vert header|stp=1|data}}
! {{vert header|stp=1|more data}}
|-
| cats
| 273
| 53
| 1
|-
| dogs
| 65
| 8,492
| 2
|-
| mice
| 1,649
| 548
| 3
|}
|
<pre>
{| class="wikitable sortable"
|-
! rowspan=2 {{vert header|stp=1|name}}
! colspan=2 {{vert header|data columns}}
! rowspan=2 {{vert header|stp=1|another column}}
|-
! {{vert header|stp=1|data}}
! {{vert header|stp=1|more data}}
|-
| cats
| 273
| 53
| 1
|-
| dogs
| 65
| 8,492
| 2
|-
| mice
| 1,649
| 548
| 3
|}
</pre>
|}

=== Sorting buttons in a separate row ===
{{Tracked|T35249}}
:'''''Note:''' From an [[Wikipedia talk:Manual of Style/Accessibility/Data tables tutorial/Archive 2#Help:Sorting. Section about sorting buttons in a separate row. Accessibility questions|April 2020 discussion]] someone using a [[screen reader]] wrote: "It's still very readable with the empty/clickable row, it's just more annoying to have to go past blank cells; I know they can occur in other circumstances, too. Perhaps this is one of these cases where a minor accessibility improvement loses out for now to better display on screens." There is a [[phab:T35249|Phabricator task T35249]] asking that the default location of the sorting icon be below the header text.''
{{replace|
{{Accessibility dispute|section|reason=empty table headers complicate keyboard navigation and do not give meaningful screen reader output|talk="In a narrow space" empty headers are accessibility errors|date=March 2017}}
|Help talk:Sorting|Help talk:Sorting/Archive 3}}
To make a table more compact in narrow screens, the sorting buttons can be put in an extra header row below the header cells containing text. The sorting button always ends up in the lowest header cell.

Add a line break <code><nowiki><br></nowiki></code> or non-breaking space <code>&amp;nbsp;</code> in one of the empty header cells. Otherwise the sorting row will be very narrow. If you are using the <code>data-sort-type="..."</code> attribute, it must be added to the header cell with the sorting icon. 

The sorting buttons can be centered with <code>style="background-position: center;" |</code> in each cell. For comparison, this is only done for the last cell below. Here is the table followed by the wikitext for the header cells.

{|
|- style=vertical-align:top;
|
{| class="wikitable sortable"
|-
! rowspan=2 | name
! colspan=2 | data columns
! rowspan=2 | another column
|-
! data
! more data
|-
! <br>!! !! !! style="background-position: center;" | 
|-
| cats
| 273
| 53
| 1
|-
| dogs
| 65
| 8,492
| 2
|-
| mice
| 1,649
| 548
| 3
|}
|
<pre>
{| class="wikitable sortable"
|-
! rowspan=2 | name
! colspan=2 | data columns
! rowspan=2 | another column
|-
! data
! more data
|-
! <br>!! !! !! style="background-position: center;" | 
|-
</pre>
|}

== Creating sortable tables ==
[[File:Wikipedia VisualEditor Table Properties.png|thumb|The properties panel of a table in VisualEditor allows you to mark a table as sortable.]]
[[Help:Table|Tables]] can be made [[sorting|sortable]] via [[client-side JavaScript]] by adding <code>class="wikitable sortable"</code> 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 [[Help:Wiki markup|wikicode]]. For this the <code>!</code> character is used in the table syntax.

If you are using the [[Wikipedia:VisualEditor|Visual editor]], you can open the properties dialog of a table and select the sortable option.

=== Simple example ===
This is the wikisource of the table [[#Example|shown]] in the first section and shows the typical way to enable table sorting:
<pre>
{| class="wikitable sortable"
|-
! name
! data
! more data
|-
| cats
| 273
| 53
|-
| dogs
| 65
| 8,492
|-
| mice
| 1,649
| 548
|}
</pre>
The <code>!</code> 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 [[Help:Table/Introduction to tables|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. The '''[[VisualEditor]]''' makes it easy to move individual table columns and rows around. For info about that, and also about putting a table in initial alphabetical order see '''[[#initial alphabetical order|§ Initial alphabetical order]].'''

== Restrictions and exclusions ==

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 selected columns unsortable ===

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

(When using {{tl|vert header}}, disable column sorting by omitting <code>|stp=1</code> in that template, which overrides anything placed before it.)

'''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: 22.85!!
 <nowiki>|}</nowiki>

'''What it looks like in your browser{{anchor|Sortable looks}}'''

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

=== Excluding final 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.

{|
|- style="vertical-align:top;"
|
'''Wiki markup'''

<pre>
{|class="wikitable sortable"
!Name!!Surname!!Height
|-
|John||Smith||1.85
|-
|Ron||Ray||1.89
|-
|Mario||Bianchi||1.72
|-
!Name!!Surname!!Height
|}
</pre>
|
'''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
|-
! 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 <code>class="sortbottom"</code> on the desired table row (line starting with <code>|-</code>).
{|
|- style="vertical-align:top;"
|
'''Wiki markup'''

<pre>
{|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
|}
</pre>
|
'''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
|- class="sortbottom"
| colspan="2" | Average:||1.82
|}
|}
It is possible to keep multiple lines fixed at the bottom, as long as the lines are consecutive. If the original order of a table is restored by clicking a third time on the same arrow then rows with <code>class="sortbottom"</code> will remain at the bottom even if they were not originally at the bottom.

=== Excluding top rows from sorting ===

This works the same as above for plain (non-header) rows at the top. This can be achieved using <code>class="sorttop"</code> on the desired table row (line starting with <code>|-</code>). It is possible to keep multiple lines fixed at the top, as long as the lines are consecutive.

== Configuring the sorting ==
By default, the system tries to guess the data type in each column. It does this by looking at the first five rows and evaluating their contents. This process works most of the time but can also easily get confused if you inconsistent values or additional specifiers that the system doesn't know about. To avoid this ambiguity you can force a particular data type or override the value of a cell.

=== Forcing a column to have a particular data type ===
{{hatnote|For more info see [[meta:Help:Sorting#Forcing the sort mode for a column]].}}

The <code>data-sort-type="..."</code> 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. It must go in the header cell with the sorting icon. It will not work in a header cell without a sorting icon. For example; when there are two rows of headers, the bottom row will always have the sorting icons. 

The following (case-insensitive) values are valid for <code>data-sort-type</code>:
* <code>text</code>
* <code>number</code>
* <code>currency</code>
* <code>url</code> for website addresses
* <code>IPAddress</code> for numeric [[IP address|internet protocol addresses]]
* <code>date</code> for language specific standard date format
* <code>isoDate</code> for dates in [[ISO 8601]] format (e.g. YYYY-MM-DD)
* <code>usLongDate</code> for dates in the US format (with the month before the day)
* <code>time</code>

For example:
{| class="wikitable"
|-
! Wikitext
! Without any <code>data-sort-type</code>
! With <code>data-sort-type=text</code>
|-
| <syntaxhighlight lang="text">
{| class="wikitable sortable"
|-
! data-sort-type=text | Album
|-
 ... etc ...
|}
</syntaxhighlight>
|
{| class="wikitable sortable"
|-
! Album
|-
| ''[[21 (Adele album)|21]]''
|-
| ''[[19 (Adele album)|193]]''
|-
| ''[[21 (Adele album)|215]]''
|-
| ''[[21 (Adele album)|21]]''
|-
| ''[[19 (Adele album)|19]]''
|-
| ''[[21 (Adele album)|21]]''
|-
| ''[[Matinée (album)|Matinée]]''
|-
| ''[[21 (Adele album)|21]]''
|-
| ''[[19 (Adele album)|19]]''
|-
| ''[[Everything Is New]]''
|-
| ''[[Love & War (Daniel Merriweather album)|Love & War]]''
|}
|
{| class="wikitable sortable"
|-
! data-sort-type=text | Album
|-
| ''[[21 (Adele album)|21]]''
|-
| ''[[19 (Adele album)|193]]''
|-
| ''[[21 (Adele album)|215]]''
|-
| ''[[21 (Adele album)|21]]''
|-
| ''[[19 (Adele album)|19]]''
|-
| ''[[21 (Adele album)|21]]''
|-
| ''[[Matinée (album)|Matinée]]''
|-
| ''[[21 (Adele album)|21]]''
|-
| ''[[19 (Adele album)|19]]''
|-
| ''[[Everything Is New]]''
|-
| ''[[Love & War (Daniel Merriweather album)|Love & War]]''
|}
|}

Without <code>data-sort-type=text</code> 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.

Note that if a column without declared sort-type contains only numeric values, ''but with a reference'' <code><nowiki><ref>...</ref></nowiki></code> immediately after the last digit of at least one number, this may cause the column to be sorted as text (alphanumeric) by default, <code>1 12 2 27 289 3{{dummy ref|17}} 4 5 ...</code> This can be avoided by declaring the sort type:<code>! data-sort-type="number"|Elev. (ft)</code> instead of <code>! Elev. (ft)</code>.<!--this does happen & causes confusion as it is not obvious. An incorrect sort because of this was reported in April 2014, but remained without response or correction until October 2016. See [[Template talk:Wikitable#"sort" function not working correctly on table/list article (re mtn elevations)]]-->

=== Default data type of a column ===
If you do not specify a <code>data-sort-type</code>, the sort modes (the [[data type]]s, 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-MM-YYYY", "DD-MM-YY", or "DD mmm YYYY"
:* order: numeric value of YYYYMMDD; The string DDsMMsYYYY of length 10 (if characters positioned at s are equal together and are either '/' or '-' separator) is positioned as YYYYMMDD, the string DDsMMsYY of length 8 (if characters positioned at s are equal together and are either '/' or '-' separator) as 19YYMMDD if YY >= 50 and 20YYMMDD otherwise, and the string "DD mmm YYYY" with mmm an (abbreviated) month name.
; isoDate (ISO 8601)
:* criterion: format "±YYYY-MM-DD", with 1-4 digits for year "YYYY" from -9999 to 9999, month only with digits, format "±YYYY-MM-DDThh:mm:ss.sss±TH:TM" with time hour "hh", minutes "mm", seconds "ss.sss", and time zone offset "TH:TM, right values are optional.
:* order: numeric, with time in milliseconds after 01 January, 1970 UTC.
; 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 ([https://web.archive.org/20121226161834/www.devguru.com/technologies/ecmascript/QuickRef/parsefloat.html parseFloat] is applied); it is regarded as zero if it is empty; in other cases (parseFloat returns [[w:NaN|NaN]]), the element is positioned like -∞.
:::''Proposed internationalisation: In German etc., treat comma as a decimal point.''
; string
:* criterion: all other cases;
:* order: uses locale specific (so in this case English) ordering if your browser supports it. Alternatively after conversion of capitals to lowercase the order is [[w:ASCII|ASCII]] – partial list showing the order: !"#$%&'()*+,-./09:;<=>?@[\]^_'az{|}~é— (see also below; a blank space comes before every other character; a [[non-breaking space]] code <code>&amp;nbsp;</code> counts as a space; two adjacent ordinary blank spaces count as one; for multiple blank spaces one can use <code>&amp;nbsp;</code> or alternate <code>&amp;nbsp;</code> 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 first 5 non-blank rows below the header after loading the page. 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 [[Help:Table#Row template|row template]] this can be done very conveniently.

The method of making sure the sort mode of each column is as desired, is specify a <code>data-sort-type</code>, see [[#Forcing a column to have a particular data type|up]].

=== 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 using {{tlx|sortname}}, like this: {{tlx|sortname|first|last|optional link target|optional sort key}}. Alternatively, you can set the <code>data-sort-value</code> attribute.
{|
|- style=vertical-align:top;
|
'''Wiki markup'''

 <nowiki />{|class="wikitable sortable"
 <nowiki />!Name and surname!!Height
 <nowiki />|-
 <nowiki />|<b style="color:red">data-sort-value="Smith, John"</b>|John Smith||1.85
 <nowiki />|-
 <nowiki />|<b style="color:red">data-sort-value="Ray, Ian"</b>|Ian Ray||1.89
 <nowiki />|-
 <nowiki />|<b style="color:red">data-sort-value="Bianchi, Zachary"</b>|Zachary Bianchi||1.72
 <nowiki />|-
 <nowiki />!Average:||1.82
 <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
|-
!Average:||1.82
|}
|}
It is especially handy to sort military ranks in rank-seniority order.

'''Wiki markup'''

 <nowiki>{|class="wikitable sortable"</nowiki>
 !Name and surname!!Rank
 |-
 |<b style="color:red">data-sort-value="Smith, John"</b>|John Smith||<b style="color:blue">data-sort-value="16"</b>|<nowiki>[[Corporal|Cpl]]</nowiki>
 |-
 |<b style="color:red">data-sort-value="Ray, Ian"</b>|Ian Ray||<b style="color:blue">data-sort-value="8"</b>|<nowiki>[[Captain (OF-2)|Capt]]</nowiki>
 |-
 |<b style="color:red">data-sort-value="Bianchi, Zachary"</b>|Zachary Bianchi||<b style="color:blue">data-sort-value="10"</b>|<nowiki>[[2nd Lieutenant|2 Lt]]</nowiki>
 |}

This gives:

{|class="wikitable sortable"
!Name and surname!!Rank
|-
|data-sort-value="Smith, John"|John Smith||data-sort-value="16"|[[Corporal|Cpl]]
|-
|data-sort-value="Ray, Ian"|Ian Ray||data-sort-value="8"|[[Captain (OF-2)|Capt]]
|-
|data-sort-value="Bianchi, Zachary"|Zachary Bianchi||data-sort-value="10"|[[2nd Lieutenant|2 Lt]]
|-
|}

See also [[mw:Help:Sorting#Specifying a sort key]].

'''If you have a list where all the entries start with quotes ("),''' and you want to set a sort key for one of the entries, then you will need to use the '''[http://www.ascii.cl/htmlcodes.htm HTML name or number]''' for quotes at the beginning of that sort key. See '''[[List of XML and HTML character entity references#Character entity references in HTML|here]]''' too. Lists of song titles for example sometimes have each song title in quotes. So to sort by a particular word in a song title use one of these:

<code style="color:red; font-weight:bold;">data-sort-value="&amp;quot;WORD"</code>

<code style="color:red; font-weight:bold;">data-sort-value="&amp;#34;WORD"</code>

=== Keeping some rows together ===
<code>data-sort-value</code> can be used to keep certain rows together. The specified order of these rows is preserved. An example is to keep "South Holland" immediately after "Netherlands", whatever the sort order or column:
{|
|style="vertical-align:top;" | <pre><nowiki>
{|class="wikitable sortable"
!Country/province!!Capital
|-
|France||Paris
|-
|Netherlands||Amsterdam
|-
|data-sort-value=Netherlands|South Holland||data-sort-value=Amsterdam|The Hague
|-
|UK||London
|}
</nowiki></pre>
| style=vertical-align:top; |<!--
-->
{|class="wikitable sortable"
!Country/province!!Capital
|-
|France||Paris
|-
|Netherlands||Amsterdam
|-
|data-sort-value=Netherlands|South Holland||data-sort-value=Amsterdam|The Hague
|-
|Poland||Warsaw
|-
|UK||London
|}
|}

If you have rows that contain colspans, this might become a little difficult. You can also use the <code>class="expand-child"</code> on a row; it will then always be below the row just above it in the table source, wherever that row may be sorted in the table.

{|
|style=vertical-align:top; | <pre><nowiki>
{| class="wikitable sortable"
!style="width:9.3em"|Country!!Capital
|-
|'''France'''
|Paris
|- class="expand-child"
| colspan="2" | In Paris is the Eiffel Tower.
|-
|'''UK'''
|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.
|-
|'''Germany'''
|Berlin
|- class="expand-child"
|colspan="2" | Germany includes the former DDR.
|}</nowiki></pre>
| style="vertical-align:top;" |<!--
-->
{| class="wikitable sortable"
!style="width:9.3em"|Country!!Capital
|-
|'''France'''
|Paris
|- class="expand-child"
| colspan="2" | In Paris is the Eiffel Tower.
|-
|'''UK'''
|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.
|-
|'''Germany'''
|Berlin
|- class="expand-child"
|colspan="2" | Germany includes the former DDR.
|}
|}

== Examples of datatype auto detection. First 5 cells in a column ==
The script sees what the first 5 cells in a column contain. The sorting mode becomes '''numeric''' if the first 5 cells contain <u>a number only</u> (comma and period used in number formatting are accepted as number). The numeric sorting order is maintained even when text is found in the cells that follow the 5th cell. 123,564,589.7e12 is in [[scientific notation]] and is treated as a number. An empty cell is treated as a non-number when sorting numerically. There is an empty cell initially at the bottom of each of the 2 tables just below. 

'''Datatype auto detection is inconsistent.''' It is '''always better to add''' a '''<code>data-sort-type</code>''' to the '''column header.''' 

{|
|- style="vertical-align:top;"
|
{| class="wikitable sortable"
! Sort order<br>auto-detected<br>as text
|-
| 123,564,589.7e12
|-
| 9
|-
| 70
|-
| 80 <span style="color:red">approx</span>
|-
| -80
|-
| abc 80
|-
| aaa
|-
| 600
|-
| 300,000,000
|-
| 3,000,000
|-
| 
|}
|
{| class="wikitable sortable"
! Sort order<br>auto-detected<br>as number
|-
| 123,564,589.7e12
|-
| 9
|-
| 70
|-
| -80
|-
| 600
|-
| 80 <span style="color:red">approx</span>
|-
| abc 80
|-
| aaa
|-
| 300,000,000
|-
| 3,000,000
|-
| 
|}
|}

Single currency character, or single alphabetic character, does not currently change what the script determines via the first 5 cells in a column: '''Numerical order.'''

{|
|- 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"
! a
|-
| a 9
|-
| a 80
|-
| a 70
|-
| a 600
|}
|
{| class="wikitable sortable"
! e
|-
| e 9
|-
| e 80
|-
| e 70
|-
| e 600
|}
|}

Percentage sign does not change from determination as '''numerical order.''' Number combinations with minus or divide signs within them are still detected as numbers. Their numerical ordering though is determined by the number before the minus or divide sign. 

{|
|
{| class="wikitable sortable"
! Percentage 
|-
| 7%
|-
| 2
|-
| 4
|-
| 22
|-
| 111
|}
|
{| class="wikitable sortable"
! Number combinations
|-
| 7-4
|-
| 2
|-
| 4
|-
| 22/7
|-
| 111
|}
|}

A '''plus sign''' in an '''empty cell''' among the first 5 cells breaks default numerical sorting. As does a '''plus sign after a number''' if it is in one of the first 5 cells in a column. 

{|
|- style="vertical-align:top;"
|
{| class="wikitable sortable"
! Sort order<br>auto-detected<br>as text
|-
| 400 
|-
| 40,000 
|-
| + 
|-
| 60,000 
|-
| 20,000 
|-
| 6,000 
|-
| 5,000 
|}
|
{| class="wikitable sortable"
! Sort order<br>auto-detected<br>as text
|-
| 400 
|-
| 40,000 
|-
| 300+
|-
| 60,000 
|-
| 20,000 
|-
| 6,000 
|-
| 5,000 
|}
|}

== Numerical sorting problems ==
:'''''Note:''' See the section above about datatype auto detection via the first 5 cells in a column.''

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

To work '''<code>data-sort-type=number</code>''' needs to be in the '''header cell''' that '''contains the sorting icon.''' In tables with multi-row headers, the sorting icon will be in the lowest header cells. 

References <code><nowiki><ref>...</ref></nowiki></code> after a number in any cell (including the first five cells) no longer break numerical sorting. 

Text breaks default numerical sorting if it is before or after a number in one of the first 5 cells in a column. 

A colon by itself (to signify no data, for example) in one of the first 5 cells in a column breaks numerical sorting. 

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

"'''c.'''" ([[Wiktionary:circa|circa]], indicates "approximately") is often found in columns of numbers. It needs to be put after the number in order for numerical sorting to work. Alternatively, it can be moved to a different column. The addition of <code>data-sort-type=number</code> to the column header does not allow c. to be put in front of 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. Look in the first 5 cells for  anything other than numbers, and correct those cells according to these rules. Better yet, add <code>data-sort-type=number</code> to the column header. Later editing by other editors will not break numerical sorting. 

A dash, of any kind, in a blank cell in one of the first 5 cells in a column breaks default numerical sorting of a column. 

A dash in front of a number does not break numerical sorting.

Dashes are allowed anywhere in cells if <code>data-sort-type=number</code> is used in the column header.

The {{tl|N/A}} template in the first five cells of a column is inconsistent in its effect on automatic datatype detection. It is always better to specify a <code>data-sort-type</code> in the column header. 

=== Numerical ranges ===
:'''''Note:''' Most problems are fixed by adding '''<code>data-sort-type=number</code>''' to the column header. It also prevents problems caused by later editing.''

A dash after a number no longer breaks default numerical sorting of a column. Therefore, a range (30–40) now works.

A plus sign after a number breaks default numerical sorting if it is in one of the first 5 cells in a column. 

A plus sign in an otherwise empty cell breaks default numerical sorting of a column. That is if the cell is one of the first 5 cells in the column.

You can also use 2 columns for a range if you want to sort by either the lower or upper range. If you want the upper range to sort best all cells need to be filled in with numbers. For example; you can use the same number in both the lower and upper range. You can also add a plus sign after the number in the upper range.

'''The first set of tables below do not sort correctly,''' except for the lower range which has no complicating factors. Note that '''"400+"''' and '''"400 +"''' do not sort correctly in their columns. These tables do not have <code>data-sort-type=number</code> in their column headers.

{|
|- style=vertical-align:text-top;
|
{| class="wikitable sortable"
|+ One column
! Estimated<br>attendance
|-
| 400 +
|-
| 40,000+
|-
| 200,000–400,000
|-
| 400,000+
|-
| 60,000–350,000
|-
| 40,000
|-
| 40,000–50,000
|-
| 20,000–100,000
|-
| 10,000–100,000
|-
| 6,000–7,000
|-
| 5,000–10,000
|}
|
{| class="wikitable sortable"
|+ One column
! Estimated<br>attendance
|-
| 400+
|-
| 40,000+
|-
| 200,000–400,000
|-
| 400,000+
|-
| 60,000–350,000
|-
| 40,000
|-
| 40,000–50,000
|-
| 20,000–100,000
|-
| 10,000–100,000
|-
| 6,000–7,000
|-
| 5,000–10,000
|}
|
{| class="wikitable sortable"
|+ Two columns
! colspan=2| Estimated<br>attendance
|-
! (lower) !! (upper)
|-
| 400 || 400+
|-
| 40,000 || 40,000+
|-
| 200,000 || 400,000
|-
| 400,000 || +
|-
| 60,000 || 350,000
|-
| 40,000 ||
|-
| 40,000 || 50,000
|-
| 20,000 || 100,000
|-
| 10,000 || 100,000
|-
| 6,000 || 7,000
|-
| 5,000 || 10,000
|}
|}

'''<code>data-sort-type=number</code>''' has '''fixed the sorting in the tables below.''' Note the sorting of '''400+''' and '''400 +'''. 

{|
|- style=vertical-align:text-top;
|
{| class="wikitable sortable"
|+ One column
! data-sort-type=number |Estimated<br>attendance
|-
| 400 +
|-
| 40,000+
|-
| 200,000–400,000
|-
| 400,000+
|-
| 60,000–350,000
|-
| 40,000
|-
| 40,000–50,000
|-
| 20,000–100,000
|-
| 10,000–100,000
|-
| 6,000–7,000
|-
| 5,000–10,000
|}
|
{| class="wikitable sortable"
|+ One column
! data-sort-type=number |Estimated<br>attendance
|-
| 400+
|-
| 40,000+
|-
| 200,000–400,000
|-
| 400,000+
|-
| 60,000–350,000
|-
| 40,000
|-
| 40,000–50,000
|-
| 20,000–100,000
|-
| 10,000–100,000
|-
| 6,000–7,000
|-
| 5,000–10,000
|}
|
{| class="wikitable sortable"
|+ Two columns
! colspan=2| Estimated<br>attendance
|-
! data-sort-type=number |(lower) !! data-sort-type=number |(upper)
|-
| 400 || 400+
|-
| 40,000 || 40,000+
|-
| 200,000 || 400,000
|-
| 400,000 || +
|-
| 60,000 || 350,000
|-
| 40,000 ||
|-
| 40,000 || 50,000
|-
| 20,000 || 100,000
|-
| 10,000 || 100,000
|-
| 6,000 || 7,000
|-
| 5,000 || 10,000
|}
|}

== Date sorting problems ==
=== Month names ===
All sorting involving month names may fail for registered users who have changed the default language setting "en - English" at [[Special:Preferences]]. It affects relatively few users on the English Wikipedia and can be ignored.

=== Year only ===

Year sorting of a column works as long as the year is the first text in each cell in the column. Adding <code>data-sort-type=date</code> to the column header does not change this.

Text is OK ''after'' a year in a cell. "FY" ([[fiscal year]]), for example, should go after the year. References after the year are OK. Put "c." after the year, or use "est." after the year instead. 

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 {{tl|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, and the column should sort correctly.

=== Year and month ===

Date sorting '''does not work''' for columns with only the year before the month (no day). The '''{{Tl|Date table sorting}}''' template will work.

Adding <code>data-sort-type=date</code> or <code>data-sort-type=isoDate</code> to the column header '''does not help.''' Click each column header a couple times in the tables below to see. Note the column headed <code>data-sort-type=isoDate</code> may sort correctly in some browsers, but it is not reliable.
<br>'''Year and month in numerical form (YYYY-MM) works with <code>data-sort-type=isoDate</code>''' (see relevant section farther down).

{|
|- style=vertical-align:text-top;
|
{| class="wikitable sortable"
|-
! Year and month
|-
| 1999 Dec
|-
| 1999 Jan
|-
| 2004 May
|-
| 2004 Aug
|}
|
{| class="wikitable sortable"
|-
! Year and month
|-
| 1999 December
|-
| 1999 January
|-
| 2004 May
|-
| 2004 August
|}
|
{| class="wikitable sortable"
|-
! data-sort-type=date | Year and month<br><code>data-sort-type=date</code>
|-
| 1999 Dec
|-
| 1999 Jan
|-
| 2004 May
|-
| 2004 Aug
|}
|
{| class="wikitable sortable"
|-
! data-sort-type=date | Year and month<br><code>data-sort-type=date</code>
|-
| 1999 December
|-
| 1999 January
|-
| 2004 May
|-
| 2004 August
|}
|
{| class="wikitable sortable"
|-
! data-sort-type=isoDate | Year and month<br><code>data-sort-type=isoDate</code>
|-
| 1999 December
|-
| 1999 January
|-
| 2004 May
|-
| 2004 August
|}
|}

=== Month and year ===

Date sorting '''does not work''' for columns with only the month before the year (no day). Adding '''<code>data-sort-type=date</code>''' to the column header '''does not help.''' The '''{{Tl|Date table sorting}}''' template will work.

{|
|- style=vertical-align:text-top;
|
{| class="wikitable sortable"
|-
! Month and year
|-
| Dec 1999
|-
| Jan 1999
|-
| May 2004
|-
| Aug 2004
|}
|
{| class="wikitable sortable"
|-
! Month and year
|-
| December 1999
|-
| January 1999
|-
| May 2004
|-
| August 2004
|}
|
{| class="wikitable sortable"
|-
! data-sort-type=date | Month and year<br><code>data-sort-type=date</code>
|-
| Dec 1999
|-
| Jan 1999
|-
| May 2004
|-
| Aug 2004
|}
|
{| class="wikitable sortable"
|-
! data-sort-type=date | Month and year<br><code>data-sort-type=date</code>
|-
| December 1999
|-
| January 1999
|-
| May 2004
|-
| August 2004
|}
|}

=== Month, day, and year ===

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

{|
|- style=vertical-align:text-top;
|
{| class="wikitable sortable"
|-
! Month, day, year
|-
| Dec 5, 1999
|-
| Jan 7, 1999
|-
| May 14, 2004
|-
| Aug 4, 2004
|}
|
{| class="wikitable sortable"
|-
! Month, day, year
|-
| December 5, 1999
|-
| January 7, 1999
|-
| May 14, 2004
|-
| August 4, 2004
|}
|
{| class="wikitable sortable"
|-
! data-sort-type=date | Month, day, year<br><code>data-sort-type=date</code>
|-
| Dec 5, 1999
|-
| Jan 7, 1999
|-
| May 14, 2004
|-
| Aug 4, 2004
|}
|
{| class="wikitable sortable"
|-
! data-sort-type=date | Month, day, year<br><code>data-sort-type=date</code>
|-
| December 5, 1999
|-
| January 7, 1999
|-
| May 14, 2004
|-
| August 4, 2004
|}
|}

=== Day, month, and year ===

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

{|
|- style=vertical-align:text-top;
|
{| class="wikitable sortable"
|-
! Day, month, year
|-
| 5 Dec 1999
|-
| 7 Jan 1999
|-
| 14 May 2004
|-
| 4 Aug 2004
|}
|
{| class="wikitable sortable"
|-
! Day, month, year
|-
| 5 December 1999
|-
| 7 January 1999
|-
| 14 May 2004
|-
| 4 August 2004
|}
|
{| class="wikitable sortable"
|-
! data-sort-type=date | Day, month, year<br><code>data-sort-type=date</code>
|-
| 5 Dec 1999
|-
| 7 Jan 1999
|-
| 14 May 2004
|-
| 4 Aug 2004
|}
|
{| class="wikitable sortable"
|-
! data-sort-type=date | Day, month, year<br><code>data-sort-type=date</code>
|-
| 5 December 1999
|-
| 7 January 1999
|-
| 14 May 2004
|-
| 4 August 2004
|}
|}

=== Before year 100. Any date format ===
:'''''Note:''' See related section that follows this one.''

Sorting can be done via the hidden '''<code>data-sort-value</code>''' using the [[ISO date]]. Combined with '''<code>data-sort-type=isoDate</code>''' 

'''Note:''' The sorting wikitext is the same for the 2 tables below. '''Any date format can be shown to the readers.''' 

{|
|- style=vertical-align:top;
|
{| class="wikitable sortable" 
|-
! data-sort-type=isoDate | Date
|-
| data-sort-value="111-12-05" | 5 Dec 111
|-
| data-sort-value="35-01-07" | 7 Jan 35
|-
| data-sort-value="207-12-05" | 5 Dec 207
|-
| data-sort-value="-111" | 111 BC
|-
| data-sort-value="-35-01-07" | 7 Jan 35 BC
|-
| data-sort-value="-207-12" | Dec 207 BC
|}
|
<pre>
{| class="wikitable sortable" 
|-
! data-sort-type=isoDate | Date
|-
| data-sort-value="111-12-05" | 5 Dec 111
|-
| data-sort-value="35-01-07" | 7 Jan 35
|-
| data-sort-value="207-12-05" | 5 Dec 207
|-
| data-sort-value="-111" | 111 BC
|-
| data-sort-value="-35-01-07" | 7 Jan 35 BC
|-
| data-sort-value="-207-12" | Dec 207 BC
|}
</pre>
|}

The table below uses the same isoDate values for '''<code>data-sort-value</code>''' as the above table. But multiple formats are used for showing the dates to the reader.

{|
|- style=vertical-align:top;
|
{| class="wikitable sortable"
|-
! data-sort-type=isoDate | Date
|-
| data-sort-value="111-12-05" | 5 Dec 111
|-
| data-sort-value="35-01-07" | 7 January 35
|-
| data-sort-value="207-12-05" | Dec 5, 207
|-
| data-sort-value="-111" | about 111 BC
|-
| data-sort-value="-35-01-07" | Jan 7, 35 BC
|-
| data-sort-value="-207-12" | December 207 BC
|}
|
<pre>
{| class="wikitable sortable"
|-
! data-sort-type=isoDate | Date
|-
| data-sort-value="111-12-05" | 5 Dec 111
|-
| data-sort-value="35-01-07" | 7 January 35
|-
| data-sort-value="207-12-05" | Dec 5, 207
|-
| data-sort-value="-111" | about 111 BC
|-
| data-sort-value="-35-01-07" | Jan 7, 35 BC
|-
| data-sort-value="-207-12" | December 207 BC
|}
</pre>
|}

=== Year, month, day. Using numbers. ISO date YYYY-MM-DD ===
:''For examples; see tables in [[Android One]]. It uses YYYY-MM without the day.''

See: '''[[ISO date]].''' "±YYYY-MM-DD", with 1 to 4 digits for year "YYYY" from -9999 to 9999. Year by itself is fine. If month is used, then it must use two digits. Sorting is broken if the month uses a single digit without the preceding zero. One digit is fine for the day. Some stuff before and after the date is allowed. Such as "'''c.'''" (for [[Wiktionary:circa|circa]]) before the date, and references after the date. Remember to leave a space in the wikitext before years that are a negative number. Otherwise, '''<code>|-</code>''' will be used as table formatting. 

Sorting works best with '''<code>data-sort-type=isoDate</code>''' added to the column header. BC or BCE can be added then too. Test other additions before and after the date. Single digits for months can still be a problem in some tables.

{|
|- style=vertical-align:text-top;
|
{| class="wikitable sortable"
|-
! Date<br>(year-month-day)<br><small>Wrong. M versus MM.<br>Sorting is broken</small>
|-
| -90
|-
| c. 90
|-
| 90-1-13
|-
| 90-12-5
|-
| 1011-08-01<sup style="color:gray">[2]</sup>
|-
| c. 207-11<sup style="color:gray">[1]</sup>
|}
|
{| class="wikitable sortable"
|-
! Date<br>(year-month-day)<br><small>isoDate is correct.<br>Sorting works</small>
|-
| -90
|-
| c. 90
|-
| 90-01-13
|-
| 90-12-5
|-
| 1011-08-1<sup style="color:gray">[2]</sup>
|-
| c. 207-11<sup style="color:gray">[1]</sup>
|}
|
{| class="wikitable sortable"
|-
! Date<br>(year-month-day)<br><small>isoDate is correct,<br>but BCE breaks sorting</small>
|-
| -90 BCE
|-
| c. 90
|-
| 90-01-13
|-
| 90-12-5
|-
| 1011-08-1<sup style="color:gray">[2]</sup>
|-
| c. 207-11<sup style="color:gray">[1]</sup>
|}
|
{| class="wikitable sortable"
|-
! data-sort-type=isoDate | Date<br>(year-month-day)<br><small>works better with</small><br><code>data-sort-type=isoDate</code><br><small>Sorting works with BCE</small>
|-
| -90 BCE
|-
| c. 90
|-
| 90-01-13
|-
| 90-12-5
|-
| 1011-08-1<sup style="color:gray">[2]</sup>
|-
| c. 207-11<sup style="color:gray">[1]</sup>
|}
|}

=== 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: [[#Specifying a sort key for a cell]] and [[#Examples of datatype auto detection. First 5 cells in a column]].

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 (<code><nowiki> {{Hs|-9999 ! }} </nowiki></code>) 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 <code>large negatives -> zero -> large positives</code>, 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:

<syntaxhighlight lang="tid">
{| 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]].

|}
</syntaxhighlight>

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

|-
| [[Ife]] || || {{Hs|Nig}}[[Osun State]], [[Nigeria]] || {{Hs|750 !}}c. 8th century || earliest traces of habitation date to the 4th century BC.

|-
| [[Yeha]] || [[D'mt]] || [[Ethiopia]] || {{Hs|-700 !}}c. 700 BC || Oldest site of continuous habitation in [[Sub-Saharan Africa]].

|-
| [[Axum]] || [[Kingdom of Axum]] || [[Ethiopia]] || {{Hs|-400 !}}c. 400 BC || Ancient capital of the Kingdom of Axum

|-
| [[Benin City|Igodomigodo]] || [[Kingdom of Benin]] || [[Nigeria]] || {{Hs|-400 !}}c. 400 BC || City of Benin, one of the oldest cities in Nigeria

|-
| [[Djenné-Jeno]] || || [[Mali]] || {{Hs|-200 !}}c. 200 BC || oldest known city in [[sub-Saharan Africa]]

|-
| [[Mogadishu]] || || [[Somalia]] || {{Hs|900 !}}c. 900 || settled by Arab traders

|-
| [[Cape Town]] || [[Cape Colony]] || [[South Africa]] || {{Hs|1652 !}}1652 || Founded by Jan van Riebeeck of the Dutch East India Company

|-
| [[Monrovia]] || || [[Liberia]] || {{Hs|1822 !}}1822 || Settled by freed American slaves through the [[American Colonization Society]]

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

|}

== Date table sorting template: Day and month, Many other date formats ==

The simplest way to format sortable dates in a table is to use the {{tl|Date table sorting}} template. In accordance with the [[WP:MOS|manual of style]], the template would be invoked using the following format:
* <code><nowiki>{{Date table sorting|4 July 1776}}</nowiki></code>

These example tables use the '''{{t|Date table sorting}}''' template. They all sort correctly. See the wikitext ("edit source"). The wikitext for the first entry in each table is shown in the table header.

'''Note:''' None of the table columns use the <code>data-sort-type=</code> modifier. Using <code>data-sort-type=</code> can sometimes break sorting.

The {{Tl|Date table sorting}} template can be used with many date formats. See [[Template:Date table sorting]] for many more options.

{|
|- style=vertical-align:text-top;
|
{| class="wikitable sortable"
|-
! Date<br>(Day and month only)<br><code><nowiki>{{Date table sorting|4 Jan}}</nowiki></code>
|-
| {{Date table sorting|4 Jan}}
|-
| {{Date table sorting|28 Aug}}
|-
| {{Date table sorting|3 Jan}}
|-
| {{Date table sorting|29 Aug}}
|-
| {{Date table sorting|14 Dec}}
|-
| {{Date table sorting|1 Jan}}
|}
|
{| class="wikitable sortable"
|-
! Date<br>(Month and day only)<br><code><nowiki>{{Date table sorting|January 4}}</nowiki></code>
|-
| {{Date table sorting|January 4}}
|-
| {{Date table sorting|August 28}}
|-
| {{Date table sorting|January 3}}
|-
| {{Date table sorting|August 29}}
|-
| {{Date table sorting|December 14}}
|-
| {{Date table sorting|January 1}}
|}
|
{| class="wikitable sortable"
|-
! Date<br>(Month, day, year)<br><code><nowiki>{{Date table sorting|1990|4|27}}</nowiki></code>
|-
| {{Date table sorting|1990|4|27}}
|-
| {{Date table sorting|1989|8|8}}
|-
| {{Date table sorting|2006|2|3}}
|-
| {{Date table sorting|2006|10|4}}
|-
| {{Date table sorting|2004|11|1}}
|-
| {{Date table sorting|2004|1|11}}
|}
|}

=== Issues ===
{| style="float:right;padding:0 20px 0 0;"
|-
|
{|class="wikitable sortable"
!String sort mode
|-
| <span style="display:none">2006-12-03</span>2006-12-03
|-
| <span style="display:none">-0000-03-27</span>-0000-03-27
|-
| <span style="display:none">2006-12 </span>December 2006
|-
| <span style="display:none">!9936-04 </span>April 64 BC
|-
| <span style="display:none">!9900-07-13</span>-0099-07-13
|-
| <span style="display:none">!9937-09-23</span>-0062-09-23
|-
| <span style="display:none">!9937-10-08</span>-0062-10-08
|-
| <span style="display:none">!9998-12-21</span>-0001-12-21
|-
| <span style="display:none">2006-11-08</span>2006-11-08
|-
| <span style="display:none">0304-12-31</span>0304-12-31
|-
| <span style="display:none">2005-05-15</span>2005-05-15
|}
|}
Date sorting works by formatting dates so they can be sorted numerically. For example:
* <code>'''yyyy mm dd'''</code>

or
* <code>'''2001 07 21'''</code>

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

You can use {{dts|2012-07-07}} etc. to get sortable dates. Example, including one date with a different display format:
{| class="wikitable sortable"
|-
! Date
|-
| {{Date table sorting|2012-01-07}}
|-
| {{Date table sorting|2012-05-07}}
|-
| {{Date table sorting|4 July 2012}}  <!-- Ensure alternate display date format works -->
|-
| {{Date table sorting|2012-07-07}}
|}
For years BC, <code>!9937-09-23</code> can be used for -0062-09-23 (62 BC): Simply subtract the year BC from 10,000.
* See also: [[bugzilla:8226]]{{-}}

== Background colors in sortable headers ==

Adding color with generic '''<code>"background:...;"</code>''' property in a header may cause that column to lose its sorting button – see [[phab:T33755]]. Example:

{|class="wikitable sortable"
|-
! style="background:navajowhite" |Name!![[Surname]]!![http://example.com Height]
|-
|John||Smith||1.85
|-
|Ron||Ray||1.89
|-
|Mario||Bianchi||1.72
|- class="sortbottom"
|colspan="2" |Average: ||1.82
|}

Use the more specific '''<code>style="background-color:...;"</code>''' to make things work correctly. Example:
<syntaxhighlight lang="moin" highlight="3-5">
{|class="wikitable sortable"
|-
!style="background-color:navajowhite" | Name
!style="background-color:navajowhite" | [[Surname]]
!style="background-color:navajowhite" | [http://example.com Height]
|-
|John
|Smith
|1.85
|-
|Ron
|Ray
|1.89
|-
|Mario
|Bianchi
|1.72
|- class="sortbottom"
|colspan="2" |Average: 
|1.82
|}
</syntaxhighlight>

Produces this sortable table:
{|class="wikitable sortable"
|-
!style="background-color:navajowhite" | Name
!style="background-color:navajowhite" | [[Surname]]
!style="background-color:navajowhite" | [http://example.com Height]
|-
|John||Smith||1.85
|-
|Ron||Ray||1.89
|-
|Mario||Bianchi||1.72
|- class="sortbottom"
|colspan="2" |Average: ||1.82
|}

== Tips and tricks ==

=== 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 [[non-breaking space]] codes <code>&amp;nbsp;</code> 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.

{|class="wikitable sortable"
!Sorting using <code>&amp;nbsp;</code> works on IE but not on Firefox
!Name
|-
|100.3 FM
|Third
|-
|&nbsp;89.5 FM
|First
|-
|107.3 FM
|Fourth
|-
|&nbsp;95.3 FM
|Second
|}

See also [[Talk:List of U.S. states and territories by population/Archive 1#Sortable Table]].

==== Padding with zeros ====
Example:
* {{padleft:{{#expr:12*13}}|6|0}}

Formatnum can be combined with padleft:

Integer:

<nowiki>{{formatnum:{{padleft:299792458|16|0}}}}</nowiki> gives:
* {{formatnum:{{padleft:299792458|16|0}}}}

Real:

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

=== 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).

=== Sorting with increase/decrease/steady templates ===
{| class="wikitable sortable infobox"
!Example!!Without key!!With key
|-
|Apple||{{increase}}10||{{increase|10}}10
|-
|Banana||{{increase}}2||{{increase|2}}2
|-
|Cherry||{{decrease}}1||{{decrease|-1}}1
|-
|Durian||{{steady}}||{{steady|0}}
|}
To enable sorting of cells with [[Template:Increase]], [[Template:Decrease]] or [[Template:Steady]], add a sort key, e.g. <nowiki>{{increase|2}}2, {{decrease|-1}}1 or {{steady|0}}</nowiki>. 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:
:{| class="wikitable"
!Search for!!Replace with
|-
|(\{\{increase)(\}\})([0-9]*)||$1<nowiki>|</nowiki>$3$2$3
|-
|(\{\{decrease)(\}\})([0-9]*)||$1<nowiki>|</nowiki>-$3$2$3
|-
|(\{\{steady)(\}\})||$1<nowiki>|</nowiki>0$2
|}

== Maintaining tables sorted alphabetically or by rank ==

It used to be difficult to maintain tables in rank order, and to keep the numbering correct. That is no longer true. '''[[Template:Static row numbers]]''' renumbers the row numbers after every change in row order. And after every addition or deletion of rows. 

=== Putting a table in initial alphabetical order ===
<span id="initial alphabetical order"></span>
:'''''Note:''' For more info see the Visual Editor sections at the end of [[Help:Table]]. See also: '''[[Phab:T240114]]:''' "Enhance the VisualEditor table editor to allow sorting and saving sorted content."''

There are fast and slow ways to do this. Scroll down for fast ways. Unfortunately, the [[WP:VE|Visual Editor]] does not have a fast way to quickly alphabetize a table. You can manually move rows around one at a time. Click on a cell in a row. Then click on the arrow that shows up at the left of the row. Then click on "move above" or "move below" as needed. 

If this is buggy or is not working, the rows can be moved around in the wikitext by cutting and pasting rows in the wikitext. 

'''A fast way''' is to launch free '''[[w:LibreOffice Calc|LibreOffice Calc]],''' or another spreadsheet program. See [[List of spreadsheet software]]. Go to the Wikipedia page or user sandbox with the table. Select and copy the table right off the page (do not go into the wikitext or the HTML). Paste it into a new Calc page. 

In Calc click on any cell in the column you want sorted, and then click on one of the sort options in the data menu at the top of the Calc window. Click on "ascending" or "descending" to sort alphabetically or numerically depending on the column contents. Click on "sort" for more options. Then convert the Calc table back to wikitext by pasting it into '''[https://magnustools.toolforge.org/tab2wiki.php tab2wiki].''' 

Or copy directly from the spreadsheet, and then paste directly into a new Visual Editor table where the first header cell has been selected. It may take up to a minute. You can copy the whole table or selected columns. For more info see [[commons:Commons:Convert tables and charts to wiki code or image files|Commons:Convert tables and charts to wiki code or image files]].

----

'''There is another way''' to alphabetize a table. One can use '''NoteTab Light''' (freeware version of NoteTab). It installs quickly and easily. But the wikitext must be in compressed table format. All the wikitext for a row must be on one line. That means the cells in that row are separated by double bars {{big|'''<code><nowiki>||</nowiki></code>'''}}.

To alphabetize the list by the first column paste the table wikitext into a new NoteTab Light page. Select the rows you want to alphabetize. Then click on the "modify" menu, then "lines", then "sort", and then "ascending". That will put "A" at the top and "Z" at the bottom.

Then put back {{big|'''<code><nowiki>|-</nowiki></code>'''}} (wikitext for row) between each line. Do that via find-and-replace by replacing {{big|'''<code>^p</code>'''}} with {{big|'''<code>^p<nowiki>|</nowiki>-^p</code>'''}}

:{{big|'''<code>^p</code>'''}} is the underlying text editor code for line breaks in NoteTab.
:{{big|'''<code><nowiki>|</nowiki>-</code>'''}} is the wikitext for a table row.

If there are blank lines between the entries replace {{big|'''<code>^p^p</code>'''}} with {{big|'''<code>^p<nowiki>|</nowiki>-^p</code>'''}}

Copy the wikitext and paste it back into the article. Save the page.

=== 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. It no longer matters what method you choose. '''[[Template:Static row numbers]]''' will maintain row numbering automatically no matter what changes you make to the row order. 

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

You can remove the rank column cells quickly. It is much easier now with the table editor in the [[VisualEditor]]. Click on the header in the column you want to delete. An arrow will show up at the top of the column. Click the arrow, and then "delete column".

Then let '''[[Template:Static row numbers]]''' create the row number column.

=== Auto-ranking or adding a row numbering column (1,2,3) ===

There are [[WP:Phabricator |Phabricator]] threads asking for a way to easily add static row numbers to tables. See '''[[phab:T42618]].''' It supersedes '''[[phab:T42634]].''' 

In the meantime there is '''[[Template:Static row numbers]].''' It is easy to use now. It is a template to automatically add row numbers to sortable tables. The row numbers will not be sorted when columns of data are sorted. A possible note to add above a table: '''''Row numbers''' are static. Other columns are sortable. This allows ranking of any column.''

These templates work together with it, and make table formatting fast: 
*{{tl|Static row numbers table}}
*{{tl|Static row numbers header}}
*{{tl|Static row numbers arrows}}
For example; they are used together here: [[List of U.S. states and territories by incarceration and correctional supervision rate]]. Note that ''<code>style=max-width:Xem</code>'' is selectively used to narrow columns with wordy header text without using breaks <nowiki><br></nowiki>. Header breaks annoy people using [[screen readers]] due to the pauses. 

The selective use of ''max-width'' allows the state names to spread out, and stay on one row each if the screen is wide enough. This allows easier scanning down or across the rows. Yet when the screen becomes narrower and narrower, the state names will eventually wrap. This is good for cell phones. 

Be sure to check both mobile and desktop views (links at bottom of page). Check to see that header rows aren't being given a row number. Also check that the ''max-width'' settings aren't too tight. Mobile view may need a slightly larger ''max-width'' setting for some columns. Remember that mobile view does not have sorting capability.

== Alphabetic sorting order ==
'''<nowiki>data-sort-type:text</nowiki>''' - 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. 

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

== Numerical sorting order examples ==

'''<nowiki>data-sort-type:number</nowiki>''' - Sort the following table to see an example of the numerical sort order. 

{|class="wikitable sortable"
|+ mixed notations
! data-sort-type:number | Test
|-
| {{#expr:1000000000000000000/7}}
|-
| 1000000000000000000
|-
| -1000000000000000000
|-
| .0000000000000000001
|-
| -.0000000000000000001
|-
| {{#expr:-1000000000000000000/7}}
|-
| {{#expr:.000000000001/7}}
|-
| {{#expr:-.000000000001/7}}
|-
| 89 123 456 788
|-
| 89,123,456,789
|-
| 14
|-
| -14
|-
| 11
|-
| -12 (retrograde)
|-
| 12 or 13
|-
| 12 (?)
|-
| c. 12
|-
| 12 (approx.)
|-
| ?
|-
| 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
|}

== See also ==
* {{tl|Sortname}} – sorting by surname without placing first name and surname in two separate columns
* [[m:Help:Sorting]] – general help page of this functionality (Not Wikipedia specific)
* [[Help:Collapsing#Sortable tables|Sortable collapsible table]]
* {{tiw|dts}} – sorting a table by a date column, while following [[Wikipedia:Manual of Style (dates and numbers)#Dates containing a month and a day]] for display
* [[:w:Category:Sorting templates|Category:Sorting templates]] – all templates that provide functionality related to sorting.
* [[OrganicDesign:How to put zebra stripes on sortable wiki tables|How to put zebra stripes on sortable wiki tables]]
* [[Commons: Category:Table sort icons]] – useful in sorting notes (for example: [[File:sort both small.svg|10px]])

{{Wikipedia technical help|collapsed}}
[[Category:Wikipedia tables]]