DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:mobiletable

Mobile Tables Plugin

Compatible with DokuWiki

  • 2024-02-06 "Kaos" unknown
  • 2023-04-04 "Jack Jackrum" yes
  • 2022-07-31 "Igor" yes
  • 2020-07-29 "Hogfather" yes

plugin Rearranges tables to be responsive

Last updated on
2023-04-18
Provides
Syntax, Action
Repository
Source

Tagged with mobile, responsive, tables

By Bleistivt

Installation

Search and install the plugin using the Extension Manager. Refer to Plugins on how to install plugins manually.

Examples/Usage

This plugin creates a second representation of a table, where all columns are stacked on top of each other, which is only shown for mobile devices. This improves the mobile experience for wide tables as it prevents horizontal scrolling.

In the mobile presentation (specified by your theme's __phone_width__) this:

Name Color Size Speed
Item 1 Red Small 50 km/h
Item 2 Green Large 30 km/h
<mobiletable 1>
^ Name     ^ Color ^ Size  ^ Speed   ^
^ Item 1   | Red   | Small | 50 km/h |
^ Item 2   | Green | Large | 30 km/h |
</mobiletable>

…becomes this:

Item 1
Color Red
Size Small
Speed 50 km/h
Item 2
Color Green
Size Large
Speed 30 km/h

Syntax

To activate mobile tables, wrap it in <mobiletable>…</mobiletable> syntax:

<mobiletable>
^ Name    ^ Color ^ Size  ^ Speed   ^
^ Item 1  | Red   | Small | 50 km/h |
^ Item 2  | Green | Large | 30 km/h |
</mobiletable>

This would create a mobile table like this:

Name Item 1
Color Red
Size Small
Speed 50 km/h
Name Item 2
Color Green
Size Large
Speed 30 km/h

You may specify the index (starting with 1) of the column you want to make the main/index column. Using the first example again, your could also make the Color column the main column:

<mobiletable 2>
^ Name    ^ Color  ^ Size  ^ Speed   ^
^ Item 1  | Red    | Small | 50 km/h |
^ Item 2  | Green  | Large | 30 km/h |
</mobiletable>
Red
Name Item 1
Size Small
Speed 50 km/h
Green
Name Item 2
Size Large
Speed 30 km/h

Note that the previous example could also be expressed using the !-syntax for backwards compatibility:

!^ Name   ^! Color ^ Size  ^ Speed   ^
...

However, this syntax is not recommended anymore as it breaks section editing.

Configuration options

Option Description Default value
hideHeadings Names of table headings (comma separated), which are redundant or self-explanatory. These will not be duplicated for the mobile view but displayed as a connected cell instead. (e.g.: “image, #, no.”) image, Image

Change Log

Known Bugs and Issues

  • This extension does not appear to work with the “mikio” theme

FAQ

Discussion

plugin/mobiletable.txt · Last modified: 2023-12-04 17:28 by 142.170.80.30

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki