Help:Sortable tables: Difference between revisions

Revision as of 10:41, 2 October 2024

Revision as of 11:13, 2 October 2024

Line 7:

== 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 your computer 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 slow computer may take a long time.

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 ⟶ 114:

</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 ⟶ 190:

</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 ⟶ 303:

* [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]] (see [[User talk:Endo999/GoogleTrans#Interference with secondary sorting in tables|discussion]]) is enabled in [[Special:Preferences#mw-prefsection-gadgets|Preferences/Gadgets]] (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 quickly, once enabled in preferences, from the "Tools" menu at the upper right of any page.

{|class="wikitable sortable"

!Numbers!!Text!!More text

Line 705 ⟶ 708:

{{See|meta:Help:Sorting#Forcing the sort mode for 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.

The following (case-insensitive) values are valid for <code>data-sort-type</code>: