Help:Sortable tables: Difference between revisions

Revision as of 09:34, 17 August 2024

Latest revision as of 21:58, 20 August 2025

(25 intermediate revisions by 6 users not shown)

Line 5:

{{Wiki markup}}

{{TOC limit|3}}

{{hatnote|'''Note:''' Tables are sortable in mobile browsers, but not in the [[wikipedia mobile app|mobile app]]. See [[phab:T181452]].}}

== Creating sortable tables ==

[[File:Wikipedia VisualEditor Table Properties.png|thumb|The properties panel of a table in VisualEditor allows you to mark a table as sortable.]]

Tables can be made sortable via [[client-side JavaScript]] by adding <code>class="wikitable sortable"</code> 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 [[Help:Wiki markup|wikitext]]. For this, the <code>!</code> character is used in the table syntax.

If you are using the [[Wikipedia:VisualEditor|Visual Editor]], you can open the properties dialog of a table and select the sortable option.

=== Simple example ===

This is the wikitext of the table [[Help:Sortable tables#Example|shown]] in the first section and shows the typical way to enable table sorting:

<syntaxhighlight lang="wikitext">

{| class="wikitable sortable"

|-

! name

! data

! more data

|-

| cats

| 273

| 53

|-

| dogs

| 65

| 8,492

|-

| mice

| 1,649

| 548

|}

</syntaxhighlight>

The <code>!</code> 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 [[Help:Table/Introduction to tables|Introduction to tables]] for source editing.

=== Initial sort order of rows ===

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|§ Initial alphabetical order]].

== Using sortable tables ==

When browsing Wikipedia you may encounter [[Help:Table|tables]] that have been made ''[[Help:Table#Sorting|sortable]]''. A sortable table is identifieda 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. ClickingTypically, themreaders willcan cause thesort table rows to sortdata in ascending or descending order based on the values in the selected column. AThe secondfirst click on the sameheader arrowcell will sort the column’s data in ascending order, a second click of the same arrow descending order., and Aa third click will restore the original order of the wholeentire 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 yourthe 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 slowlow-performance computer may take a long time.

=== Example ===

This is an example of a small ''sortable'' table.:

<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">

Line 112 ⟶ 150:

</syntaxhighlight></div>

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 <code>class="sorttop"</code> at the top of the bottom header row. For example:

<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">

Line 188 ⟶ 226:

</div>

=== Tables with complexmerged data rows ===

{{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 <code>|colspan=<var>n</var> | <var>content</var></code>, whereas for rows, one uses <code>|rowspan=<var>m</var> | <var>content</var></code>. 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 <code>|rowspan=''n''</code>.

Tables can have cells spanning multiple rows, using <code>|rowspan=''n''</code>. (See [[Help:Table#Cells spanning multiple rows or columns|Help:Rowspan]]).

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.

Line 299 ⟶ 339:

* [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 [[Help:Sortable tables#Previous section|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 don'tdo not have to edit the wikitext as much in order to edit the table.

=== Secondary key and multi-key sorting ===

IfWhen a column contains arepeated value multiple times thenvalues, sorting the column preservesshould maintain the original order of the rows within each subset that hasshares the same value. inThis thatis columnknown as ([[SortingStable algorithm#Stabilitysorting|''stable sorting'']]). ThusAs sortinga basedresult, onmulti-key asorting (sorting by primary, secondary, tertiary keys, etc. key) can be doneachieved by sorting the least- significant key first, etcand the most significant key last. For example, to sort the table below onby the "Text" column, and then by the "Numbers" column, you would first click on and sort by the "Numbers" column, heading (the ''secondary sort key)'', and then click on and sort by the "Text" column, heading (the ''primary sort key)''.

Another waymethod tofor sort a table using multiple sortmulti-key keyssorting is to hold down the {{Key press|shift}} key while clicking on the column headings for the subsequent sort keys. For exampleinstance, to sort the table below onby the "Text" column, thenfollowed by the Numbers“Numbers" column, you would first click on the "Text"“Text” column heading (the primary sort key), then hold down the {{Key press|shift}} key and click on the "Numbers“Numbers" column heading (the secondary sort key).

There can be a problem if the [[User:Endo999/GoogleTrans|Google translation gadget]] is enabled in [[Special:Preferences#mw-prefsection-gadgets|gadget preferences]] (in browsing section). 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. There are many [https://www.google.com/search?q=browser+translation+addons browser translation addons] that work as well or better than the gadget. The gadget can be turned on and off from the "More" menu at the top of any page.

There can be a problem with sorting if the [[User:Endo999/GoogleTrans|Google translation gadget]] (see [[User talk:Endo999/GoogleTrans#Interference with secondary sorting in tables|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.

{|class="wikitable sortable"

!Numbers!!Text!!More text

Line 339 ⟶ 378:

|}

== OptionsOptimising tables for more columns in a narrow screendisplay ==

=== Vertical headers ===

Line 398 ⟶ 437:

</syntaxhighlight></div>

This{{Tl|vertical templateheader}} also works with headers that span rows or columns (using ''<code>rowspan''</code> and ''colspan''col<code>span</code>). '''Note''' that there is no vertical bar <code>|</code> between <code>rowspan=2</code> and <code><nowiki>{{vertvertical header}}</nowiki></code>

<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">

Line 484 ⟶ 523:

| 548

|}

== Creating sortable tables ==

[[File:Wikipedia VisualEditor Table Properties.png|thumb|The properties panel of a table in VisualEditor allows you to mark a table as sortable.]]

[[Help:Table|Tables]] can be made [[sorting|sortable]] via [[client-side JavaScript]] by adding <code>class="wikitable sortable"</code> to their top line. These tables need to be properly formatted, with the right number of cells. Additionally you need to make sure that the headers of your column are properly indicated in the [[Help:Wiki markup|wikicode]]. For this the <code>!</code> character is used in the table syntax.

If you are using the [[Wikipedia:VisualEditor|Visual editor]], you can open the properties dialog of a table and select the sortable option.

=== Simple example ===

This is the wikisource of the table [[#Example|shown]] in the first section and shows the typical way to enable table sorting:

<syntaxhighlight lang="wikitext">

{| class="wikitable sortable"

|-

! name

! data

! more data

|-

| cats

| 273

| 53

|-

| dogs

| 65

| 8,492

|-

| mice

| 1,649

| 548

|}

</syntaxhighlight>

The <code>!</code> 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 [[Help:Table/Introduction to tables|Introduction to tables]].

=== Initial sort order of rows ===

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|§ Initial alphabetical order]].'''

== Restrictions and exclusions ==

Tables can only click-to-sortbe sorted vertically downwardsby (clicking on athe column headers (topmost- cells). When a column-name willheader is causeclicked, the rows of the table to re-orderreorder themselves in theiran up-and-down positions).manner, Itbased ison notthe possiblevalues toin click-to-sortthat horizontallycolumn. acrossHowever, (there is no wayfunctionality to clicksort oncolumns ahorizontally leftmost-row-cellby soclicking ason toa causecell in the columnsleftmost ofrow. Thus, the table tocolumns re-orderwill themselvesnot inrearrange theirthemselves left-to-right positions)based on their data, as sorting horizontally is not supported in typical sortable table implementations.

=== Making selected columns unsortable ===

Line 697 ⟶ 702:

=== Excluding top rows from sorting ===

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

Table below is an adapted excerpt from [[List of U.S. states and territories by poverty rate]]. '''Sorttop''' is used on the US data row. And the US row is excluded from having a static row number. Note that the "Area" flag links can't be made bold the normal way. But the whole row can be made bold like this:

<syntaxhighlight lang=wikitext highlight=1>

|- class="sorttop static-row-numbers-norank" style="font-weight:bold;"

| {{flagg|uspeft|pref=Economy of|United States}}

| 12.5 || 0.1 || 40,763,043 || 277,214

</syntaxhighlight>

{{mw-datatable}}{{table alignment}}{{static row numbers}}{{sticky header}}

{| class="wikitable sortable sticky-header mw-datatable col1left static-row-numbers" style=text-align:right;

|+ Number and percentage of people in poverty by state, D.C., and Puerto Rico. Plus margin of error. 2023.

! Area !! Percent !! Error (±) !! Number !! Error (±)

|- class="sorttop static-row-numbers-norank" style="font-weight:bold;"

| {{flagg|uspeft|pref=Economy of|United States}}

| 12.5 || 0.1 || 40,763,043 || 277,214

|-

| {{flagg|uspeft|pref=Economy of|Puerto Rico}}

| 39.6 || 0.8 || 1,257,607 || 26,856

|-

| {{flagg|uspeft|pref=Economy of|Louisiana}}

| 18.9 || 0.6 || 840,146 || 27,162

|-

| {{flagg|uspeft|pref=Economy of|Mississippi}}

| 18.0 || 0.8 || 512,184 || 21,949

|}

Note that sorttop can't be used with multi-header rows in tables using {{tl|sticky table start}}. Single-row headers are not a problem.

== Configuring the sorting ==

Line 703 ⟶ 736:

== Forcing a column to have a particular data type ==

{{See|metamediawikiwiki:Help:SortingSortable tables#Forcing the sort mode forof a column}}

The <code>data-sort-type="..."</code> 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 <code>data-sort-type</code>:

Line 810 ⟶ 843:

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

=== Default data type of a column ===

Line 823 ⟶ 856:

:* 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

Line 834 ⟶ 868:

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 [[Help:Table#Row template|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 <code>data-sort-type</code>, see [[#Forcing a column to have a particular data type|upabove]].

== Specifying a sort key for a cell ==

Line 1,241 ⟶ 1,275:

To work '''<code>data-sort-type=number</code>''' 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 '''<code>data-sort-type=number</code>''' is '''not in the header''' the following is true:
*References <code><nowiki><ref>...</ref></nowiki></code> 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 <code>data-sort-type=number</code> is used in the column header.

Text breaks default numerical sorting if it is before or after a number in one of the first 5 cells in a column.

AEven colonwhen byusing itself<code>data-sort-type=number</code> (toin signifythe nocolumn dataheader, for example)text in onefront of the first 5a cellsnumber in aany columncell breaks numerical sorting of that cell.

Even when using <code>data-sort-type=number</code> 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 <code>data-sort-type=number</code>.

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 <code>data-sort-type=number</code> to the column header. Later editing by other editors will not break 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 <code>data-sort-type=number</code> is used in the column header.

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

Line 1,464 ⟶ 1,499:

== Date sorting problems ==

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

=== Month names ===

Line 1,654 ⟶ 1,689:

|}

</div>

<div style="display:inline-table; vertical-align:top;">

{| class="wikitable sortable"

Line 1,724 ⟶ 1,760:

|}

</div>

<div style="display:inline-table; vertical-align:top;">

{| class="wikitable sortable"

Line 2,013 ⟶ 2,050:

</div>

== Date table sorting template: Day and month,. Many other date formats ==

{{anchor|Date table sorting template}}

The simplest way to format sortable dates in a table is to use the '''{{tl|Date table sorting}}''' template. A redirect: '''{{tl|dts}}'''

It can be used with many date formats mixed together. Note the many formats used '''([[List of PC games (A)|hereexample]]).''' See template[[Template:Date documentationtable sorting]] for more info. In the tables below, all columns sort correctly. The wikitext for the first entry in each table in the first row is shown in the table header.

See example tables below. They all sort correctly. The wikitext for the first entry in each table in the first row is shown in the table header.

'''Note:''' None of the table columns use the <code>data-sort-type=</code> modifier. Using <code>data-sort-type=</code> can sometimes break sorting when used with the template. If you want the column to be narrower, you can use month abbreviations (''abbr=on'' parameter). You can also allow the text to wrap (''nowrap=off'' parameter). Use ''format=dmy'' or ''format=mdy'', etc. to control output format, if desired.

<div style="display:inline-table; vertical-align:top;">