You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: README.md
+44-23
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ A fast-render, lightweight plugin to turn tables responsive the right way.
6
6
7
7
## Why should you use it?
8
8
9
-
*Has 10 customizable usefull properties.
9
+
*Highly customizable page-breaks.
10
10
* Won't break your table's primordial design, it uses css only to re-structure table for mobile.
11
11
* Designed to attend fat-fingers concept to prevent missclicking, you can tap anywhere in the row and it will trigger the collapser.
12
12
* You can maintain all previous functions working anywhere inside the elements of the table. (ie: a dropdown in table headers)
@@ -43,11 +43,10 @@ First, add <b>shrink</b> class to the table you want to be shrinked
43
43
```html
44
44
<tableclass="shrink">
45
45
```
46
-
Next, instantiate the plugin right after the DOM finished rendering.
46
+
Next, start the plugin right after the DOM finished rendering.
47
47
```javascript
48
48
options = {
49
49
useZebra:false// i don't like zebras
50
-
useObserver:false// turned off observer because i really don't like zebras
51
50
}
52
51
53
52
$("table.shrink").tableShrinker(options)
@@ -89,22 +88,17 @@ Below there's the options explanation and some hints of use.
89
88
#### useZebra
90
89
###### default: true
91
90
Table rows inside wrapper became striped.
92
-
#### useObserver
93
-
###### default: true
94
-
update Zebra whenever a new cell becomes visible in the wrapper.
95
-
<br/>
96
-
not supported for older browsers check compatibility [here](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Browser_compatibility).
97
91
#### useTransitions
98
92
###### default: true
99
93
Animate when collapsing the wrapper.
100
94
#### transitionSpeed
101
95
###### default: 300
102
96
name says it all.
103
97
#### ignoreWhenHit
104
-
###### default: 'button, a, .btn'
105
-
If you have a share button on each row you might want to ignore it.
98
+
###### default: 'input, button, a, .btn'
99
+
If you have a customized radiobutton or selectbox on each row you might want to ignore them too. you can add then to this selector.
106
100
<br>
107
-
so if any tap/click event hit one of these elements it's event propagation is stoped, this way buttons can keep their functionality inside the table.
101
+
so if any tap/click event hit any of these elements it's event propagation is stoped, and they keep their functionality inside the shrinked table container.
108
102
#### showToggle
109
103
###### default: true
110
104
You can disable the toggle icon and still show/hide the shrinked content by hiting the anywhere in the row (except for the ignoreWhenHit elements).
@@ -123,17 +117,22 @@ If true, forces all shrinked elements to be visible on window first load, else i
123
117
124
118
125
119
126
-
### Hints
127
-
#### Load Collapsed
128
-
129
-
To start with all rows collapsed is to add "load-collapsed" class to the table.
130
-
120
+
### Quick Tips
121
+
#### Classname Property Controls
122
+
You can add "shrink-[property-name]" classes to each individual table to control their behaviour separately, this way you can call the plugin constructor just once. just remember to not override their defaults on options array.
123
+
<br>
124
+
- shrink-use-zebra
125
+
- shrink-show-toggle-all
126
+
- shrink-show-toggle
127
+
- shrink-load-collapsed
128
+
For example:
131
129
```html
132
-
<tableclass="shrink load-collapsed">
130
+
<tableclass="shrink shrink-load-collapsed">
133
131
(...)
134
132
</table>
135
133
```
136
134
135
+
137
136
#### Instant Load
138
137
The table can be instantly rendered at the first graphic engine loop of the browser by adding the same <b>shrink-XX</b> and <b>shrinkable</b> classes that you used on the table headers to every table cell
139
138
<br>
@@ -166,7 +165,7 @@ There's no impact in performance speed, the only downside of this is that if you
166
165
167
166
168
167
#### Larger than desktops
169
-
If you want to show more data in the same table but even desktops width can't handle, just keep adding columns with <br>shrink-xl</br>
168
+
If you want to show more data in the same table but even desktops width can't handle, just keep adding columns with <b>shrink-xl</b>
170
169
171
170
```html
172
171
(...)
@@ -178,6 +177,28 @@ If you want to show more data in the same table but even desktops width can't ha
178
177
<br>
179
178
180
179
180
+
#### Blank Header
181
+
You can use a blank header to add a full-width column, perphaps you want to shrink just a single button.. in this case:
0 commit comments