-
Notifications
You must be signed in to change notification settings - Fork 1
/
infiniteScroll.html
255 lines (219 loc) · 13.9 KB
/
infiniteScroll.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Griddle - React Grid Component</title>
<meta name="description" content="Griddle - React Grid component. ">
<meta name="author" content="Ryan Lanciaux">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href='//fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/skeleton.css">
<link rel="stylesheet" href="styles/site.css">
<link rel="stylesheet" href="styles/chartist.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png" />
<!-- Scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.2/JSXTransformer.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="scripts/Griddle.js"></script>
<script src="scripts/GriddleWithCallback.js"></script>
<script src="scripts/fakeData.js"></script>
<script src="scripts/ChartistGraph.js"></script>
</head>
<body id="docs-page">
<header class="background-primary-dark border-bottom border-secondary">
<div class="container">
<div class="row">
<div class="eight columns">
<a href="index.html"><img src="images/griddle.png" alt="Griddle"/></a>
</div>
<div class="four columns right">
<iframe src="http://ghbtns.com/github-btn.html?user=GriddleGriddle&repo=Griddle&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="90" height="20"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=GriddleGriddle&repo=Griddle&type=fork&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="90" height="20"></iframe>
<br />
<a href="quickstart.html" class="button border-light text-light big">Documentation</a>
</div>
</div>
</div>
</header>
<div class="container page-content">
<div class="row">
<div class="two columns">
<nav class="side">
<ul>
<li><a href="quickstart.html">Quickstart</a></li>
<li><a href="styling.html">Styling</a></li>
<li><a href="subgrids.html">Subgrids</a></li>
<li><a href="customization.html">Customization</a></li>
<li><a href="externalData.html">External Data</a></li>
<li><a href="infiniteScroll.html">Infinite Scrolling</a></li>
<li><a href="properties.html">Properties</a></li>
<li class="border-top border-lighter-grey"><a href="https://reactjsnews.com/isomorphic-javascript-with-react-node/">Isomorphic Rendering <small>(at ReactJS News)</small></a>
</ul>
</nav>
</div>
<div class="ten columns docs">
<h2 id="infinite-scroll">Infinite Scroll</h2>
<p>If you're looking to display multiple pages of data without the need to click 'Next' or manually select a page, use Griddle's infinite scrolling feature! One will need to set the 'enableInfiniteScroll' property to true in Griddle, as well as include the maximum height of the scrollable area (in pixels).</p>
<dl>
<dt>enableInfiniteScroll</dt>
<dd><strong>bool</strong> - Whether or not paging is controlled by scroll position, rather than navigation. Default: false</dd>
</dl>
<dl>
<dt>bodyHeight</dt>
<dd><strong>int</strong> - The height, in pixels, that the scrollable area should be displayed in. Default: null</dd>
</dl>
<dl>
<dt>useFixedHeader (Optional)</dt>
<dd><strong>bool</strong> - Whether or not to have fixed column headers when scrolling, which is accomplished by having Griddle represented in two tables (with the headers in the first). As Griddle doesn't make many assumptions about much styling, this will ensure that the table headers will be displayed above the scrollable table body. Default: false</dd>
</dl>
<dl>
<dt>infiniteScrollLoadTreshold (Optional)</dt>
<dd><strong>int</strong> - The height, in pixels, used to trigger paging. Changing this property should be a pretty rare occurrence. Default: 50</dd>
</dl>
<h5 id="example-">Example:</h5>
<pre><code><span class="tag"><<span class="title">Griddle</span> <span class="attribute">results</span>=<span class="value">{fakeData}</span> <span class="attribute">columnMetadata</span>=<span class="value">{columnMeta}</span> <span class="attribute">resultsPerPage</span>=<span class="value">{5}</span> <span class="attribute">enableInfiniteScroll</span>=<span class="value">{true}</span> <span class="attribute">bodyHeight</span>=<span class="value">{400}</span>/></span></code></pre>
<div id="griddle-infinite-scroll"></div>
<script type="text/jsx">
ReactDOM.render(<Griddle results={fakeData} columnMetadata={columnMeta} rowMetadata={rowMeta} resultsPerPage={5} enableInfiniteScroll={true} bodyHeight={400}/>, document.getElementById('griddle-infinite-scroll'));
</script>
<h3 id="fixed-header">Fixed Header</h3>
<p>Generally, when using infinite scroll on a table, fixed headers are pretty desirable. To accomplish this, the 'useFixedHeader' property needs to be set to 'true'.</p>
<p>Griddle handles fixed headers in an Infinite Scroll situation by utilizing two separate tables, one containing the '<thead>' and the other containing the '<tbody>' as well as the capability to scroll. As we mention above, Griddle doesn't like to make many assumptions about much styling, so this is our surefire way to make sure that the headers stay put.</p>
<h5 id="example-">Example:</h5>
<pre><code><span class="tag"><<span class="title">Griddle</span> <span class="attribute">results</span>=<span class="value">{fakeData}</span> <span class="attribute">columnMetadata</span>=<span class="value">{columnMeta}</span> <span class="attribute">resultsPerPage</span>=<span class="value">{5}</span> <span class="attribute">enableInfiniteScroll</span>=<span class="value">{true}</span> <span class="attribute">useFixedHeader</span>=<span class="value">{true}</span> <span class="attribute">bodyHeight</span>=<span class="value">{400}</span>/></span></code></pre>
<div id="griddle-infinite-fixed-header"></div>
<script type="text/jsx">
ReactDOM.render(<Griddle results={fakeData} columnMetadata={columnMeta} rowMetadata={rowMeta} resultsPerPage={5} enableInfiniteScroll={true} useFixedHeader={true} bodyHeight={400}/>, document.getElementById('griddle-infinite-fixed-header'));
</script>
<h3 id="external-results">External Results</h3>
<p>Feel free to scroll through your external data, too! When data is loading, the loading component will be appended to the end of the results.</p>
<h5 id="example-">Example:</h5>
<pre><code><span class="tag"><<span class="title">GriddleWithCallback</span> <span class="attribute">showFilter</span>=<span class="value">{true}</span> <span class="attribute">getExternalResults</span>=<span class="value">{fakeDataMethod}</span>
<span class="attribute">loadingComponent</span>=<span class="value">{Loading}</span> <span class="attribute">enableInfiniteScroll</span>=<span class="value">{true}</span> <span class="attribute">useFixedHeader</span>=<span class="value">{true}</span> <span class="attribute">bodyHeight</span>=<span class="value">{400}</span>/></span></code></pre>
<div id="griddle-external"></div>
<script type="text/jsx">
var externalData = fakeData.slice(0, 53);
var setDefault = function(original, value){
return typeof original === 'undefined' ? value : original;
}
//this is a really ugly method for simulating a lot of the stuff that should be occuring on an API call or something of that nature
var fakeDataMethod = function(filterString, sortColumn, sortAscending, page, pageSize, callback) {
//need some ECMA6
filterString = setDefault(filterString, null);
sortColumn = setDefault(sortColumn, null);
sortAscending = setDefault(sortAscending, null);
page = setDefault(page, 0);
pageSize = setDefault(pageSize, 5);
callback = setDefault(callback, null);
var initialIndex = page * pageSize;
var endIndex = initialIndex + pageSize;
setTimeout(function() {
var results = [],
sortedResults = null,
totalResults = 0;
//sort the results if sortColumnSet
if(sortColumn&&sortColumn !== ""){
sortedResults = _.sortBy(fakeData, function(item){
return item[sortColumn];
});
if(sortAscending === false){
sortedResults.reverse();
}
}
//filter the results if it's there
if (filterString&&filterString.length > 0) {
var filteredResults = _.filter(sortedResults||fakeData,
function(item) {
var arr = _.values(item);
for(var i = 0; i < arr.length; i++){
if ((arr[i]||"").toString().toLowerCase().indexOf(filterString.toLowerCase()) >= 0){
return true;
}
}
return false;
});
results = filteredResults.slice(initialIndex, endIndex);
totalResults = filteredResults.length;
} else {
results = (sortedResults||fakeData).slice(initialIndex, endIndex);
totalResults = (sortedResults||fakeData).length;
}
callback({
results: results,
totalResults: totalResults,
pageSize: pageSize
});
}, 1000);
};
var Loading = React.createClass({
getDefaultProps: function(){
return {
loadingText: "Loading"
}
},
render: function(){
var loadingStyle = {
textAlign: "center",
paddingBottom: "40px"
};
return <div className="loading container" style={loadingStyle}>{this.props.loadingText}</div>;
}
});
ReactDOM.render(<GriddleWithCallback getExternalResults={fakeDataMethod} loadingComponent={Loading} enableInfiniteScroll={true} useFixedHeader={true} bodyHeight={400}/>, document.getElementById("griddle-external"));
</script>
<h4 id="cautions-">Cautions:</h4>
<p>When using infinite scroll on a table, re-renders of the Griddle component will cause the table to recreate itself - setting the scroll position back to 0, making the table appear to jump back to the top. To prevent this, specify the <code>key</code> attribute on <code>rowMetadata</code>. For more information please see the <a href="https://facebook.github.io/react/docs/reconciliation.html">React page on reconciliation</a>.</p>
<pre><code><span class="keyword">var</span> rowMetadata = {
<span class="string">"key"</span>: <span class="string">"nameOfIndexInMyResultSet"</span>
}
};
<span class="keyword">return</span> (
<span class="xml"><span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"griddle-container"</span>></span>
<span class="tag"><<span class="title">Griddle</span> <span class="attribute">results</span>=<span class="value">{this.state.rows}</span> <span class="attribute">enableInfiniteScroll</span>=<span class="value">{true}</span> <span class="attribute">rowMetadata</span>=<span class="value">{rowMetadata}</span> /></span>
<span class="tag"></<span class="title">div</span>></span>
)</span></code></pre>
</div>
</div>
</div>
<div class="order-primary content-section background-darker-grey text-light-grey" id="about">
<div class="container">
<div class="row">
<div class="ten columns offset-by-two">
<p>Griddle is a project maintained by <a href="http://twitter.com/ryanlanciaux">Ryan Lanciaux</a> and <a href="http://www.twitter.com/joellanciaux">Joel Lanciaux</a> in collaboration with all of <a href="https://github.com/GriddleGriddle/Griddle/graphs/contributors">the awesome contributors!</a></p>
<small>
© 2015 <a href="http://www.twitter.com/ryanlanciaux">Ryan Lanciaux</a> | <a href="https://www.github.com/DynamicTyped">DynamicTyped</a>
</small>
<br />
<small>
Example data has been generated with <a href="http://json-generator.com">json-generator.com</a>. Any data that resembles real people, places, companies, etc. is coincidence.
</small>
</div>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-58716212-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>