-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathquickstart.html
159 lines (146 loc) · 10.8 KB
/
quickstart.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
<!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="quickstart">Quickstart</h2>
<h4 id="from-npm">From NPM</h4>
<p>Griddle is in the npm repository as <a href="https://www.npmjs.org/package/griddle-react">griddle-react</a>. Simply install React and Griddle from npm:</p>
<pre><code><span class="comment">npm</span> <span class="comment">install</span> <span class="comment">react</span> <span class="literal">-</span><span class="literal">-</span><span class="comment">save</span>
<span class="comment">npm</span> <span class="comment">install</span> <span class="comment">griddle</span>-<span class="comment">react@version0</span> <span class="literal">-</span><span class="literal">-</span><span class="comment">save</code></pre>
<p>From there, require React and Griddle in your modules and you should be all set!</p>
<pre><code><span class="keyword">var</span> React = <span class="keyword">require</span>(<span class="string">'react'</span>);
<span class="keyword">var</span> Griddle = <span class="keyword">require</span>(<span class="string">'griddle-react'</span>);</code></pre>
<p>Please take a look at a basic <a href="https://github.com/ryanlanciaux/griddle-gulp-test">gulp example</a> or a <a href="https://github.com/ryanlanciaux/griddle-webpack-test">webpack example</a> for more information.</p>
<h4 id="from-source">From Source</h4>
<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 Underscore and React. Include Griddle and the stylesheet before your React Code.</p>
<pre><code><span class="tag"><<span class="title">link</span> <span class="attribute">href</span>=<span class="value">"css/griddle.css"</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span> /></span>
...
<span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span>
<span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//fb.me/react-0.12.0.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span>
<span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//fb.me/JSXTransformer-0.12.0.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span>
<span class="tag"><<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">"scripts/griddle.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></pre>
<p><hr/>
Define an array of JSON objects -- for our examples we have something that resembles the following:</p>
<pre><code>var fakeData = [
{
<span class="string">"id"</span>: <span class="number">0</span>,
<span class="string">"name"</span>: <span class="string">"Mayer Leonard"</span>,
<span class="string">"city"</span>: <span class="string">"Kapowsin"</span>,
<span class="string">"state"</span>: <span class="string">"Hawaii"</span>,
<span class="string">"country"</span>: <span class="string">"United Kingdom"</span>,
<span class="string">"company"</span>: <span class="string">"Ovolo"</span>,
<span class="string">"favoriteNumber"</span>: <span class="number">7</span>
},
<span class="keyword">...</span>
];</code></pre>
<p>From there, render a Griddle component through React.renderComponent or in the Render method of another component. </p>
<pre><code><span class="tag"><<span class="title">Griddle</span> <span class="attribute">results</span>=<span class="value">{fakeData}</span> /></span></code></pre>
<div id="griddle-basic"></div>
<script type="text/jsx">
ReactDOM.render(<Griddle results={fakeData} />, document.getElementById("griddle-basic"));
</script>
<p><a name="advanced"></a></p>
<h2 id="more-advanced-example">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 showProperties and showFilters properties on the Griddle component definition. Check out the full list of properties available to Griddle in the <a href="properties.html">prop documentation</a>.</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><span class="tag"><<span class="title">Griddle</span> <span class="attribute">results</span>=<span class="value">{fakeData}</span> <span class="attribute">tableClassName</span>=<span class="value">"table"</span> <span class="attribute">showFilter</span>=<span class="value">{true}</span>
<span class="attribute">showSettings</span>=<span class="value">{true}</span> <span class="attribute">columns</span>=<span class="value">{["name",</span> "<span class="attribute">city</span>", "<span class="attribute">state</span>", "<span class="attribute">country</span>"]}/></span></code></pre>
<div id="griddle-advanced"></div>
<script type="text/jsx">
ReactDOM.render(<Griddle results={fakeData} tableClassName="table" showFilter={true} showSettings={true} columns={["name", "city", "state", "country"]}/>, document.getElementById("griddle-advanced"));
</script>
</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>