|
1 <!DOCTYPE html> |
|
2 <html lang="en"> |
|
3 <head> |
|
4 <meta charset="utf-8"> |
|
5 <title>Example: Nested Column Headers</title> |
|
6 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
7 <link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
8 <link rel="stylesheet" href="../assets/css/main.css"> |
|
9 <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
10 <link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
11 <script src="../../build/yui/yui-min.js"></script> |
|
12 |
|
13 </head> |
|
14 <body> |
|
15 <!-- |
|
16 <a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> |
|
17 --> |
|
18 <div id="doc"> |
|
19 <div id="hd"> |
|
20 <h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
21 </div> |
|
22 |
|
23 |
|
24 <h1>Example: Nested Column Headers</h1> |
|
25 <div class="yui3-g"> |
|
26 <div class="yui3-u-3-4"> |
|
27 <div id="main"> |
|
28 <div class="content"><style scoped> |
|
29 /* custom styles for this example */ |
|
30 .example .yui3-datatable { |
|
31 margin-bottom: 1em; |
|
32 } |
|
33 |
|
34 /* css to counter global site css */ |
|
35 .example table { |
|
36 width: auto; |
|
37 } |
|
38 .example caption { |
|
39 display: table-caption; |
|
40 } |
|
41 .example th, |
|
42 .example td { |
|
43 text-transform: none; |
|
44 border: 0 none; |
|
45 } |
|
46 </style> |
|
47 |
|
48 <div class="intro"> |
|
49 <p>The DataTable widget supports nested column headers, which can be defined in the columns definition using the <code>children</code> configuration.</p> |
|
50 </div> |
|
51 |
|
52 <div class="example yui3-skin-sam"> |
|
53 <div id="nested" class="yui3-skin-sam dt-example"></div> <!-- You need this skin class --> |
|
54 |
|
55 <script type="text/javascript"> |
|
56 YUI().use("datatable-base", function (Y) { |
|
57 var nestedCols = [ |
|
58 {label:"Train Schedule", children:[ |
|
59 {key: "track"}, |
|
60 {label:"Route", children: [ |
|
61 {key:"from"}, |
|
62 {key:"to"} |
|
63 ]} |
|
64 ]} |
|
65 ], |
|
66 data = [ |
|
67 {track:"1", from:"Paris", to:"Amsterdam"}, |
|
68 {track:"2", from:"Paris", to:"London"}, |
|
69 {track:"3", from:"Paris", to:"Zurich"} |
|
70 ], |
|
71 |
|
72 dt = new Y.DataTable({ |
|
73 columns: nestedCols, |
|
74 data : data, |
|
75 summary: "Train schedule", |
|
76 caption:"Table with nested column headers"}) |
|
77 .render("#nested"); |
|
78 }); |
|
79 </script> |
|
80 |
|
81 </div> |
|
82 |
|
83 <h2>Using Nested Column Headers</h2> |
|
84 |
|
85 <p>Use nested columns to visually group related column headers. The <code>children</code> attribute associates a parent column to its descendants. Note that only bottom-level columns will have data values. Any parent columns are there for presentation purposes only and do not hold any data values directly — therefore parent columns may have a <code>label</code> value but a <code>key</code> value is unnecessary.</p> |
|
86 <p> |
|
87 <strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the |
|
88 page's <code><body></code> element or to a parent element of the widget in order to apply |
|
89 the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>. |
|
90 </p> |
|
91 <pre class="code prettyprint"><div id="nested" class="yui3-skin-sam dt-example"></div> <!-- You need this skin class --> |
|
92 |
|
93 <script type="text/javascript"> |
|
94 YUI().use("datatable-base", function (Y) { |
|
95 var nestedCols = [ |
|
96 {label:"Train Schedule", children:[ |
|
97 {key: "track"}, |
|
98 {label:"Route", children: [ |
|
99 {key:"from"}, |
|
100 {key:"to"} |
|
101 ]} |
|
102 ]} |
|
103 ], |
|
104 data = [ |
|
105 {track:"1", from:"Paris", to:"Amsterdam"}, |
|
106 {track:"2", from:"Paris", to:"London"}, |
|
107 {track:"3", from:"Paris", to:"Zurich"} |
|
108 ], |
|
109 |
|
110 dt = new Y.DataTable({ |
|
111 columns: nestedCols, |
|
112 data : data, |
|
113 summary: "Train schedule", |
|
114 caption:"Table with nested column headers"}) |
|
115 .render("#nested"); |
|
116 }); |
|
117 </script></pre> |
|
118 |
|
119 |
|
120 </div> |
|
121 </div> |
|
122 </div> |
|
123 |
|
124 <div class="yui3-u-1-4"> |
|
125 <div class="sidebar"> |
|
126 |
|
127 |
|
128 |
|
129 <div class="sidebox"> |
|
130 <div class="hd"> |
|
131 <h2 class="no-toc">Examples</h2> |
|
132 </div> |
|
133 |
|
134 <div class="bd"> |
|
135 <ul class="examples"> |
|
136 |
|
137 |
|
138 <li data-description="This example illustrates simple DataTable use cases."> |
|
139 <a href="datatable-basic.html">Basic DataTable</a> |
|
140 </li> |
|
141 |
|
142 |
|
143 |
|
144 <li data-description="DataTable loaded with JSON data from a remote webservice via DataSource.Get"> |
|
145 <a href="datatable-dsget.html">DataTable + DataSource.Get + JSON Data</a> |
|
146 </li> |
|
147 |
|
148 |
|
149 |
|
150 <li data-description="DataTable loaded with XML data from a remote webservice via DataSource.IO."> |
|
151 <a href="datatable-dsio.html">DataTable + DataSource.IO + XML Data</a> |
|
152 </li> |
|
153 |
|
154 |
|
155 |
|
156 <li data-description="Custom format data for display."> |
|
157 <a href="datatable-formatting.html">Formatting Row Data for Display</a> |
|
158 </li> |
|
159 |
|
160 |
|
161 |
|
162 <li data-description="DataTable with nested column headers."> |
|
163 <a href="datatable-nestedcols.html">Nested Column Headers</a> |
|
164 </li> |
|
165 |
|
166 |
|
167 |
|
168 <li data-description="DataTable with column sorting."> |
|
169 <a href="datatable-sort.html">Column Sorting</a> |
|
170 </li> |
|
171 |
|
172 |
|
173 |
|
174 <li data-description="DataTable with vertical and/or horizontal scrolling rows."> |
|
175 <a href="datatable-scroll.html">Scrolling DataTable</a> |
|
176 </li> |
|
177 |
|
178 |
|
179 |
|
180 <li data-description="Using DataTable's recordType attribute to create calculated, sortable columns."> |
|
181 <a href="datatable-recordtype.html">Sortable generated columns</a> |
|
182 </li> |
|
183 |
|
184 |
|
185 |
|
186 <li data-description="Populating one DataTable from details in the data of another."> |
|
187 <a href="datatable-masterdetail.html">Master and detail tables</a> |
|
188 </li> |
|
189 |
|
190 |
|
191 |
|
192 <li data-description="Checkbox column that retains checked state when sorting."> |
|
193 <a href="datatable-chkboxselect.html">Checkbox select column</a> |
|
194 </li> |
|
195 |
|
196 |
|
197 |
|
198 |
|
199 </ul> |
|
200 </div> |
|
201 </div> |
|
202 |
|
203 |
|
204 |
|
205 <div class="sidebox"> |
|
206 <div class="hd"> |
|
207 <h2 class="no-toc">Examples That Use This Component</h2> |
|
208 </div> |
|
209 |
|
210 <div class="bd"> |
|
211 <ul class="examples"> |
|
212 |
|
213 |
|
214 |
|
215 |
|
216 |
|
217 |
|
218 |
|
219 |
|
220 |
|
221 |
|
222 |
|
223 |
|
224 |
|
225 |
|
226 |
|
227 |
|
228 |
|
229 |
|
230 |
|
231 |
|
232 |
|
233 |
|
234 <li data-description="Shows how to instantiate multiple Panel instances, and use nested modality to interact with a Datatable."> |
|
235 <a href="../panel/panel-form.html">Creating a Modal Form</a> |
|
236 </li> |
|
237 |
|
238 |
|
239 </ul> |
|
240 </div> |
|
241 </div> |
|
242 |
|
243 </div> |
|
244 </div> |
|
245 </div> |
|
246 </div> |
|
247 |
|
248 <script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
249 <script>prettyPrint();</script> |
|
250 |
|
251 <script> |
|
252 YUI.Env.Tests = { |
|
253 examples: [], |
|
254 project: '../assets', |
|
255 assets: '../assets/datatable', |
|
256 name: 'datatable-nestedcols', |
|
257 title: 'Nested Column Headers', |
|
258 newWindow: '', |
|
259 auto: false |
|
260 }; |
|
261 YUI.Env.Tests.examples.push('datatable-basic'); |
|
262 YUI.Env.Tests.examples.push('datatable-dsget'); |
|
263 YUI.Env.Tests.examples.push('datatable-dsio'); |
|
264 YUI.Env.Tests.examples.push('datatable-formatting'); |
|
265 YUI.Env.Tests.examples.push('datatable-nestedcols'); |
|
266 YUI.Env.Tests.examples.push('datatable-sort'); |
|
267 YUI.Env.Tests.examples.push('datatable-scroll'); |
|
268 YUI.Env.Tests.examples.push('datatable-recordtype'); |
|
269 YUI.Env.Tests.examples.push('datatable-masterdetail'); |
|
270 YUI.Env.Tests.examples.push('datatable-chkboxselect'); |
|
271 YUI.Env.Tests.examples.push('panel-form'); |
|
272 |
|
273 </script> |
|
274 <script src="../assets/yui/test-runner.js"></script> |
|
275 |
|
276 |
|
277 |
|
278 </body> |
|
279 </html> |