-
Notifications
You must be signed in to change notification settings - Fork 1
/
subgrids.html
146 lines (135 loc) · 7.5 KB
/
subgrids.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
<!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="subgrids">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>
<dl>
<dt>childrenColumnName (optional)</dt>
<dd><strong>string</strong> - The name of the column that contains subgrid data.</dd>
</dl>
<h5 id="example-">Example:</h5>
<p>Assume our data has a child property similar to the following:</p>
<pre><code>var data = [
{
<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="string">"children"</span>: [
{
<span class="string">"id"</span>: <span class="number">273</span>,
<span class="string">"name"</span>: <span class="string">"Hull Wade"</span>,
<span class="string">"city"</span>: <span class="string">"Monument"</span>,
<span class="string">"state"</span>: <span class="string">"Nebraska"</span>,
<span class="string">"country"</span>: <span class="string">"Cyprus"</span>,
<span class="string">"company"</span>: <span class="string">"Indexia"</span>,
<span class="string">"favoriteNumber"</span>: <span class="number">10</span>
<span class="keyword">...</span>
}]
},
<span class="keyword">...</span>
]</code></pre>
<p>Rendering a Griddle component with this data will show a subgrid without any configuration since the default child property name is <strong>children</strong>.</p>
<div id="griddle-subgrid"></div>
<script type="text/jsx">
ReactDOM.render(<Griddle results={fakeSubgridData} columns={["name", "city", "state", "country", "company"]}/>, document.getElementById("griddle-subgrid"));
</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>