Help:Sortable tables: Difference between revisions

Content deleted Content added
creating should be above using?
Line 5:
{{Wiki markup}}
{{TOC limit|3}}
 
== 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 ==
Line 487 ⟶ 521:
| 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.]]
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]].
 
== Restrictions and exclusions ==