comparison default/node_modules/tablesaw/demo/swipe-config.html @ 0:1d038bc9b3d2 default tip

Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>TableSaw Sortable Table</title>
8
9 <link rel="stylesheet" href="../dist/tablesaw.css">
10 <link rel="stylesheet" href="demo.css">
11 <link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
12
13 <script>
14 TablesawConfig = {
15 swipeHorizontalThreshold: 20, // default is 15
16 swipeVerticalThreshold: 40 // default is 30
17 };
18 </script>
19 <script src="../dist/tablesaw.js"></script>
20 <script src="../dist/tablesaw-init.js"></script>
21 <script src="//filamentgroup.github.io/demo-head/loadfont.js"></script>
22 </head>
23 <body>
24 <div class="demo-header">
25 <div class="company">
26 <img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
27 </div>
28 <div class="details">
29 <h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
30 <span class="description">A group of plugins for responsive tables.</span>
31 </h1>
32 <ul class="outbound-links">
33 <li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
34 <li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
35 </ul>
36 </div>
37 </div>
38 <div class="nav-container">
39 <div class="docs-globalnav">
40 <nav class="docs-nav">
41 <a href="kitchensink.html">Kitchen Sink</a>
42 <a href="modeswitch.html">Mode Switch</a>
43 <a href="sort.html">Sortable</a>
44 <a href="stack.html">Stack</a>
45 <a href="stackonly.html">Stack Only</a>
46 <a href="swipe.html" class="current">Swipe Table</a>
47 <a href="toggle.html">Toggle</a>
48 </nav>
49 </div>
50 </div>
51 <div class="docs-main">
52 <h2>Swipe Table</h2>
53
54 <table class="tablesaw" data-tablesaw-mode="swipe" data-minimap>
55 <thead>
56 <tr>
57 <th scope="col" data-tablesaw-priority="persist">Name</th>
58 <th scope="col">Rank</th>
59 <th scope="col">Money</th>
60 <th scope="col">Money</th>
61 <th scope="col">A (1&ndash;5)</th>
62 <th scope="col">B (1&ndash;5)</th>
63 <th scope="col">C (%)</th>
64 <th scope="col">D (1&ndash;5)</th>
65 <th scope="col">E (1&ndash;5)</th>
66 <th scope="col">F (1&ndash;5)</th>
67 </tr>
68 </thead>
69 <tbody>
70 <tr>
71 <td class="ranked-name">
72 <a href="#">
73 Amanda
74 </a>
75 </td>
76 <td class="current-ranking">1</td>
77 <td>19.45</td>
78 <td>18.72</td>
79 <td>5</td>
80 <td>5</td>
81 <td>98</td>
82 <td>5</td>
83 <td>4</td>
84 <td>3</td>
85 </tr>
86 <tr>
87 <td class="ranked-name">
88 <a href="#">
89 Dave
90 </a>
91 </td>
92 <td>2</td>
93 <td>36.32</td>
94 <td>20.52</td>
95 <td>4</td>
96 <td>3</td>
97 <td>87</td>
98 <td>5</td>
99 <td>4</td>
100 <td>3</td>
101 </tr>
102 <tr>
103 <td class="ranked-name">
104 <a href="#">
105 Kristen
106 </a>
107 </td>
108 <td>3</td>
109 <td>35.23</td>
110 <td>21.36</td>
111 <td>2</td>
112 <td>5</td>
113 <td>89</td>
114 <td>5</td>
115 <td>4</td>
116 <td>3</td>
117 </tr>
118 <tr>
119 <td class="ranked-name">
120 <a href="#">
121 Kenny
122 </a>
123 </td>
124 <td>4</td>
125 <td>34.65</td>
126 <td>27.15</td>
127 <td>4</td>
128 <td>4</td>
129 <td>98</td>
130 <td>5</td>
131 <td>4</td>
132 <td>3</td>
133 </tr>
134 <tr>
135 <td class="ranked-name">
136 <a href="#">
137 Kenny
138 </a>
139 </td>
140 <td>4</td>
141 <td>34.65</td>
142 <td>27.15</td>
143 <td>4</td>
144 <td>4</td>
145 <td>98</td>
146 <td>5</td>
147 <td>4</td>
148 <td>3</td>
149 </tr>
150 <tr>
151 <td class="ranked-name">
152 <a href="#">
153 Kenny
154 </a>
155 </td>
156 <td>4</td>
157 <td>34.65</td>
158 <td>27.15</td>
159 <td>4</td>
160 <td>4</td>
161 <td>98</td>
162 <td>5</td>
163 <td>4</td>
164 <td>3</td>
165 </tr>
166 <tr>
167 <td class="ranked-name">
168 <a href="#">
169 Kenny
170 </a>
171 </td>
172 <td>4</td>
173 <td>34.65</td>
174 <td>27.15</td>
175 <td>4</td>
176 <td>4</td>
177 <td>98</td>
178 <td>5</td>
179 <td>4</td>
180 <td>3</td>
181 </tr>
182 <tr>
183 <td class="ranked-name">
184 <a href="#">
185 Kenny
186 </a>
187 </td>
188 <td>4</td>
189 <td>34.65</td>
190 <td>27.15</td>
191 <td>4</td>
192 <td>4</td>
193 <td>98</td>
194 <td>5</td>
195 <td>4</td>
196 <td>3</td>
197 </tr>
198 <tr>
199 <td class="ranked-name">
200 <a href="#">
201 Kenny
202 </a>
203 </td>
204 <td>4</td>
205 <td>34.65</td>
206 <td>27.15</td>
207 <td>4</td>
208 <td>4</td>
209 <td>98</td>
210 <td>5</td>
211 <td>4</td>
212 <td>3</td>
213 </tr>
214 <tr>
215 <td class="ranked-name">
216 <a href="#">
217 Kenny
218 </a>
219 </td>
220 <td>4</td>
221 <td>34.65</td>
222 <td>27.15</td>
223 <td>4</td>
224 <td>4</td>
225 <td>98</td>
226 <td>5</td>
227 <td>4</td>
228 <td>3</td>
229 </tr>
230 <tr>
231 <td class="ranked-name">
232 <a href="#">
233 Kenny
234 </a>
235 </td>
236 <td>4</td>
237 <td>34.65</td>
238 <td>27.15</td>
239 <td>4</td>
240 <td>4</td>
241 <td>98</td>
242 <td>5</td>
243 <td>4</td>
244 <td>3</td>
245 </tr>
246 </tbody>
247 </table>
248 </div>
249 </body>
250 </html>