Community Central
Community Central
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
| Blue
|-
| Smith
| John
| Yellow
|-
| Ben
| Jones
| Red
|-
| John
| Smythe
| Green
|-
| Smith
| Johnson
| Maroon
|}

This results in:

First Name Last Name Favorite Color
Ben Benny Brown
John Smith Blue
Smith John Yellow
Ben Jones Red
John Smythe Green
Smith Johnson Maroon

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

Advanced sorting

By default, the system guesses the type of data in each column by looking at the first five rows. This works most of the time, but can be confused by inconsistent data or unexpected characters. For example 10cm, 20cm, 100cm will be sorted as 10cm, 100cm, 20cm (sorted by "letters" rather than numerically). This can be fixed by using the "data-sort-type" attribute on column headers, or by using the "data-sort-value" attribute on individual cells.

data-sort-type

data-sort-type="..." can be added to a column header to specify the column's data type. Several types are supported, but the most common ones are:

  • text - Sorts text by symbols, digits, and letters in that order.
  • number - Expects a numerical value, points, commas, spaces, "+", or "-" (ex: +1,234.5). Other characters after the number will be ignored.
  • currency - Expects a number with $, £, €, or ¥ in front (ex: $1.00, ¥10,000)
  • date - Expects a compatible date format (ex: 25-12-2001, 25 Dec 2001)

Note that if a cell's contents do not match the column's specified type, it may be treated as having a value of zero.

For example:

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

This results in:

Default Number Currency
!@#$% 20 $231
10000 10 ¥55
Apple 300 £34
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="0"|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="0"|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
Pineappleexample.png
Pineapple
$3.00 Appleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.png Lemonexample.pngLemonexample.pngLemonexample.pngLemonexample.pngLemonexample.pngLemonexample.pngLemonexample.pngHalflemonexample.png
Appleexample.png
Apple
$0.20 N/A Halflemonexample.png
Lemonexample.png
Lemon
$0.40 Appleexample.pngAppleexample.png N/A
Coconutexample.png
Coconut
$1.40 Appleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.png Lemonexample.pngLemonexample.pngLemonexample.pngHalflemonexample.png

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
| 23
|-
| Bill
| Male
| 12
|-
| Cathryn
| Male
| 34
|- class="sortbottom"
! colspan="2" | Average
| 23
|}

This results in:

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

See also

Further help and feedback