Help:Sortable tables - MediaWiki
Jump to content
From mediawiki.org
Translate this page
Languages:
Bahasa Melayu
Esperanto
Lëtzebuergesch
Tiếng Việt
català
polski
português
čeština
русский
فارسی
中文
Note:
When you edit this page, you agree to release your contribution under the
CC0
. See
Public Domain Help Pages
for more info.
To make a
sortable table
, add the
sortable
class to a table.
This class adds arrows displayed beside the header within each header cell.
(See
example
below.)
When you click on an arrow, the table rows are arranged according to the chosen column.
Continuously clicking the arrow alters the sorting order in the following pattern:
Ascending (min to max),
Descending (max to min), and then
Unsorted (sequential).
You can perform secondary sorts by shift-clicking the arrows in different columns.
Each shift click will set the secondary sort based on the clicked column, and this capability extends to tertiary and further sorts.
Sort modes
edit
Items are sorted based on the
data type
of the first few rows below the header.
To determine the data type, the first five non-empty rows below the header are examined upon page loading, and the most suitable format is selected.
Discrepancies can occur.
Additionally, specific columns can have their sorting order forced, as explained in the relevant section
below
Currently, tags like
span
or
sup
don't affect how data types are determined, but reference numbers and visible comments do.
Dates
edit
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
edit
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
edit
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):
ISO basic Latin alphabet
Greek alphabet
Russian Cyrillic alphabet
Forcing the sort mode of a column
edit
Adding
data-sort-type="..."
to the header lets you control how a table is sorted.
This feature is derived from
tablesorter.com (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
Date
Name
Height
Salary
01.10.1977
Smith
1.85
1,000.000
11.6.1972
Ray
1.89
900.000
1.9.1992
Bianchi
1.72
2,000.50
Specifying a sort key
edit
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
Name and Surname
Height
John Smith
1.85
Ian Ray
1.89
Zachary Bianchi
1.72
Controlling sorting and display
edit
To ensure certain text isn't sorted but still displayed, use
data-sort-type="..."
You can then append additional text after values, like "200 approx" or "100
[1]
".
An empty cell sorts as
"-Infinity"
If a cell contains a range of dates or numbers (for example, from 2 to 5), use
data-sort-value="..."
Examples
edit
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="..."
numbers
data-sort-type="number"
data-sort-type="number"
-8e3
-8 e3
-8 e3
-3e-3
-3 e-3
-3 e-3
2.000
2-5 km²
data-sort-value="3.5"
2-5 km²
3.99
3.99 km²
3.99 km²
4 km²
4 km²
90 %
90 Percent
data-sort-value="90"
about 90 Percent
1E2
100
[1]
100
[1]
1,000,000.0
1 000 000.0
data-sort-value="1e6"
one Million
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.
currencies
$ 9
$ 80
$ 70
$ 600
currencies
9 €
80 €
70 €
600 €
currencies
£ 9
£ 80
£ 70
£ 600
currencies
¥ 9
¥ 80
¥ 70
¥ 600
percent
9 %
80 %
70 %
600 %
numbers
−7e270
-1.4285714285714E-13
999e9
7e270
Secondary sort key
edit
You can sort data by columns, with Column A as the primary sort key.
If Column A has equal values, use Column B as the secondary key.
Click Column A's sort button once or twice, then while holding shift, click Column B's sort button once or twice for further refinement.
For example:
Click on the "Text" column first, then hold down the shift key and click on the "Numbers" column.
You'll notice that the items are sorted based on text first and then numbers.
Numbers
Text
Dates
Currency
More text
01.Jan.2005
4.20
row 1
05/12/2006
7.15
row 2
02-02-2004
5.00
row 3
02-02-2004
5.00
row 4
13-apr-2005
row 5
13-apr-2005
row 6
17.aug.2006
6.50
row 7
25.aug.2006
2.30
row 8
28.aug.2006
5.50
row 9
31.aug.2006
3.77
row 10
01.sep.2006
1.50
row 11
Bottom
Additional features
edit
Excluding the last row from sorting
edit
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
Name
Surname
Height
John
Smith
1.85
Ron
Ray
1.89
Mario
Bianchi
1.72
Average:
1.82
Excluding the first row from sorting
edit
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
Name
Surname
Height
Average:
1.82
John
Smith
1.85
Ron
Ray
1.89
Mario
Bianchi
1.72
Making a column unsortable
edit
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
Numbers
Alphabet
Dates
Currency
Unsortable
02-02-2004
5.00
This
13-apr-2005
Column
17.aug.2006
6.50
Is
01.Jan.2005
4.20
Unsortable
05/12/2006
7.15
See?
Total: 15
Total: 29.55
Original example
Keeping some rows together
edit
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
Country
Area
France
674 843 km²
In Paris is the Eiffel Tower.
U.K.
242 495 km²
In the U.K. you cannot pay with euros.
And you drive on the left side of the road.
Germany
357 168 km²
Germany includes the former DDR.
If you put in
data-sort-value
the same content as above row, keep this rows also together.
The original mutual order of these rows is preserved.
A better way for this is class expand-child, see above
#Keeping some rows together
Example where
data-sort-value
is used is the case for the rows about the Netherlands:
{|
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
U.K.
London
Special dates
edit
To represent years Before the Common Era (BCE) subtract the BCE year from 10,000.
For instance, -62 BCE would be 10,000 - 62 = 9938.
For example,
September 23, 62 BCE
would be represented as
9938-09-23
If a table column has incomplete dates, sorting won't be an issue.
If only a year and month are provided, it's sorted before the first day of that month.
Similarly, if only a year is given, it's sorted before the first month or day of that year.
Wikitext
{|
class
"wikitable sortable"
|-
Date
|-
2022-01-01
|-
2023-12-31
|-
2024
|-
2024-04
|-
2024-04-00
|-
2024-05
|-
2024-05-00
|}
Rendering
Date
2022-01-01
2023-12-31
2024
2024-04
2024-04-00
2024-05
2024-05-00
Using #time
edit
You can use the parser function #time and HTML tags to display a specific date range.
By adding the HTML tag
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
input date
text
date and time as interpreted, with hidden sort key
input with visible sort key
input with hidden sort key
Unix time
010203
&301776819723
22 Apr 2026 01:02:03
&301776819723 010203
&301776819723
010203
1776819723
1/2
&301767312000
02 Jan 2026 00:00:00
&301767312000 1/2
&301767312000
1/2
1767312000
1/2/3
&301041465600
02 Jan 2003 00:00:00
&301041465600 1/2/3
&301041465600
1/2/3
1041465600
1-2-2003
&301044057600
01 Feb 2003 00:00:00
&301044057600 1-2-2003
&301044057600
1-2-2003
1044057600
1-2-3
&300981158400
03 Feb 2001 00:00:00
&300981158400 1-2-3
&300981158400
1-2-3
981158400
2007
&301167609600
01 Jan 2007 00:00:00
&301167609600 2007
&301167609600
2007
1167609600
1 Jan 111, 00:00:00
&241335609600
01 Jan 0111 00:00:00
&241335609600 1 Jan 111, 00:00:00
&241335609600
1 Jan 111, 00:00:00
-58664390400
31 Dec 9999, 23:59:59
&553402300799
31 Dec 9999 23:59:59
&553402300799 31 Dec 9999, 23:59:59
&553402300799
31 Dec 9999, 23:59:59
253402300799
Sep 1970
&300020995200
01 Sep 1970 00:00:00
&300020995200 Sep 1970
&300020995200
Sep 1970
20995200
1970
&300000000000
01 Jan 1970 00:00:00
&300000000000 1970
&300000000000
1970
Jun 2007
or later
&301180656000
01 Jun 2007 00:00:00 or later
&301180656000 Jun 2007 or later
&301180656000
Jun 2007 or later
1180656000 or later
Jun 2007
perhaps earlier
&301180656000
01 Jun 2007 00:00:00 perhaps earlier
&301180656000 Jun 2007 perhaps earlier
&301180656000
Jun 2007 perhaps earlier
1180656000 perhaps earlier
2007-6
&301180656000
01 Jun 2007 00:00:00
&301180656000 2007-6
&301180656000
2007-6
1180656000
Jun 2007
&301180656000
01 Jun 2007 00:00:00
&301180656000 Jun 2007
&301180656000
Jun 2007
1180656000
4 Jun 2007
&301180915200
04 Jun 2007 00:00:00
&301180915200 4 Jun 2007
&301180915200
4 Jun 2007
1180915200
3 Jul 2007
&301183420800
03 Jul 2007 00:00:00
&301183420800 3 Jul 2007
&301183420800
3 Jul 2007
1183420800
12 Aug 2006
&301155340800
12 Aug 2006 00:00:00
&301155340800 12 Aug 2006
&301155340800
12 Aug 2006
1155340800
1 Mar 2006 -1day
&301141084800
28 Feb 2006 00:00:00
&301141084800 1 Mar 2006 -1day
&301141084800
1 Mar 2006 -1day
1141084800
1 Mar 2008 -1day
&301204243200
29 Feb 2008 00:00:00
&301204243200 1 Mar 2008 -1day
&301204243200
1 Mar 2008 -1day
1204243200
1 Mar 2010 -1day
&301267315200
28 Feb 2010 00:00:00
&301267315200 1 Mar 2010 -1day
&301267315200
1 Mar 2010 -1day
1267315200
1 Mar 1900 -1day
&297796022400
28 Feb 1900 00:00:00
&297796022400 1 Mar 1900 -1day
&297796022400
1 Mar 1900 -1day
-2203977600
1 Mar 1600 -1day
&288329001600
29 Feb 1600 00:00:00
&288329001600 1 Mar 1600 -1day
&288329001600
1 Mar 1600 -1day
-11670998400
Jun 1607
&288557875200
01 Jun 1607 00:00:00
&288557875200 Jun 1607
&288557875200
Jun 1607
-11442124800
20260422070122
&301776841282
22 Apr 2026 07:01:22
&301776841282 20260422070122
&301776841282
20260422070122
1776841282
yesterday
&301776729600
21 Apr 2026 00:00:00
&301776729600 yesterday
&301776729600
yesterday
1776729600
today
&301776816000
22 Apr 2026 00:00:00
&301776816000 today
&301776816000
today
1776816000
tomorrow
&301776902400
23 Apr 2026 00:00:00
&301776902400 tomorrow
&301776902400
tomorrow
1776902400
1week
&301777446082
29 Apr 2026 07:01:22
&301777446082 1week
&301777446082
1week
1777446082
-1week
&301776236482
15 Apr 2026 07:01:22
&301776236482 -1week
&301776236482
-1week
1776236482
1day
&301776927682
23 Apr 2026 07:01:22
&301776927682 1day
&301776927682
1day
1776927682
-1day
&301776754882
21 Apr 2026 07:01:22
&301776754882 -1day
&301776754882
-1day
1776754882
1month
&301779433282
22 May 2026 07:01:22
&301779433282 1month
&301779433282
1month
1779433282
-1month
&301774162882
22 Mar 2026 07:01:22
&301774162882 -1month
&301774162882
-1month
1774162882
1year
&301808377282
22 Apr 2027 07:01:22
&301808377282 1year
&301808377282
1year
1808377282
-1year
&301745305282
22 Apr 2025 07:01:22
&301745305282 -1year
&301745305282
-1year
1745305282
1000year
&333333750082
22 Apr 3026 07:01:22
&333333750082 1000year
&333333750082
1000year
33333750082
10000month
&328074322882
22 Aug 2859 07:01:22
&328074322882 10000month
&328074322882
10000month
28074322882
1000000day
&388176841282
19 Mar 4764 07:01:22
&388176841282 1000000day
&388176841282
1000000day
88176841282
10000000hour
&337776841282
06 Feb 3167 23:01:22
&337776841282 10000000hour
&337776841282
10000000hour
37776841282
1000000000minute
&361776841282
19 Aug 3927 17:41:22
&361776841282 1000000000minute
&361776841282
1000000000minute
61776841282
100000000000second
&401776841282
07 Mar 5195 16:48:02
&401776841282 100000000000second
&401776841282
100000000000second
101776841282
7980year
Expression error: Unexpected < operator.
Error: #time only supports years up to 9999.
Expression error: Unexpected < operator.
7980year
Expression error: Unexpected < operator.
7980year
Error: #time only supports years up to 9999.
-1890year
&242134230082
22 Apr 0136 07:01:22
&242134230082 -1890year
&242134230082
-1890year
-57865769918
Mon
&301777248000
27 Apr 2026 00:00:00
&301777248000 Mon
&301777248000
Mon
1777248000
Tue
&301777334400
28 Apr 2026 00:00:00
&301777334400 Tue
&301777334400
Tue
1777334400
Wed
&301776816000
22 Apr 2026 00:00:00
&301776816000 Wed
&301776816000
Wed
1776816000
Thu
&301776902400
23 Apr 2026 00:00:00
&301776902400 Thu
&301776902400
Thu
1776902400
Fri
&301776988800
24 Apr 2026 00:00:00
&301776988800 Fri
&301776988800
Fri
1776988800
Sat
&301777075200
25 Apr 2026 00:00:00
&301777075200 Sat
&301777075200
Sat
1777075200
Sun
&301777161600
26 Apr 2026 00:00:00
&301777161600 Sun
&301777161600
Sun
1777161600
Expression error: Unexpected < operator.
Error: Invalid time.
Expression error: Unexpected < operator.
Expression error: Unexpected < operator.
Error: Invalid time.
unknown
Expression error: Unexpected < operator.
Error: Invalid time.
Expression error: Unexpected < operator.
unknown
Expression error: Unexpected < operator.
unknown
Error: Invalid time.
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
Cell spanning multiple rows/cells
edit
A cell that extends across multiple rows or columns is considered equivalent to having multiple cells with identical values.
rowspan
Date
Name
Height
01.10.1977
Smith
1.85
11.06.1972
Adams
01.09.1992
Bianchi
1.72
colspan
Any missing cells at the end of a row will turn into empty cells after the first sort.
Colspanned cells
edit
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:
Country
Capital
France
Paris
Sorting with respect to the first column this row sorts like Z, with respect to the second column like M
U.K.
London
Static column
edit
To make a static column, like one with row numbers, use two tables placed next to each other.
Make sure each row in both tables has the same height.
You can also use
w:Template:Static row numbers
to generate row numbers implicitly using CSS rather than creating another table.
Number
Country
Capital
The Netherlands
Amsterdam (although The Hague is the seat of government)
France
Paris
The formatting can be modified to present everything in a unified table.
If a row is too short for the text in a cell, the browser will expand it, disrupting the alignment.
Default order
edit
You can't show a table sorted by a column without the user clicking on it.
By default, table rows appear in the order as the wikitext.
To display a table sorted by a specific column, you'll need to arrange the wikitext accordingly.
One way of doing this is:
Rearrange the table's wikitext without the top and bottom lines.
Replace the cell separators with a unique code that doesn't contain a "|" by using "find and replace".
Replace any pipes within table cells with a code, and then substitute that code with a newline character preceded by it (indicating the start of a new row).
Use the
Sort module
on
Special:ExpandTemplates
. To sort the items between the pipes and produce the desired separator, expand templates and add
{{#invoke:Sort|f||- |
(with the newline) before and
}}
after the wikitext.
Delete the items that begin with "-" and a newline.
Change the temporary codes for the cell separators and pipes inside the cells to restore them.
This sorting method relies on the wikitext in each row, primarily sorting by the content of the first column. The second column serves as a secondary key. However, wikitext codes in the first column cells before the content can impact the order.
You can also use
Snippets/Sort table on reload
to automatically sort the table when it loads using JavaScript.
Persistent sort states using cookies
edit
You can save the state of sortable tables across reloads using
Snippets/Persistent sort order
See also
edit
Help:Table
Category:Sorting templates
jquery.tablesorter.js
– TableSorter for MediaWiki
– Stuart Langridge's original code needs explaining. In the MediaWiki version, tables no longer need IDs.
For much more detailed instructions, see
the Wikipedia page
Manual:$wgCategoryCollation
– Allows you to change the collation used for categories (requires shell access).
Unicode character references
on the Wikibooks.
Initial characters
Other examples:
w:Ranked list of Dutch provinces
w:List of countries by GDP estimates for 2006 (nominal)
w:List of countries by GDP (PPP), 2006
w:List of longest reigning current monarchs
– Date columns can be sorted by those who don't care about date format and by those who prefer [[YYYY-MM-DD]].
Pokémon table
– Place a "#" before numbers to position them ahead of "-".
Nuclear power by country
(Featured List)
w:Desert Island Discs: castaways' choices
zh:秘鲁行政区划
(Subdivisions of Peru) for sorting of Chinese (CJK)
w:Standard electrode potential (data page)
Retrieved from "
Category
Help
Help
Sortable tables
Add topic
US