-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathstyling.html
220 lines (191 loc) · 11.8 KB
/
styling.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
<!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="styling">Styling</h2>
<p>Third-party components should work with your styles rather than force you into specific styling structure or framework. Griddle comes with default inline styling, however, it has been designed with the expectation that the inline styling will be augmented or replaced in most circumstances.</p>
<h3 id="overriding-griddle-s-styles">Overriding Griddle's Styles</h3>
<p>Don't like Griddle's default styles? No problem -- turn them off entirely by setting the <code>useGriddleStyles</code> property to false. Griddle will render as a plain table (unless infinite scrolling is turned on) that you can apply your styles to. The following is Griddle rendered using <a href="http://getskeleton.com/">Skeleton framework</a>'s default table styling.</p>
<div id="griddle-nostyle"></div>
<script type="text/jsx">
ReactDOM.render(<Griddle results={fakeData} columns={["name", "city", "state", "country"]} useGriddleStyles={false}/>, document.getElementById("griddle-nostyle"));
</script>
<p>We've <a href="styles/griddle.css">included a stylesheet</a> that contains the default, inline styling that can be used as a starting point for creating custom Griddle styles.</p>
<hr />
<h3 id="icons">Icons</h3>
<p>Out of the box, Griddle uses standard ascii characters for denoting sort direction, expanding / collapsing, etc. In many cases this is not ideal and better options exist. There are two ways to change the icons used in Griddle -- styling the CSS classes or supplying a configurable, custom component with the desired styling.</p>
<p>CSS classes:</p>
<dl>
<dt>sortAscendingClassName</dt>
<dd><strong>string</strong> - The class that is applied to a column heading when the column is sorted in ascending order. Default: sort-ascending</dd>
</dl>
<dl>
<dt>sortDescendingClassName</dt>
<dd><strong>string</strong> - The class that is applied to a column heading when the column is sorted in descending order. Default: sort-descending</dd>
</dl>
<dl>
<dt>parentRowCollapsedClassName</dt>
<dd><strong>string</strong> - The class that is applied to the first column of a subgrid row when the row has child data that is not expanded. Default: parent-row</dd>
</dl>
<dl>
<dt>parentRowExpandedClassName</dt>
<dd><strong>string</strong> - The class that is applied to the first column of a subgrid row when the row has child data and the data is expanded. Default: parent-row expanded</dd>
</dl>
<dl>
<dt>settingsToggleClassName</dt>
<dd><strong>string</strong> - The class applied to the settings toggle. Default: settings</dd>
</dl>
<dl>
<dt>nextClassName</dt>
<dd><strong>string</strong> - The class applied to the next button in the pagination section. Default: griddle-next</dd>
</dl>
<dl>
<dt>previousClassName</dt>
<dd><strong>string</strong> - The class applied to the previous button in the pagination section. Default: griddle-previous</dd>
</dl>
<p>Components:</p>
<dl>
<dt>sortDefaultComponent</dt>
<dd><strong>object</strong> - The component or characters that are displayed in a column heading when the column data is not sorted in any order. Default: null</dd>
</dl>
<dl>
<dt>sortAscendingComponent</dt>
<dd><strong>object</strong> - The component or characters that are displayed in a column heading when the column data is sorted in ascending order. Default: ▲</dd>
</dl>
<dl>
<dt>sortDescendingComponent</dt>
<dd><strong>object</strong> - The component or characters that are displayed in a column heading when the column data is sorted in descending order. Default: ▼</dd>
</dl>
<dl>
<dt>parentRowCollapsedComponent</dt>
<dd><strong>object</strong> - The component or characters that are displayed in the first column of a subgrid row when the row has child data that is not expanded. Default: ▶</dd>
</dl>
<dl>
<dt>parentRowExpandedComponent</dt>
<dd><strong>object</strong> - The component or characters that are displayed in the first column of a subgrid row when the row has child data that is expanded. Default: ▼</dd>
</dl>
<dl>
<dt>settingsIconComponent</dt>
<dd><strong>object</strong> - The component or characters that are displayed next to the settings label. Default: null
</dl>
<dl>
<dt>nextIconComponent</dt>
<dd><strong>object</strong> - The component or characters that are displayed next to the next page text. Default: null</dd>
</dl>
<dl>
<dt>previousIconComponent</dt>
<dd><strong>object</strong> - The component or characters that are displayed next to the previous page text. Default: null</dd>
</dl>
<h5 id="example-">Example:</h5>
<p>We are going to change the sort characters to icons from the <a href="http://fortawesome.github.io/Font-Awesome/">Font-Awesome</a> library.</p>
<p>First off we need to download and include the stylesheet (or include it from a CDN). For this example we're going to be using a CDN version.</p>
<pre><code><span class="tag"><<span class="title">link</span> <span class="attribute">href</span>=<span class="value">"//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span>></span></code></pre>
<p>Once FontAwesome is loaded, we need to load Griddle with the sortAscendingComponent and sortDescendingComponent properties set to elements using FontAwesome's classes.</p>
<pre><code>React.render(<span class="xml"><span class="tag"><<span class="title">Griddle</span> <span class="attribute">results</span>=<span class="value">{fakeData}</span>
<span class="attribute">sortAscendingComponent</span>=<span class="value">{<span</span> <span class="attribute">className</span>=<span class="value">"fa fa-sort-alpha-asc"</span>></span><span class="tag"></<span class="title">span</span>></span>}
sortDescendingComponent={<span class="tag"><<span class="title">span</span> <span class="attribute">className</span>=<span class="value">"fa fa-sort-alpha-desc"</span>></span><span class="tag"></<span class="title">span</span>></span>}/>,
document.getElementById("some-id"));</span></code></pre>
<p>When clicking on the ColumnHeaders, the font-awesome icons are used instead of the default characters.</p>
<p><link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"></p>
<p><style type="text/css">
.fa {margin-left: 5px; }
</style></p>
<div id="griddle-subgrid"></div>
<script type="text/jsx">
ReactDOM.render(<Griddle results={fakeData} columns={["name", "city", "state", "country"]} sortAscendingComponent={<span className="fa fa-sort-alpha-asc"></span>} sortDescendingComponent={<span className="fa fa-sort-alpha-desc"></span>}/>, 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>