Help:Sortable tables#Specifying a sort key for a cell

File:Wikipedia VisualEditor Table Properties.png

Tables can be made sortable via client-side JavaScript by adding class="wikitable sortable" to their top line. These tables need to be properly formatted, with the correct number of cells. Additionally, you need to make sure that the headers of your column are properly indicated in the wikitext. For this, the ! character is used in the table syntax.

If you are using the Visual Editor, you can open the properties dialog of a table and select the sortable option.

This is the wikitext of the table shown in the first section and shows the typical way to enable table sorting:

The ! 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 Introduction to tables for source editing.

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.

When browsing Wikipedia you may encounter tables that have been made sortable. A sortable table is a type of table used to allow readers to sort its data by clicking on the header cells of columns. It is identifiable by the arrows in one or more of its header cells. Typically, readers can sort data in ascending or descending order based on the values in the selected column. The first click on the header cell will sort the column’s data in ascending order, a second click of the same arrow descending order, and a third click will restore the original order of the entire table. For example; a third click causes List of countries by intentional homicide rate to reset to its original order by subregion.

Sortable tables are particularly useful for organizing and navigating large sets of data. For example, you might have a table displaying names, dates, or numerical data. By making the table sortable, you allow readers to click on the column header to sort by, for example, alphabetical order (A–Z or Z–A) for names, chronological order for dates, or numerical order for numbers (low to high or high to low).

The actual sorting process will happen on the computer-side 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 low-performance computer may take a long time.

This is an example of a small sortable table:

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

Using two or more header rows, the sort arrows are placed on the bottom or lowest header row by default. They can be placed a maximum of one row higher than the lowest header row by setting class="sorttop" at the top of the bottom header row. For example:

{{Anchor|Tables with complex data rows}}

{{Further|Help:Tables#Colspan and rowspan|Wikipedia:Manual of Style/Accessibility/Data tables tutorial#Complex tables}}

:

It is possible to create tables with cells that stretch over two or more columns or rows (also known as merged cells). For columns, one uses |colspan=n | content, whereas for rows, one uses |rowspan=m | content. In the table code, one must leave out the cells that are covered by such a span. The resulting column- and row-counting must fit. Tables can have cells spanning multiple rows, using |rowspan=n.

The number of rows must be indicated with each use of rowspan. Before any sorting can be done, the rowspan setup must be correct. The wikitext must be correct. An incorrect rowspan organization can break sorting, cause weird table formatting, move data to the wrong column, etc.

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 and wikitext, with sorting in working order:

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.

See example below. The wikitext is incorrect. Line 17 should not exist. Compare to correct table above. Result in this case is an added empty column.

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 do not have to edit the wikitext as much in order to edit the table.

When a column contains repeated values, sorting the column should maintain the original order of rows within each subset that shares the same value. This is known as stable sorting. As a result, multi-key sorting (sorting by primary, secondary, tertiary keys, etc.) can be achieved by sorting the least significant key first and the most significant key last. For example, to sort the table by the "Text" column and then by the "Numbers" column, you would first click on and sort by the "Numbers" column, the secondary key, and then click on and sort by the "Text" column, primary key.

Another method for multi-key sorting is to hold down the {{Key press|shift}} key while clicking on column headings. For instance, to sort by the "Text" column followed by the “Numbers" column, you would first click on the “Text” column heading (primary key), then hold down the {{Key press|shift}} key and click on the “Numbers" column heading (secondary key).

There can be a problem with sorting if the Google translation gadget (see discussion) is enabled in {{Myprefs|Gadgets|uncheck=GoogleTrans}}. It may seem like shift-click secondary sorting is not working because of the delay due to the translation popup for the name in the column head. The gadget can be turned on and off quickly, once enabled in preferences, from the "Tools" menu at the upper right of any page. There are many browser translation addons (such as Simple Translate for [https://addons.mozilla.org/en-US/firefox/addon/simple-translate Firefox], [https://microsoftedge.microsoft.com/addons/detail/simple-translate/cllnohpbfenopiakdcjmjcbaeapmkcdl Chrome], and [https://chrome.google.com/webstore/detail/simple-translate/ibplnjkanclpjokhdolnendpplpjiace Edge]) that work as well or better than the gadget.

{{See|Template:Vert header}}

{{Tl|vertical header}} also works with headers that span rows or columns (using rowspan and colspan). Note that there is no vertical bar | between rowspan=2 and {{vertical header}}

{{Tracked|T35249}}

{{t|sort under}} can be used to make the sorting arrows appear underneath the header text, which may be desirable to narrow the width of a column.

{{sort under}}

Tables can only be sorted vertically by clicking on the column headers (topmost cells). When a column header is clicked, the rows of the table reorder themselves in an up-and-down manner, based on the values in that column. However, there is no functionality to sort columns horizontally by clicking on a cell in the leftmost row. Thus, the table columns will not rearrange themselves left-to-right based on their data, as sorting horizontally is not supported in typical sortable table implementations.

If you want a specific column not to be sortable, specify class=unsortable in the attributes of its header cell. If you have a sorting row then class=unsortable must be in the header cell with the sorting icon.

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

Sometimes it is helpful to exclude the last row of a table from the sorting process. There are two methods to achieve this.

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. This footer makes it a complex table, and so scopes help accessibility via screen readers.

This applies to all rows at the end of the table that are consecutive and fully made up out of header cells. Those rows will not sort.

This can be achieved using class=sortbottom on the desired table row (line starting with |-).

This is a complex table due to the "Average" cell spanning 2 columns. "Average" is also the row heading for the last row. Using the ! (exclamation mark) syntax with scope=row causes the correct header HTML to be generated, which aids in accessibility, e.g., for those using screen readers.

It is possible to keep multiple lines fixed at the bottom, as long as the lines are consecutive.

If the "sortbottom" rows are not consecutive, then when the original order of a table is restored by clicking a third time on the same arrow then rows with class=sortbottom will remain at the bottom even if they were not originally at the bottom.

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

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 have 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. For numeric values, consider using template {{Tl|Val}}, see examples at {{Section link|Template:Val|Sorting}}.

{{See|meta:Help:Sorting#Forcing the sort mode for a column}}

The data-sort-type="..." 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. {{A note|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, as explained previously. If there are problems sorting a column, forcing a particular data type often helps. Be specific. If the column is currency, force that data type, not number.

The following (case-insensitive) values are valid for data-sort-type:

• text
• number
• currency
• url for website addresses
• IPAddress for numeric internet protocol addresses
• date for language specific standard date format
• isoDate for dates in ISO 8601 format (i.e. YYYY-MM-DD)
• usLongDate for dates in the US format of month day, year. Must have all 3 to work.
• time

data-sort-type=text uses alphabetical sorting of text, but numbers are sorted numerically within that alphabetical sorting. See natural sort order.

For example:

Without data-sort-type=text 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 within the first top five cells, but with a reference ... immediately after the last digit of at least one number in those first five cells, this may cause the column to be sorted as text. This can be avoided by declaring a different sort type such as: data-sort-type=number

If you do not specify a data-sort-type, the sort modes (the data types, 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

:* Note: Force this if column is currency. Otherwise, no sorting at all may occur.

; number

:* 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 NaN), the element is positioned like -∞.

; 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 ASCII – partial list showing the order: !"#$%&'()*+,-./09:;<=>?@[\]^_'az{|}~é— (see also below; a blank space comes before every other character; a non-breaking space code   counts as a space; two adjacent ordinary blank spaces count as one; for multiple blank spaces one can use   or alternate   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 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 data-sort-type, see above.

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:

Alternatively, you can set the data-sort-value attribute:

For example, this is handy to sort military ranks in rank-seniority order:

Wiki markup

This gives:

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 also {{section link|List of XML and HTML character entity references|Character entity references in HTML}}). 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:

data-sort-value=""WORD"

data-sort-value=""WORD"

data-sort-value 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:

If you have rows that contain colspans, this might become a little difficult. You can also use the class="expand-child" 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.

The script sees what the first 5 cells in a column contain. The sorting mode becomes numeric if the first 5 cells contain a number only (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 data-sort-type to the column header.

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.

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.

|

|}

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.

|

|}

: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 data-sort-type=number 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 data-sort-type=number 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.

When data-sort-type=number is not in the header the following is true:

• References ... after a number in any cell (including the first five cells) no longer break numerical sorting.
• The same is true for the percent symbol (%) after a number.
• Text breaks numerical sorting if it is before or after a number in one of the first 5 cells in a column.
• Asterisks (*) in the first 5 cells break numerical sorting.
• A colon by itself (to signify no data, for example) in one of the first 5 cells in a column breaks 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 data-sort-type=number is used in the column header.

Even when using data-sort-type=number 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 data-sort-type=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 data-sort-type=number to the column header. Later editing by other editors will not break numerical sorting.

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 data-sort-type in the column header.

{{See also|#Year, month, day. Using numbers. ISO date YYYY-MM-DD}}

"c." (circa, indicates "approximately") is often found in columns of numbers and dates. It often breaks sorting. The addition of data-sort-type="..." to the column header does not allow c. to be put in front of the number.

Using the {{tl|circa}} template fixes sorting when c. is in front of the number, but only if the sortable=yes parameter is added to the template. See: Template:Circa/doc/sortable.

:{{circa|NUMBER|sortable=yes}}

:{{circa|NUMBER|sortable=yes}}

Alternatively, c. can be put after the number. Or it can be moved to a different column.

:Note: Most problems are fixed by adding data-sort-type=number 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 data-sort-type=number in their column headers.

data-sort-type=number has fixed the sorting in the tables below. Note the sorting of 400+ and 400 +.

The {{Tl|Date table sorting}} or {{tl|dts}} template will work with any combination of years, months, days (example). See template documentation and section farther down for more info.

All sorting involving month names may fail for registered users who have changed the default language setting "en - English" at Special:Preferences (reported at phab:T126744). It affects relatively few users on the English Wikipedia and can be ignored.

Year sorting of a column works as long as the year is the first text in each cell in the column. Adding data-sort-type=date 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.

Date sorting does not work for columns with only the year before the month (no day).

Adding data-sort-type=date or data-sort-type=isoDate to the column header does not help. Click each column header a couple times in the tables below to see. Note the column headed data-sort-type=isoDate may sort correctly in some browsers, but it is not reliable.

Year and month in numerical form (YYYY-MM) works with data-sort-type=isoDate (see relevant section farther down).

Date sorting does not work for columns with only the month before the year (no day). Adding data-sort-type=date to the column header does not help.

|

|}

|

|}

This shows that any full date works without data-sort-type=date in the table. Month-day-year or day-month-year. If a number for a day is missing, date sorting is broken. Abbreviated months work too. The year must be on the end, and a number can not be used for the month. Either will break date sorting.

Date sorting works correctly in the first 2 tables below. Years before 100 (for example, year 99) break sorting.

data-sort-type=date in the header for the date column allows date sorting to work for all entries not missing a day number. So it is good to add it in case editors forget day numbers for some entries. That can be fixed later. The rest of the dates will sort correctly by date. Test date sorting below. Some entries below are missing the day number. They end up at the top or bottom of the data-sort-type=date list upon sorting. The list below without data-sort-type=date does not sort by date.

The 2 tables below are identical except for the addition of data-sort-type=date to the second table.