Help:Sorting

For help sorting articles in categories, see Sort parameters in Help:Category.

Sortable tables have the ability to sort table rows based on the values inside a specific column. This is done through class="sortable".

Note that sortable tables use JavaScript for sorting, and do not currently work on the mobile layout.

Creating a sortable table

Making a table sortable is easy since all that is required is appending the "sortable" class. However, certain situations - such as sorting with numbers or using a table footer - may require extra input, as detailed further down the page.

For example:

{| class="article-table sortable"
! First Name
! Last Name
! Favorite Color
|-
| Ben
| Benny
| Brown
|-
| John
| Smith
| Green
|-
| Smith
| John
| Maroon
|}

This results in:

First Name	Last Name	Favorite Color
Ben	Benny	Brown
John	Smith	Green
Smith	John	Maroon

Clicking the arrows will let you sort the column numerically then alphabetically. If you want to sort by multiple columns, hold down Shift when you sort your second column.

Advanced sorting

data-sort-type

By default, columns are sorted in ASCII order. This isn't a problem in most cases, but can be quite problematic when sorting numbers, as 10, 20, 100 will be sorted as 10, 100, 20 (since it sorts it by the first "letter" first, rather than numerically). This can be fixed using the "data-sort-type" attribute on column row headers.

data-sort-type="..." can contain multiple different values, but the most common ones are:

• text
• number - Expects a numerical value, points, commas, spaces, "+", or "-".
• currency - Expects a number with $, £, €, or ¥ in front (ex: $100, ¥10000)
• date

Note that if each cell in the column does not have a value of the correct type, there is a chance sorting for the whole column will go back to default.

For example:

{| class="article-table sortable"
! Default
! data-sort-type="number" | Number
! data-sort-type="currency" | Currency
|-
| !@#$%
| 10
| $23
|-
| 10000
| 20
| ¥54
|-
| Apple
| 100
| £345
|-
| Banana
| 200
| €999
|}

This results in:

Default	Number	Currency
!@#$%	10	$23
10000	20	¥54
Apple	100	£345
Banana	200	€999

data-sort-value

Sometimes what you want to show in a column doesn't correspond to what order you would like it sorted by. In cases such as these data-sort-value="..." is used.

Example 1:

{| class="article-table sortable"
! Console
! Color
! Stock
|-
| Dreamcast
| White
| data-sort-value="5" | Five
|-
| iPad
| White
| data-sort-value="0" | Zero
|-
| Xbox
| Green
| data-sort-value="8" | Eight
|}

This results in:

Console	Color	Stock
Dreamcast	White	Five
iPad	White	Zero
Xbox	Green	Eight

Example 2:

{| class="article-table sortable" style="width: 500px;"
! data-sort-type="text" scope="col" |Fruit
! data-sort-type="currency" scope="col" |Average cost ($USD)
! data-sort-type="number" scope="col" style="width:100px" |Trade value in apples
! data-sort-type="number" scope="col" style="width:100px" |Trade value in lemons
|-
|data-sort-value="Pineapple"| [[file:pineappleexample.png|30px]]<br />Pineapple
|$3.00
|data-sort-value="15"|[[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]]
|data-sort-value="7.5"|[[file:lemonexample.png|20px]][[file:lemonexample.png|20px]][[file:lemonexample.png|20px]][[file:lemonexample.png|20px]][[file:lemonexample.png|20px]][[file:lemonexample.png|20px]][[file:lemonexample.png|20px]][[file:halflemonexample.png|10px]]
|-
|data-sort-value="Apple"| [[file:appleexample.png|30px]]<br />Apple
|$0.20
|data-sort-value="1"|N/A
|data-sort-value="0.5"|[[file:halflemonexample.png|10px]]
|-
|data-sort-value="Lemon"| [[file:lemonexample.png|30px]]<br />Lemon
|$0.40
|data-sort-value="2"|[[file:appleexample.png|20px]][[file:appleexample.png|20px]]
|data-sort-value="1"|N/A
|-
|data-sort-value="Coconut"| [[file:coconutexample.png|30px]]<br />Coconut
|$1.40
|data-sort-value="7"|[[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]][[file:appleexample.png|20px]]
|data-sort-value="3.5"|[[file:lemonexample.png|20px]][[file:lemonexample.png|20px]][[file:lemonexample.png|20px]][[file:halflemonexample.png|10px]]
|}

This results in:

Fruit	Average cost ($USD)	Trade value in apples	Trade value in lemons
Pineapple	$3.00
Apple	$0.20	N/A
Lemon	$0.40		N/A
Coconut	$1.40

Date sorting

{| class="article-table sortable"
|-
! data-sort-type="date" | Day, month, and year
|-
| 21 Dec 1905
|-
| 17 Jan 1950
|-
| 14 May 2014
|-
| 8 Aug 1966
|}

This results in:

Day, month, and year
21 Dec 1905
17 Jan 1950
14 May 2014
8 Aug 1966

Unsortable columns

If you have a table where you want one of the columns to not be sortable, you can do this by adding the class "unsortable" to its header.

Example:

{| class="article-table sortable"
|-
! Game
! Theme
! class="unsortable" | Rating
|-
| Pocket League Story
| futbol
| ☆☆
|-
| Game Dev Story
| vidya gamez
| ☆☆☆
|-
| Grand Prix Story
| cars
| ☆
|}

This results in:

Game	Theme	Rating
Pocket League Story	futbol	☆☆
Game Dev Story	vidya gamez	☆☆☆
Grand Prix Story	cars	☆

Table footer

If you don't wish for a row at the bottom of a table to be sorted (such as a "totals" row), this can be accomplished by adding class="sortbottom" to the row.

Example:

{| class="article-table sortable"
! Name
! Sex
! Age
|-
| Amanda
| Female
| 12
|-
| Bill
| Male
| 23
|-
| Cathryn
| Male
| 34
|- class="sortbottom"
! colspan="2" | Average
| 23
|}

This results in:

Name	Sex	Age
Amanda	Female	12
Bill	Male	23
Cathryn	Male	34
Average		23

See also

• Help:Tables
• Help:Sorting on Wikipedia

Further help and feedback

• Browse and search other help pages at Help:Contents
• Check Fandom Community Central for sources of further help and support
• Check Contacting Fandom for how to report any errors or unclear steps in this article