DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:mobiletable

This is an old revision of the document!


Mobile Tables Plugin

Compatible with DokuWiki

Detritus

plugin Rearranges tables to be responsive.

Last updated on
2016-05-06
Provides
CSS/JS-only
Repository
Source

This extension has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues.

Tagged with mobile, responsive, table

By Bleistivt

Installation

Install the plugin using the Plugin Manager and the download URL above, which points to latest version of the plugin. 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
!^! Name   ^ Color ^ Size  ^ Speed   ^
^ Item 1   | Red   | Small | 50 km/h |
^ Item 2   | Green | Large | 30 km/h |

…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, add ! in front of a table's head row:

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

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

Use a second ! as the first character of the cell that you want to make the main/index column. Using the first example again, your could also me the Color column the main column:

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

Additionally this plugin provides <only desktop></only> and <only mobile></only> markup (which it also uses internally) that can be used to hide content from one or the other.

Change Log

Known Bugs and Issues

:!: Footnotes in tables are not carried over to the mobile version.

FAQ

Discussion

plugin/mobiletable.1462538679.txt.gz · Last modified: 2016-05-06 14:44 by 2003:71:ce75:8722:d47e:6923:ea16:9898