No edit summary Tag: 2017 source edit |
No edit summary |
||
(5 intermediate revisions by the same user not shown) | |||
Line 24: | Line 24: | ||
</pre>[[File:FitlerableTables4a.png|thumb|Adding the "filterable" class in wikitext|alt=Adding the "filterable" class in wikitext|center|550x550px]] | </pre>[[File:FitlerableTables4a.png|thumb|Adding the "filterable" class in wikitext|alt=Adding the "filterable" class in wikitext|center|550x550px]] | ||
== | == Sorting columns with special data types == | ||
If a column should consider special data types for sorting (e.g., date, number), you can add a ''class'' attribute '''in the header cell'' of that column. Please note that a header cell is always defined | If a column should consider special data types for sorting (e.g., date, number), you can add a ''class'' attribute '''in the header cell''' of that column. Please note that a header cell is always defined by an exclamation mark ("<code>!</code>"). | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
{| class="wikitable filterable" | {| class="wikitable filterable" | ||
Line 59: | Line 59: | ||
|} | |} | ||
Possible values are: | |||
Possible values for the ''class'' attribute are: | |||
* string | * string | ||
* integer | * integer |
Latest revision as of 07:51, 25 April 2024
FilterableTables applies a filterable and sortable table layout to regular content tables in wiki articles.
Setting the filter option
Visual editing
To apply a filterable table style to your table:
- Click once in the table. This opens the table inspector.
- Click Properties in the inspector.
- Activate the slider for the setting filterable.
- Click done.
- Save the page. After saving the page, you will see a filterable table layout.
Source editing
In source-editing mode, add the class "filterable" to the table opening line:
{| class="wikitable filterable" |+ !Heading 1 ...
Sorting columns with special data types
If a column should consider special data types for sorting (e.g., date, number), you can add a class attribute in the header cell of that column. Please note that a header cell is always defined by an exclamation mark ("!
").
{| class="wikitable filterable"
|+
! class="number" |Col A
|-
|1
|-
|2
|-
|30
|-
|11
|-
|5
|}
Output:
Col A |
---|
1 |
2 |
30 |
11 |
5 |
Possible values for the class attribute are:
- string
- integer
- number
- date
Filtering table columns
The special filter layout of a table is only applied in view mode.
To filter the values in the table, click on the header of the column to filter and select "Filter" from the dropdown menu. In the input field that opens, type in the filter text.