Editing Module:AutosortTable/doc (section)

== Usage ==
This module helps create data tables in an automatically sorted order. As of this writing it is used primarily for the generation of the huge, dynamic tables at [[list of Wikipedias]] and [[Wikipedia:List of Wikipedias]]. For [[list of Wikipedias#Wikipedia editions|the '''Wikipedia editions''' table]], the module is invoked directly to create the ''framework'' for the table, followed by content for the rows within the module's invocation. For [[Wikipedia:List of Wikipedias#Detailed list|the '''Edition details''' table]], the module is invoked directly to create the ''framework'' for the table while the template {{tlx|Wikipedia stats}} generates content for the individual rows, also within the module's invocation. The template {{tlx|Wikipedia stats}} is intended to be called as an argument within the module's invocation, as it does not produce the regular wikitable (or any standard table) code itself.

The module's arguments are:
<syntaxhighlight lang="wikitext" style="overflow:auto;">
{{#invoke:AutosortTable|create|class=|style=|separator=|order=|numeric=|descending=|hidden=|caption=|rowheader=
|header = 
|footer = 
|colstyle = 
}}
</syntaxhighlight>

{| class="wikitable"
|+ Module arguments
|-
! scope="col" | Argument !! scope="col" style="width:13em" | Example !! scope="col" | Notes
|-
! scope="row" | ''function''
| <code>create</code> || The argument '''create''' is the only function of this module, and is required.
|-
! scope="row" | class
| <code>class=wikitable</code> || Class for the entire table. Table can be made user-sortable by including the class "sortable", but does not need to be.
|-
! scope="row" | style
| <code>style=width: 50%;</code> || [[CSS]] for the entire table
|-
! scope="row" | separator
| <code>separator=--</code> || Separator string used to separate cells in the data definition. The pipe <nowiki>(|)</nowiki> is an invalid separator for this module.
|-
! scope="row" | order
| <code>order=3, 2</code> || Order for auto-sorting preference, takes a comma-separated list of column numbers. In the example here, the table will be sorted by column 3 first, then by column 2.
|-
! scope="row" | numeric
| <code>numeric=2</code> || Columns which use numeric sorting when auto-sorted. Takes comma-separated list of column numbers.
|-
! scope="row" | descending
| <code>descending=3</code> || Columns for which the auto-sort order should be descending (otherwise, ascending is used). Takes comma-separated list of column numbers. Here, only the third column will be auto-sorted in descending order (e.g., Zebra, Walrus, Muskrat, Emu, etc., or 12, 9, 6, 4).
|-
! scope="row" | hidden
| <code>hidden=2</code> || Columns which are not to be displayed (even though they may be used for row-sorting purposes). Takes comma-separated list of column numbers. Here, the second column will not be shown.
|-
! scope="row" | caption
| <code>caption=Notable people by age</code> || Caption to be used for the table, per MOS:ACCESS
|-
! scope="row" | rowheader
| <code>rowheader=1</code> || Cell(s) in each non-header ''row'' to be emitted as row header, per [[MOS:Accessibility#Data tables|MOS:ACCESS]]. Usually 1, and only 1, but accepts comma-separated list of column numbers. Causes <code><nowiki>!scope="row"</nowiki></code> to be used in the HTML for the cells specified.
|-
! scope="row" | header
| <code>header = -- Name -- Age</code> || These are the column headings. In this example there are two columns with headings, the first is "Name", the second, "Age". Note the separators (<code>--</code>) which match the ''separator'' value above.
|-
! scope="row" | footer
| <code>footer =-- Country -- Population -- Density</code> || Table footer, typically a duplication of header (see ''header'' argument above). Here, the first three columns have the footer labels shown.
|-
! scope="row" | colstyle
| <code>colstyle = -- text-align:left; -- text-align:right; --  --  --</code> || Adds the specified CSS styling to entire columns. Here, the first column will be left-aligned, the second column will be right-aligned, and the next three columns (with no CSS specified) will use the default styling. Note the separators (<code>--</code>) which match the ''separator'' value above.
|}

=== Styling tricks ===
While there appear to be no ways to style an individual cell when using this module, styling particular rows, columns, or the entire table can be done using CSS.

==== Styling the table ====
The ''style'' argument allows the entire table to use a default styling. For example, <code>|style=width:70%; text-align:center;</code> would constrain the table width to 70% of the available window, and center the text (not including column and row headers) by default. When using multiple properties, the semicolon is necessary to separate them. Do ''not'' use the quotation marks ordinarily required in CSS or wikitable markup (as in <code>"|style=width:70%; text-align:center;"</code>), as it causes the CSS to be disregarded. A reminder: use CSS to constrain tables sparingly, as reduced font-size or unexpected table widths may cause [[MOS:ACCESS|accessibility]] problems or irritate readers.

==== Styling a row ====
An individual row can be styled separately by including CSS prior to the first data cell. Consider this example table:
<syntaxhighlight lang="wikitext" style="overflow:auto;">
{{#invoke:AutosortTable|create|class=wikitable plainrowheaders sortable|separator=--|order=2|numeric=2|descending=2|caption=Old friends|rowheader=1
|header = -- Name -- Age -- Diet                    <!-- Table header -->
| -- Maria -- 36 -- Vegan                           <!-- Row 1 -->
| -- Peter -- 35 -- Vegetarian                      <!-- Row 2 -->
| -- Julia -- 35 -- Meat                            <!-- Row 3 -->
| -- James -- 50 -- Vegan                           <!-- Row 4 -->
| background-color: #FFDDDD -- Henry -- 45 -- Meat  <!-- Row 5, with CSS -->
| -- Ireni -- 47 -- Fish, no meat                   <!-- Row 6 -->
|colstyle = -- text-align:left; -- text-align:right; --  --  --
}}
</syntaxhighlight>
{{#invoke:AutosortTable|create|class=wikitable plainrowheaders sortable|separator=--|order=2|numeric=2|descending=2|caption=Old friends|rowheader=1
|header = -- Name -- Age -- Diet                    <!-- Table header -->
| -- Maria -- 36 -- Vegan                           <!-- Row 1 -->
| -- Peter -- 35 -- Vegetarian                      <!-- Row 2 -->
| -- Julia -- 35 -- Meat                            <!-- Row 3 -->
| -- James -- 50 -- Vegan                           <!-- Row 4 -->
| background-color: #FFDDDD -- Henry -- 45 -- Meat  <!-- Row 5, with CSS -->
| -- Ireni -- 47 -- Fish, no meat                   <!-- Row 6 -->
|colstyle = -- text-align:left; -- text-align:right; --  --  --
}}
The row for "Henry" gets a pink color ([[web colors#Hex triplet|#FFDDDD]]), while the row header appropriately retains the gray formatting wikitables use for headers.

==== Styling a column ====
An individual column can be styled separately by using CSS in the ''colstyle'' argument. In the '''Old friends''' example just above, the alignment has been set to <code>text-align:left;</code> and <code>text-align:right;</code>, respectively. Consider this similar table:
<syntaxhighlight lang="wikitext" style="overflow:auto;">
{{#invoke:AutosortTable|create|class=wikitable plainrowheaders sortable|separator=--|order=2|numeric=2|descending=2|caption=Old friends again|rowheader=1
|header = -- Name -- Age -- Diet    <!-- Table header -->
| -- Maria -- 36 -- Vegan           <!-- Row 1 -->
| -- Peter -- 35 -- Vegetarian      <!-- Row 2 -->
| -- Julia -- 35 -- Meat            <!-- Row 3 -->
| -- James -- 50 -- Vegan           <!-- Row 4 -->
| -- Henry -- 45 -- Meat            <!-- Row 5 -->
| -- Ireni -- 47 -- Fish, no meat   <!-- Row 6 -->
|colstyle = --  -- font-weight:bold; color:brown -- background-color:yellow
}}
</syntaxhighlight>
{{#invoke:AutosortTable|create|class=wikitable plainrowheaders sortable|separator=--|order=2|numeric=2|descending=2|caption=Old friends again|rowheader=1
|header = -- Name -- Age -- Diet    <!-- Table header -->
| -- Maria -- 36 -- Vegan           <!-- Row 1 -->
| -- Peter -- 35 -- Vegetarian      <!-- Row 2 -->
| -- Julia -- 35 -- Meat            <!-- Row 3 -->
| -- James -- 50 -- Vegan           <!-- Row 4 -->
| -- Henry -- 45 -- Meat            <!-- Row 5 -->
| -- Ireni -- 47 -- Fish, no meat   <!-- Row 6 -->
|colstyle = --  -- font-weight:bold; color:brown -- background-color:yellow
}}
The "Age" column entries are now in bolded brown and no longer left-aligned as in the previous example. The "Diet" column here has the specified yellow background.