Manual:Extension/BlueSpiceFilterableTables: Difference between revisions

No edit summary
Tag: 2017 source edit
No edit summary
Line 4: Line 4:


==Setting the filter option==
==Setting the filter option==
To create the table filter, the CSS class "filterable" is added to the table.
===Visual editing===
To apply a filterable table style to your table:


===Using VisualEditor===
# '''Click''' once in the table. This opens the table inspector.
In edit mode, click on the table to open the options popup and click on "Properties". In the dialog that opens, toggle on "Filterable" option.
# '''Click''' ''Properties'' in the inspector. [[File:FitlerableTables1a.png|thumb|alt=|center|550x550px|Selecting table properties]]
{| class="wikitable"
# '''Activate''' the slider for the setting ''filterable''. [[File:FitlerableTables2a.png|thumb|alt=Setting the filter option|center|550x550px|Setting the filter option]]
|+
# '''Click''' done.
|[[File:FitlerableTables1a.png|thumb|alt=Selecting table properties|center|387x387px|Selecting table properties]]
# '''Save''' the page. After saving the page, you will see a filterable table layout.
|[[File:FitlerableTables2a.png|thumb|alt=Setting the filter option|center|319x319px|Setting the filter option]]
 
|}
{{Messagebox|boxtype=note|icon=|Note text=Any table styles that are applied in the table properties are ignored as long as the value "filterable" is active. A filterable table comes with its own table styling.|bgcolor=}}


===Using Wikitext===
=== Source editing ===
[[File:FitlerableTables4a.png|thumb|Adding  the "filterable" class in wikitext|alt=Adding the "filterable" class in wikitext|center|450x450px]]
In source-editing mode, add the class "filterable" to the table opening line:
In source-editing mode, add the class "filterable" to the table header.
<pre>
<pre>
{| class="wikitable filterable"
{| class="wikitable filterable"
Line 22: Line 22:
!Heading 1
!Heading 1
...
...
</pre>
</pre>[[File:FitlerableTables4a.png|thumb|Adding  the "filterable" class in wikitext|alt=Adding the "filterable" class in wikitext|center|550x550px]]
 
== Filtering table columns==
==Filtering tables==


The special filter layout of a table is only applied in view mode.  
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.
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.
[[File:Manual:FitlerableTables3a.png|alt=|center|thumb|436x436px|Applying a table filter]]
[[File:Manual:FitlerableTables3a.png|alt=Applying a table filter|center|thumb|550x550px|Applying a table filter]]{{Box Links-en|Topic1=[[Reference:BlueSpiceFilterableTables]]}}
{{Messagebox|boxtype=note|Note text=Any table styles that are applied by the table class are ignored as long as the value "filterable" exists in the class rule. A filterable table comes with its own table styling.}}{{Box Links-en|Topic1=[[Reference:BlueSpiceFilterableTables]]}}


[[en:{{FULLPAGENAME}}]]
[[en:{{FULLPAGENAME}}]]

Revision as of 15:45, 22 November 2022


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:

  1. Click once in the table. This opens the table inspector.
  2. Click Properties in the inspector.
    Selecting table properties
  3. Activate the slider for the setting filterable.
    Setting the filter option
    Setting the filter option
  4. Click done.
  5. Save the page. After saving the page, you will see a filterable table layout.
Note:Any table styles that are applied in the table properties are ignored as long as the value "filterable" is active. A filterable table comes with its own table styling.


Source editing

In source-editing mode, add the class "filterable" to the table opening line:

{| class="wikitable filterable"
|+
!Heading 1
...
Adding the "filterable" class in wikitext
Adding the "filterable" class in wikitext

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.

Applying a table filter
Applying a table filter

Related info



To submit feedback about this documentation, visit our community forum.