Help:Sortable tables: Difference between revisions

Revision as of 11:13, 2 October 2024

Revision as of 11:30, 2 October 2024

Line 342:

|}

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

=== Vertical headers ===

Line 401:

</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 490:

== 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 rightcorrect number of cells. Additionally, you need to make sure that the headers of your column are properly indicated in the [[Help:Wiki markup|wikicodewikitext]]. For this, the <code>!</code> character is used in the table syntax.

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

=== Simple example ===

This is the wikisourcewikitext 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"

Line 516:

|}

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

== 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 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, as explained previously.

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

Line 813:

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

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 ==