Help:Sortable tables: Difference between revisions

Revision as of 15:57, 29 December 2024

Latest revision as of 21:58, 20 August 2025

(14 intermediate revisions by 5 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 ==

Line 700 ⟶ 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 706 ⟶ 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 826 ⟶ 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 1,244 ⟶ 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 default numerical sorting if it is before or after a number in one of the first 5 cells in a column.

A*Asterisks dash(*) in frontthe offirst a5 number does notcells break numerical sorting.

*A dash,colon ofby anyitself kind,(to insignify ano blankdata, cellfor example) in one of the first 5 cells in a column breaks default numerical sorting of a column.

*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 2,022 ⟶ 2,054:

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:Date table 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;">