forked from GriddleGriddle/Griddle
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
293 lines (266 loc) · 13.9 KB
/
index.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
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
<html>
<head>
<title>Griddle - your data in short-order</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/griddle.css" rel="stylesheet" />
<link href="css/example.theme.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="http://fb.me/react-0.10.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="scripts/fakeData.js"></script>
<script type="text/javascript" src="build/griddle.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-sm-2 center">
<img src="images/griddle.png" />
<small>your data in short-order</small>
</div>
<div class="col-sm-6 col-sm-offset-4">
<div class="btn-group">
<a href="#base" class="btn btn-default">Getting Started</a>
<a href="#advanced" class="btn btn-default">Advanced Example</a>
<a href="#properties" class="btn btn-default">Properties</a>
</div>
</div>
</div>
</div>
<a href="https://github.com/dynamictyped/griddle"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>
</header>
<section id="start">
<div class="container">
<div class="row">
<div class="col-md-12 center">
<h1>Griddle is a simple grid component for use with <a href="http://facebook.github.io/react/">React.js</a>.</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="examplegrid"></div>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-4">
<h3>Configurable</h3>
<p>Beyond using Bootstrap 3, Griddle makes few assumptions about how your grid should be styled. Griddle grids render as simple tables that you can apply your site's styling to.</p>
</div>
<div class="col-md-4">
<h3>Functional</h3>
<p>Out of the box, Griddle has sorting, filtering, paging and some user customization such as column selection and results per page. Additionally, Griddle supports simple sub-grids and even more complex functionality is on the roadmap.</p>
</div>
<div class="col-md-4">
<h3>Fast</h3>
<p>Griddle is powered by React and its virtual DOM. Only the current page of the grid is rendered at any given time. Whether you have several or hundreds of records, Griddle should render your data quickly.</p><br />
<p class="center"><a href="http://www.github.com/dynamictyped/griddle" class="btn btn-primary view">View project on GitHub</a></p>
</div>
</div>
</div>
</section>
<section id="example1">
<a name="base"></a>
<div class="container">
<h2>Getting Started</h2>
<p>At the most basic level, using Griddle is as simple as wiring up an array of JSON objects as a property to the component. First off, include <a href="http://www.getbootstrap.com">Bootstrap 3</a>, <a href="http://underscorejs.org/">Underscore</a> and <a href="http://facebook.github.io/react/">React</a>. Include <a href="http://www.github.com/dynamictyped/griddle">Griddle</a> and the stylesheet before your React Code.</p>
<pre><code><link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/griddle.css" rel="stylesheet" />
...
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="http://fb.me/react-0.10.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script type="text/javascript" src="scripts/griddle.js"></script></code></pre>
<hr />
<p>
Define an array of JSON objects -- for our examples we have something that resembles the following:
</p>
<pre><code>var fakeData = [
{
"id": 0,
"name": "Mayer Leonard",
"city": "Kapowsin",
"state": "Hawaii",
"country": "United Kingdom",
"company": "Ovolo",
"favoriteNumber": 7
},
...
];</code></pre>
<hr />
<p>
From there, render a Griddle component through React.renderComponent or in the Render method of another component.
</p>
<pre><code><Griddle results={fakeData} tableClassName="table"/></code></pre>
<div id="grid"></div>
</div>
</section>
<section id="example2">
<a name="advanced"></a>
<div class="container">
<h2>More Advanced Example</h2>
<p>For many applications, simple paging and sorting is not enough. Griddle comes equipped with filtering, initial columns and additional grid settings out of the box. To use these features, simply define the <span class="highlight">showProperties</span> and <span class="highlight">showFilters</span> properties on the Griddle component definition. <a href="#properties">Check out the full list of properties</a> below.</p>
<p>
Using the same data as in the previous example, we can add filtering, grid settings and default columns by defining our component as follows:
</p>
<pre><code><Griddle results={fakeData} tableClassName="table" showFilter={true} showSettings={true} columns={["name", "city", "state", "country"]}/></code></pre>
<hr />
<div id="moregrid"></div>
</div>
</section>
<section id="example3">
<div class="container">
<h2>Subgrids</h2>
<p>Griddle also supports subgrids with little configuration. Simply add a property named "children" (or set the child column name property when defining the component) to any object in your list of data. Right now subgrids only work when the parent and child have the same columns, however, more advanced subgrid functionality is planned.</p>
<hr />
<div id="subgrid"></div>
</div>
</section>
<section id="example4">
<div class="container">
<h2>External Data</h2>
<p>Don't want to load all of your data at once? Set the 'getExternalData' property to point to a method that accepts the filters and a callback as parameters and returns a list of results, along with the total number of results.:</p>
<pre><code>var fakeDataMethod = function(filterString, sortColumn, sortAscending, page, pageSize, callback) {
// Load results from your API here.
callback(function() {
results: [],
totalResults: 300
});
}</code></pre>
<p>Then initialize your component with the following:</p>
<pre><code><Griddle getExternalResults={fakeDataMethod} tableClassName="table"/></code></pre>
<hr />
<div id="externaldata"></div>
</div>
</section>
<section id="example5">
<div class="container">
<h2>Custom Format</h2>
<p>Decide you don't want your grid to look like a grid? We've got you covered. Just set the property 'useCustomFormat' to true and pass in another component as property named 'customFormat'. The component should look a little like this: </p>
<pre><code>var OtherComponent = React.createClass({
getDefaultProps: function(){
return { "data": {} };
},
render: function(){
return (<div>{this.props.data.name}</div>);
}
});
}</code></pre>
<p><small>Please note: the data property is what Griddle will pass the row data in as so be sure to use that on your component.</small></p>
<p>Then initialize your component as follows:</p>
<pre><code><Griddle results={fakeData} tableClassName="table" useCustomFormat="true" customFormat={OtherComponent} /></code></pre>
<hr />
<div id="customdata"></div>
</div>
</section>
<section id="example6">
<div class="container">
<h2>No Data</h2>
<p>Griddle will, by default, show a message if there is no data in the result set. There are two ways that it can be customized though. You can pass in your own custom message, called noDataMessage.</p>
<pre><code><Griddle results={fakeData} noDataMessage={"No data could be found."} tableClassName="table"/></code></pre>
<div class="row">
<div class="col-md-12">
<div id="noDataMessage"></div>
</div>
</div>
<hr/>
<p>You can also create your own custom component to be rendered when there are no results. Pass it into the customNoData property. The component should look something like this:</p>
<pre><code>var CustomNoDataComponent = React.createClass({
render: function(){
return (This is a custom component showing that there is no data to be displayed.);
}
});
}</code></pre>
<p>Then modify your Griddle statement to pass in the new component.</p>
<pre><code><Griddle results={fakeData} customNoData={CustomNoDataComponent} tableClassName="table"/></code></pre>
<div class="row">
<div class="col-md-12">
<div id="customNoDataComponent"></div>
</div>
</div>
</div>
</section>
<section id="properties">
<div class="container">
<h2>Property Reference</h2>
Griddle has a number of default properties that can be changed to modify the behavior / style of the component.
<dl>
<dt>columns</dt>
<dd>The columns that should be displayed by default. The other columns can be chosen via the grid settings. If no columns are set, Griddle will display all columns by default</dd>
<dt>results</dt>
<dd>The data that should be displayed within the grid. This data needs to be an array of JSON objects.</dd>
<dt>resultsPerPage</dt>
<dd>The number of results that should be displayed on each page. If 'getExternalResults' is defined, this value will be what's used as the 'pageSize' argument.</dd>
<dt>getExternalResults</dt>
<dd>
<p>A function that obtains data to display in the grid and returns the results, along with the max total number of results.</p>
<p>The method's requires the following parameters :</p>
<dl>
<dt>filterString</dt>
<dd>The string that the user is filtering by.</dd>
<dt>sortColumn</dt>
<dd>The column that is currently being sorted.</dd>
<dt>sortAscending</dt>
<dd>Whether or not results should be sorted in ascending order.</dd>
<dt>page</dt>
<dd>What page is being displayed.</dd>
<dt>pageSize</dt>
<dd>How many results should be included per page.</dd>
<dt>callback</dt>
<dd>The function that the results will be passed into.</dd>
</dl>
<p>An object passed into the callback must have the following properties :</p>
<dl>
<dt>results</dt>
<dd>The results to display.</dd>
<dt>totalResults</dt>
<dd>The total number of items.</dd>
</dl>
</dd>
<dt>initialSort</dt>
<dd>The column that the grid should be sorted on initially. By default, this is an empty string so the data will be sorted as it's received</dd>
<dt>gridClassName</dt>
<dd>The CSS class name to apply to the griddle elements. By default this is an empty string.</dd>
<dt>tableClassName</dt>
<dd>The CSS class name to apply to the table elements. By default this is an empty string -- in the exmaple it is set to "table" so the Bootstrap 3 table class is used.</dd>
<dt>customFormatClassName</dt>
<dd>The CSS class name to apply to the custom format wrapper. By default this is an empty string.</dd>
<dt>settingsText</dt>
<dd>The text value to use for toggling the settings area. This is "Settings" by default.</dd>
<dt>filterPlaceholderText</dt>
<dd>The text to be displayed as a placeholder in the filter text box. This is "Filter Results" by default.</dd>
<dt>nextText</dt>
<dd>The text on the button that moves to the next page of results. This is "Next" by default.</dd>
<dt>previousText</dt>
<dd>The text on the button that moves to the previous page of results. This is "Previous" by default.</dd>
<dt>maxRowsText</dt>
<dd>The text that appears in the Settings / Column chooser next to the select box for page size</dd>
<dt>childrenColumnName</dt>
<dd>The name of the column that contains a list of child items for a given object. By default this is "children"</dd>
<dt>metadataColumns</dt>
<dd>List of columns that should not be rendered. By default, this is an empty array.</dd>
<dt>showFilter</dt>
<dd>Whether or not to display the "Filter" section of Griddle. By default, this is set to "false".</dd>
<dt>showSettings</dt>
<dd>Whether or not to display the "Settings" section of Griddle. By default, this is set to "false".</dd>
</dl>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-3">
<p>© 2014 <a href="http://www.ryanlanciaux.com">Ryan Lanciaux</a> | <a href="http://www.github.com/dynamictyped">DynamicTyped</a></p>
<p>Logo by <a href="http://www.behance.net/ryanstraube">Ryan Straube</a></p>
<p><a href="https://raw.githubusercontent.com/DynamicTyped/Griddle/master/LICENSE">License / Disclaimer</a></p>
</div>
<div class="col-md-4 col-md-offset-5">
<p>Example data has been generated with <a href="http://www.json-generator.com/">json-generator.com</a>. Any data that resembles real people, places, companies, etc. is coincidence. </p>
</div>
</div>
</div>
</footer>
<script type="text/jsx" src="scripts/testComponent.js"></script>
</body>
</html>