====== Mobile Tables Plugin ======

---- plugin ----
description: Rearranges tables to be responsive
author     : Bleistivt
email      :  
type       : syntax, action
lastupdate : 2023-04-18
compatible : Greebo, Hogfather, Igor, Jack Jackrum
depends    : 
conflicts  : 
similar    : 
tags       : tables, mobile, responsive

downloadurl: https://github.com/bleistivt/dokuwiki-plugin-mobiletable/zipball/master
bugtracker : https://github.com/bleistivt/dokuwiki-plugin-mobiletable/issues
sourcerepo : https://github.com/bleistivt/dokuwiki-plugin-mobiletable/
donationurl: 

screenshot_img : 
----

===== Installation =====

Search and install the plugin using the [[plugin:extension|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 ===

{{rss>https://github.com/bleistivt/dokuwiki-plugin-mobiletable/commits/master.atom date}}

=== Known Bugs and Issues ===

  * This extension does not appear to work with the "mikio" theme

===== FAQ =====

===== Discussion =====