Help:Sortable tables: Difference between revisions

Revision as of 01:42, 26 March 2024

Latest revision as of 21:58, 20 August 2025

(46 intermediate revisions by 12 users not shown)

Line 1:

{{short description|Help with sorting of rows in tables}}

{{About||other uses|Help:Sorting}}

{{Table help}}

{{About||more help|Help:Table|and|Help:Tables and VisualEditor|and|Help:Creating tables|and|Help:Wikitable|and|Help:Basic table markup|and|Help:Table/Advanced|and|WP:Advanced table formatting|and|Help:Tables and locations|style info|Wikipedia:Manual of Style/Tables|accessibility|Wikipedia:Manual of Style/Accessibility/Data tables tutorial}}

{{Wikipedia how to|WP:TABLESORT|WP:SORT}}

{{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 460 ⟶ 499:

== Sort under template ==

{{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.

'''[[Template:Sort under]].''' This replaces the older deprecated template: '''[[Template:Sorting row]].''' Please replace it anywhere you see it used, because it breaks the use of the ''data-sort-type=VALUE'' attribute. See [[#Forcing a column to have a particular data type]].

Editors may unknowingly add that attribute in combination with the deprecated template, and not notice that the sorting is not happening exactly the way they expected. It can be a subtle change.

<syntaxhighlight lang=wikitext>

{{sort under}}

{| class="wikitable sortable sort-under"

</syntaxhighlight>

{{sort under}}

Line 490 ⟶ 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 703 ⟶ 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 ==

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}}.

== 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 721 ⟶ 748:

* <code>date</code> for language specific standard date format

* <code>isoDate</code> for dates in [[ISO 8601]] format (i.e. YYYY-MM-DD)

* <code>usLongDate</code> for dates in the US format (with theof month beforeday, theyear. day)Must have all 3 to work.

* <code>time</code>

Line 816 ⟶ 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 829 ⟶ 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 840 ⟶ 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 929 ⟶ 957:

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(see also {{section '''[[link|List of XML and HTML character entity references#|Character entity references in HTML|here]]''' too}}). 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:

<code style="color:red; font-weight:bold;">data-sort-value="&amp;quot;WORD"</code>

<code style="color:red; font-weight:bold;">data-sort-value="&amp;#34;WORD"</code>

=== Keeping some rows together ===

Line 1,247 ⟶ 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,470 ⟶ 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,633 ⟶ 1,662:

|}

=== Month,Full day,dates andwork. yearYear must be on the end ===

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.

SortingDate sorting works correctly in all the first 2 tables below. Years before 100 (for example, year 99) break sorting. If a number for a day is missing, sorting is broken.

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

{|

|- style=vertical-align:text-top;

|

{| class="wikitable sortable"

|-

! Full dates

! Month, day, year

|-

| Dec 5, 1999

Line 1,651 ⟶ 1,679:

|-

| Aug 4, 2004

|}

|

{| class="wikitable sortable"

|-

| 5 Dec 1999

! Month, day, year

|-

| December7 5,Jan 1999

|-

| January14 7,May 19992004

|-

| May4 14,Aug 2004

|-

| August 4, 2004

|}

|}

</div>

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

{|

|- style=vertical-align:text-top;

|

{| class="wikitable sortable"

|-

! Full dates

! data-sort-type=date | Month, day, year<br><code>data-sort-type=date</code>

|-

| DecDecember 5, 1999

|-

| JanJanuary 7, 1999

|-

| May 14, 2004

|-

| AugAugust 4, 2004

|}

|

{| class="wikitable sortable"

|-

| 5 December 1999

! data-sort-type=date | Month, day, year<br><code>data-sort-type=date</code>

|-

| December7 5,January 1999

|-

| January14 7,May 19992004

|-

| May4 14,August 2004

|-

| August 4, 2004

|}

|}

</div>

'''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.

=== Day, month, and year ===

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

Sorting works correctly in all cases below. Years before 100 (for example, year 99) break sorting. If a number for a day is missing, sorting is broken.

<syntaxhighlight lang=wikitext>

{| class="wikitable sortable"

|-

! data-sort-type=date | Full dates.<br><code>data-sort-type=date</code>

</syntaxhighlight>

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

{|

|- style=vertical-align:text-top;

|

{| class="wikitable sortable"

|-

! Full dates.<br>A mix of formats

! Day, month, year

|-

| Dec 5, 1999

|-

| Jan 7, 1999

|-

| May 2004

|-

| Aug 4, 2004

|-

| 5 Dec 1999

Line 1,715 ⟶ 1,742:

|-

| 4 Aug 2004

|}

|

{| class="wikitable sortable"

|-

| December 1999

! Day, month, year

|-

| January 7, 1999

|-

| May 14, 2004

|-

| August 4, 2004

|-

| 5 December 1999

|-

| 7 January 1999

|-

| 14 May 2004

Line 1,729 ⟶ 1,759:

| 4 August 2004

|}

</div>

|}

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

{|

|- style=vertical-align:text-top;

|

{| class="wikitable sortable"

|-

! data-sort-type=date | Day,Full month, yeardates.<br><code>data-sort-type=date</code>

|-

| Dec 5, 1999

|-

| Jan 7, 1999

|-

| May 2004

|-

| Aug 4, 2004

|-

| 5 Dec 1999

Line 1,745 ⟶ 1,781:

|-

| 4 Aug 2004

|}

|

{| class="wikitable sortable"

|-

| December 1999

! data-sort-type=date | Day, month, year<br><code>data-sort-type=date</code>

|-

| January 7, 1999

|-

| May 14, 2004

|-

| August 4, 2004

|-

| 5 December 1999

|-

| 7 January 1999

|-

| 14 May 2004

Line 1,759 ⟶ 1,798:

| 4 August 2004

|}

</div>

|}

=== Year, month, day. Using words for months ===

Line 2,011 ⟶ 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;">

Line 2,440 ⟶ 2,477:

=== Putting a table in initial alphabetical order ===

<span id="initial alphabetical order"></span>

{{See|Help:TableCreating tables#Tables and the visual editor (VE)}}

{{See also|Phab:T240114}}

There are fast and slow ways to do this. Unfortunately, the [[WP:VE|Visual Editor]] does not have a fast way to quickly alphabetize a table. You can manually move rows around one at a time. Click on a cell in a row. Then click on the arrow that shows up at the left of the row. Then click on "move above" or "move below" as needed. If this is buggy or is not working, the rows can be moved around in the wikitext by cutting and pasting rows in the wikitext.

'''A fast way''' is to launch free '''[[w:LibreOffice Calc|LibreOffice Calc]],''' or [[List of spreadsheet software|another spreadsheet program]]. To see how go to '''[[Help:TableCreating tables#Sort. alphabetically/numerically with spreadsheetSpreadsheet & VE]].''' For more info see [[commons:Commons:Convert tables and charts to wiki code or image files|Commons:Convert tables and charts to wiki code or image files]].

'''There is another way''' to alphabetize a table, and it keeps all the styling and flag links that a spreadsheet may remove. One can use '''NoteTab Light''' (freeware version of NoteTab). But for this to work, all the wikitext for a row must be on one line. That means the cells in that row are separated by double bars {{big|'''<code><nowiki>||</nowiki></code>'''}}.