README.md
1# dokuwiki-plugin-mobiletable
2
3https://www.dokuwiki.org/plugin:mobiletable
4
5This 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.
6This improves the mobile experience for wide tables as it prevents horizontal scrolling.
7
8In the mobile presentation (specified by your theme's `__phone_width__`) this:
9
10<table>
11 <tr>
12 <th> Name </th><th> Color </th><th> Size </th><th> Speed </th>
13 </tr>
14 <tr>
15 <th> Item 1 </th><td> Red </td><td> Small </td><td> 50 km/h </td>
16 </tr>
17 <tr>
18 <th> Item 2 </th><td> Green </td><td> Large </td><td> 30 km/h </td>
19 </tr>
20</table>
21
22```
23<mobiletable 1>
24^ Name ^ Color ^ Size ^ Speed ^
25^ Item 1 | Red | Small | 50 km/h |
26^ Item 2 | Green | Large | 30 km/h |
27</mobiletable>
28```
29
30...becomes this:
31
32<table>
33 <tr>
34 <th colspan="2"> Item 1 </th>
35 </tr>
36 <tr>
37 <td> Color </td><td> Red </td>
38 </tr>
39 <tr>
40 <td> Size </td><td> Small </td>
41 </tr>
42 <tr>
43 <td> Speed </td><td> 50 km/h </td>
44 </tr>
45 <tr>
46 <th colspan="2"> Item 2 </th>
47 </tr>
48 <tr>
49 <td> Color </td><td> Green </td>
50 </tr>
51 <tr>
52 <td> Size </td><td> Large </td>
53 </tr>
54 <tr>
55 <td> Speed </td><td> 30 km/h </td>
56 </tr>
57</table>
58
59## Syntax
60
61To activate mobile tables, wrap it in `<mobiletable>...</mobiletable>` syntax:
62
63```
64<mobiletable>
65^ Name ^ Color ^ Size ^ Speed ^
66^ Item 1 | Red | Small | 50 km/h |
67^ Item 2 | Green | Large | 30 km/h |
68</mobiletable>
69```
70
71This would create a mobile table like this:
72
73<table>
74 <tr>
75 <td> Name </td><td> Item 1 </td>
76 </tr>
77 <tr>
78 <td> Color </td><td> Red </td>
79 </tr>
80 <tr>
81 <td> Size </td><td> Small </td>
82 </tr>
83 <tr>
84 <td> Speed </td><td> 50 km/h </td>
85 </tr>
86 <tr>
87 <td> Name </td><td> Item 2 </td>
88 </tr>
89 <tr>
90 <td> Color </td><td> Green </td>
91 </tr>
92 <tr>
93 <td> Size </td><td> Large </td>
94 </tr>
95 <tr>
96 <td> Speed </td><td> 30 km/h </td>
97 </tr>
98</table>
99
100You may specify the index (starting with 1) of the column you want to make the main/index column.
101Using the first example again, your could also make the _Color_ column the main column:
102
103```
104<mobiletable 2>
105^ Name ^ Color ^ Size ^ Speed ^
106^ Item 1 | Red | Small | 50 km/h |
107^ Item 2 | Green | Large | 30 km/h |
108</mobiletable>
109```
110
111<table>
112 <tr>
113 <th colspan="2"> Red </th>
114 </tr>
115 <tr>
116 <td> Name </td><td> Item 1 </td>
117 </tr>
118 <tr>
119 <td> Size </td><td> Small </td>
120 </tr>
121 <tr>
122 <td> Speed </td><td> 50 km/h </td>
123 </tr>
124 <tr>
125 <th colspan="2"> Green </th>
126 </tr>
127 <tr>
128 <td> Name </td><td> Item 2 </td>
129 </tr>
130 <tr>
131 <td> Size </td><td> Large </td>
132 </tr>
133 <tr>
134 <td> Speed </td><td> 30 km/h </td>
135 </tr>
136</table>
137
138Note that the previous example could also be expressed using the ''!''-syntax for backwards compatibility:
139
140```
141!^ Name ^! Color ^ Size ^ Speed ^
142...
143```
144
145However, this syntax is not recommended anymore as it breaks section editing.
146