This is an old revision of the document!
Table of Contents
Mobile Tables Plugin
Compatible with DokuWiki
Detritus
This extension has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues.
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
- Update plugin.info.txt (2023-04-18 20:17)
- Fix PHP notice (2023-04-18 20:17)
- smarter rowspan fix (2021-08-28 18:49)
- Reset rowspans on every row to prevent index shifting (2021-08-28 18:23)
- Update plugin.info.txt (2021-04-29 13:28)
- Update script.js (2021-04-29 13:26)
- Add class to transformed table (2021-04-29 13:25)
- Add support for SSR or pjax (prevent multiple transformations) (2021-04-29 13:15)
Known Bugs and Issues
Footnotes in tables are not carried over to the mobile version.