Dates

Different date formats are accepted, even those with month names in local languages. For instance, on the German Wikipedia, "16. März 2010" is appropriately sorted as 2010-03-16.

Different numerical formats, including ones with various separators like periods, commas, apostrophes, or slashes (such as . , ' /), are supported. The English Wikipedia typically uses the US date format, (e.g. month-day-year).

Numbers

The script can detect numbers that use either "." or "," as decimal separators, as well as numbers written in scientific notation (using "e" or "E"). By default, numbers will be sorted based on alphanumeric order by default, meaning that they will be sorted as strings rather than numerical values. This may result in unexpected sortings, such as "9" coming after "10". However, this default behavior can be overridden if desired.

Text

When lists are sorted alphabetically by MediaWiki, the order of characters is sorted with Intl.Collator. This sorts accented characters correctly based on PageContentLanguage.

Android Webviews don't support this, so fallback to the old sort routine is required. The order is the same as the order of Unicode code points. Some of the more common characters are ordered as follows (in ascending order):

­

Forcing the sort mode of a column

Adding data-sort-type="..." to the header lets you control how a table is sorted. This feature is derived from tablesorter.com</tvar> (webarchive). Valid values for "data-sort-type" include the following which are not case-sensitive:

• currency
• number
• isoDate
• time
• IPAddress
• usLongDate
• date
• text
• url

For example:

Wikitext

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

Rendering

Specifying a sort key

You can adjust how cells are sorted or parsed if needed. For instance, if a cell says "John Smith" but should be sorted under "Smith", you can use the data-sort-value="..." attribute to achieve this.

Wikitext

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

Rendering

Examples

The first column sorts plain numbers. The second column sorts more content as numbers using data-sort-type="number" in the table header. The fourth column defines numeric sort values independently of cell content using data-sort-value="...".

The way commas (,) and decimal points (.) are displayed in Mediawiki depends on the language settings. Currency symbols and the percentage (%) symbol are sorted numerically based on these settings.

Excluding the last row from sorting

You can skip sorting the last row of a table by marking it with class="sortbottom". You can also exclude it from sorting by declaring it as a footer with an exclamation mark(!).

Wikitext

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

Rendering

Excluding the first row from sorting

You can exclude the first row by using the class="sorttop".

Wikitext

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

Rendering

Making a column unsortable

To stop a column from being sortable, use class="unsortable" in its header cell's attributes.

Wikitext

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

Rendering

Keeping some rows together

To allow an uncolumned row to always stay beneath the columned row above it, no matter how you sort them, use class="expand-child" in the row's attribute.

Wikitext

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

Rendering

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

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

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

Using #time

You can use the parser function #time and HTML tags to display a specific date range. By adding the HTML tag <span style="display:none">&{{#expr:3e11+{{#time:U|..}}}}</span> before the displayed date, you can manipulate the way the date is shown. This method works for dates between January 1, 111 CE, and December 31, 9999 CE, using the proleptic Gregorian calendar. The added value ensures all values are positive and uniform in length. Placing "&" before the expression forces string sorting mode.

You can input dates and times using any PHP format for date and time. Remember, if you're specifying just a year, you must include a month (usually January) in the background.

For example using date :

To use dates before 111 CE, add a multiple of 400 (like 6000) to all years. This shifts the range to start from January 1st, -5889, at 00:00:00, and ends on December 31st, 3999, at 23:59:59, without altering the calendar system.

See also:

• w:Template:dts - Sorting a table by a date column

Colspanned cells

Sort modes are detected separately for each column containing colspanned cells. You can set a sort mode for all colspanned columns by including data-sort-type in the header.

To implement separate sort keys for each column within a colspanned cell, utilize a CSS trick described here: Ensure an equal number of cells in each row for sortable columns. If there's a mismatch, all columns become sortable. This rule should apply up to and including the last sortable column. However, employing a CSS workaround allows for a difference between the displayed number of cells in a row and the formal count. For instance, two formal cells can appear as one by adjusting the width of the first column, shifting the content of the second cell to the left, increasing its width by the same measure, and concealing the cell border that would typically be visible. Concealed sort keys enable managing the sorting order of specific rows in relation to each column.

For example: