Widget:Filter table

Description

This widget provides filter buttons above tables, and will allow table content to be filtered by CSS classes applied to rows.

Parameters

id

Required. The "id" attribute of the table to target with the widget

filters

A comma separated list of classes to filter for.

Optional: Use a broken-pipe symbol to display a different button text to the underlying value, e.g. value1¦displayname1, value2¦displayname2

Optional: Use wikicode in the button display text, including icons - sorry no commas.

Optional: A value of <br> will instead insert a newline.

Optional: A value of label¦displayname will instead insert a label.

mode

Optional. Defaults to "AND", which uses AND logic to connect filters.

Can be set to "OR" to use OR logic to join the filter buttons with OR logic instead.

Can also be set to "ONLY" logic to only allow one active filter at a time.

useopacity

Optional. If set to anything, uses opacity: 25% instead of display: none for the CSS rule when an item is filtered.

content

Optional, visual parameter. Adjusts the text displayed in the sentence "The <content (default: "table")> below can be filtered using the following buttons." Could be used to set the text to "list".

position

Optional, visual parameter. Adjusts the text displayed in the sentence "The table <position (default: "below")> can be filtered using the following buttons." Could be used to set the text to "above".

default

Optional. If set, a default filter will be applied when the widget is loaded. The value set for this parameter should match the name of the button. Multiple default filters can be set by separting filter names with a comma.

Filter attributes

data-filter-id

Used in table header (<table>), list header (<ul>) or block header (<div>) to match the parameter "id" specified in the {{filter table|id=<id>}}.

Filter classes

filter-row

Used in tables, sets display: table-row.

filter-list

Used in lists, sets display: list-item.

filter-plain

Used in blocks, sets display: block.

Notes

• This widget should be used via Template:Filter table so that its usage can be tracked.
• Incompatible with tables with the "collapsible" or "expandable" classes. Use "mw-collapsible" instead.

Example

AND

{{Filter table|id=table1|filters=PvE,WvW,PvP|mode=AND}}
{| data-filter-id="table1" class="wikitable"
! Heading one
! Heading two

|- class="filter-row WvW"
| Power wvw
| Precision wvw

|- class="filter-row PvE"
| Power pve
| Precision pve

|- class="filter-row PvP"
| Condition damage pvp
| Ferocity pvp

|- class="filter-row PvE WvW"
| Power pve 2 + wvw
| Precision pve 2 + wvw

|- class="filter-row PvP"
| Condition damage pvp 2
| Ferocity pvp 2
|}

Heading one	Heading two
Power wvw	Precision wvw
Power pve	Precision pve
Condition damage pvp	Ferocity pvp
Power pve 2 + wvw	Precision pve 2 + wvw
Condition damage pvp 2	Ferocity pvp 2

---

OR

{{Filter table|id=table2|filters=PvE,WvW,PvP|mode=OR}}
{| data-filter-id="table2" class="wikitable"
! Heading one
! Heading two

|- class="filter-row WvW"
| Power wvw
| Precision wvw

|- class="filter-row PvE"
| Power pve
| Precision pve

|- class="filter-row PvP"
| Condition damage pvp
| Ferocity pvp

|- class="filter-row PvE WvW"
| Power pve 2 + wvw
| Precision pve 2 + wvw

|- class="filter-row PvP"
| Condition damage pvp 2
| Ferocity pvp 2
|}

Heading one	Heading two
Power wvw	Precision wvw
Power pve	Precision pve
Condition damage pvp	Ferocity pvp
Power pve 2 + wvw	Precision pve 2 + wvw
Condition damage pvp 2	Ferocity pvp 2

---

ONLY

{{Filter table|id=table3|filters=PvE,WvW,PvP|mode=ONLY}}
{| data-filter-id="table3" class="wikitable"
! Heading one
! Heading two

|- class="filter-row WvW"
| Power wvw
| Precision wvw

|- class="filter-row PvE"
| Power pve
| Precision pve

|- class="filter-row PvP"
| Condition damage pvp
| Ferocity pvp

|- class="filter-row PvE WvW"
| Power pve 2 + wvw
| Precision pve 2 + wvw

|- class="filter-row PvP"
| Condition damage pvp 2
| Ferocity pvp 2
|}

Heading one	Heading two
Power wvw	Precision wvw
Power pve	Precision pve
Condition damage pvp	Ferocity pvp
Power pve 2 + wvw	Precision pve 2 + wvw
Condition damage pvp 2	Ferocity pvp 2