|
1 <!DOCTYPE html> |
|
2 <html lang="en"> |
|
3 <head> |
|
4 <meta charset="utf-8"> |
|
5 <title>Example: Basic DataTable</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: Basic DataTable</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> |
|
50 The DataTable widget displays data in a tabular format. Use plugins and |
|
51 extensions to add features and functionality to the <code>Y.DataTable</code> class. |
|
52 </p> |
|
53 </div> |
|
54 |
|
55 <div class="example yui3-skin-sam"> |
|
56 <div id="simple"></div> |
|
57 |
|
58 <div id="labels"></div> |
|
59 |
|
60 <script> |
|
61 YUI().use("datatable", function (Y) { |
|
62 |
|
63 // A table from data with keys that work fine as column names |
|
64 var simple = new Y.DataTable({ |
|
65 columns: ["id", "name", "price"], |
|
66 data : [ |
|
67 { id: "ga_3475", name: "gadget", price: "$6.99" }, |
|
68 { id: "sp_9980", name: "sprocket", price: "$3.75" }, |
|
69 { id: "wi_0650", name: "widget", price: "$4.25" } |
|
70 ], |
|
71 summary: "Price sheet for inventory parts", |
|
72 caption: "Example table with simple columns" |
|
73 }); |
|
74 |
|
75 simple.render("#simple"); |
|
76 |
|
77 // Data with less user friendly field names |
|
78 var data = [ |
|
79 { |
|
80 mfr_parts_database_id : "ga_3475", |
|
81 mfr_parts_database_name : "gadget", |
|
82 mfr_parts_database_price: "$6.99" |
|
83 }, |
|
84 { |
|
85 mfr_parts_database_id : "sp_9980", |
|
86 mfr_parts_database_name : "sprocket", |
|
87 mfr_parts_database_price: "$3.75" |
|
88 }, |
|
89 { |
|
90 mfr_parts_database_id : "wi_0650", |
|
91 mfr_parts_database_name : "widget", |
|
92 mfr_parts_database_price: "$4.25" |
|
93 } |
|
94 ]; |
|
95 |
|
96 var columnDef = [ |
|
97 { |
|
98 key : "mfr_parts_database_id", |
|
99 label: "Mfr Part ID", |
|
100 abbr : "ID" |
|
101 }, |
|
102 { |
|
103 key : "mfr_parts_database_name", |
|
104 label: "Mfr Part Name", |
|
105 abbr : "Name" |
|
106 }, |
|
107 { |
|
108 key : "mfr_parts_database_price", |
|
109 label: "Wholesale Price", |
|
110 abbr : "Price" |
|
111 } |
|
112 ]; |
|
113 |
|
114 var withColumnLabels = new Y.DataTable({ |
|
115 columns: columnDef, |
|
116 data : data, |
|
117 summary: "Price sheet for inventory parts", |
|
118 caption: "These columns have labels and abbrs" |
|
119 }).render('#labels'); |
|
120 |
|
121 }); |
|
122 </script> |
|
123 |
|
124 </div> |
|
125 |
|
126 <h2>Simple DataTable Use Cases</h2> |
|
127 <p> |
|
128 <strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the |
|
129 page's <code><body></code> element or to a parent element of the widget in order to apply |
|
130 the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>. |
|
131 </p> |
|
132 <pre class="code prettyprint"><div class="example yui3-skin-sam"> <!-- You need this skin class --> |
|
133 <div id="simple"></div> |
|
134 |
|
135 <div id="labels"></div> |
|
136 </div></pre> |
|
137 |
|
138 |
|
139 |
|
140 <p> |
|
141 A basic table can be rendered into a given container by passing in a simple |
|
142 array of columns and an array of data objects into the constructor. As long |
|
143 as the columns map directly to the keys of the data objects, the table will |
|
144 be generated automatically from the data provided. |
|
145 </p> |
|
146 |
|
147 <pre class="code prettyprint">YUI().use("datatable", function (Y) { |
|
148 |
|
149 // A table from data with keys that work fine as column names |
|
150 var simple = new Y.DataTable({ |
|
151 columns: ["id", "name", "price"], |
|
152 data : [ |
|
153 { id: "ga_3475", name: "gadget", price: "$6.99" }, |
|
154 { id: "sp_9980", name: "sprocket", price: "$3.75" }, |
|
155 { id: "wi_0650", name: "widget", price: "$4.25" } |
|
156 ], |
|
157 summary: "Price sheet for inventory parts", |
|
158 caption: "Example table with simple columns" |
|
159 }); |
|
160 |
|
161 simple.render("#simple"); |
|
162 |
|
163 });</pre> |
|
164 |
|
165 |
|
166 <p> |
|
167 Your column definitions may also be objects if additional column |
|
168 configuration is needed. For example, the following column definitions |
|
169 include header labels and set the <code><th></code>'s <code>abbr</code> attribute. Use the <code>key</code> |
|
170 property to relate a column to its corresponding data field. |
|
171 </p> |
|
172 |
|
173 |
|
174 <pre class="code prettyprint">YUI().use("datatable", function(Y) { |
|
175 |
|
176 // Data with less user friendly field names |
|
177 var data = [ |
|
178 { |
|
179 mfr_parts_database_id : "ga_3475", |
|
180 mfr_parts_database_name : "gadget", |
|
181 mfr_parts_database_price: "$6.99" |
|
182 }, |
|
183 { |
|
184 mfr_parts_database_id : "sp_9980", |
|
185 mfr_parts_database_name : "sprocket", |
|
186 mfr_parts_database_price: "$3.75" |
|
187 }, |
|
188 { |
|
189 mfr_parts_database_id : "wi_0650", |
|
190 mfr_parts_database_name : "widget", |
|
191 mfr_parts_database_price: "$4.25" |
|
192 } |
|
193 ]; |
|
194 |
|
195 // Column definitions that use configured header labels, abbrs. |
|
196 // Use "key" to identify which data field has its content. |
|
197 var columnDef = [ |
|
198 { |
|
199 key : "mfr_parts_database_id", |
|
200 label: "Mfr Part ID", |
|
201 abbr : "ID" |
|
202 }, |
|
203 { |
|
204 key : "mfr_parts_database_name", |
|
205 label: "Mfr Part Name", |
|
206 abbr : "Name" |
|
207 }, |
|
208 { |
|
209 key : "mfr_parts_database_price", |
|
210 label: "Wholesale Price", |
|
211 abbr : "Price" |
|
212 } |
|
213 ]; |
|
214 |
|
215 var withColumnLabels = new Y.DataTable({ |
|
216 columns: columnDef, |
|
217 data : data, |
|
218 summary: "Price sheet for inventory parts", |
|
219 caption: "These columns have labels and abbrs" |
|
220 }).render('#labels'); |
|
221 |
|
222 });</pre> |
|
223 |
|
224 |
|
225 <h3>Lighten the module payload</h3> |
|
226 |
|
227 <p> |
|
228 The <code>datatable</code> module includes a number of features not used in this |
|
229 example. For a smaller module payload, use the <code>datatable-base</code> module. |
|
230 </p> |
|
231 |
|
232 <pre class="code prettyprint">// datatable-base includes only basic table rendering, but in this case, |
|
233 // that's enough. |
|
234 YUI().use("datatable-base", function (Y) { |
|
235 |
|
236 // A table from data with keys that work fine as column names |
|
237 var simple = new Y.DataTable({ |
|
238 columns: ["id", "name", "price"], |
|
239 data : [ ... ] |
|
240 }).render("#simple"); |
|
241 |
|
242 });</pre> |
|
243 |
|
244 </div> |
|
245 </div> |
|
246 </div> |
|
247 |
|
248 <div class="yui3-u-1-4"> |
|
249 <div class="sidebar"> |
|
250 |
|
251 |
|
252 |
|
253 <div class="sidebox"> |
|
254 <div class="hd"> |
|
255 <h2 class="no-toc">Examples</h2> |
|
256 </div> |
|
257 |
|
258 <div class="bd"> |
|
259 <ul class="examples"> |
|
260 |
|
261 |
|
262 <li data-description="This example illustrates simple DataTable use cases."> |
|
263 <a href="datatable-basic.html">Basic DataTable</a> |
|
264 </li> |
|
265 |
|
266 |
|
267 |
|
268 <li data-description="DataTable loaded with JSON data from a remote webservice via DataSource.Get"> |
|
269 <a href="datatable-dsget.html">DataTable + DataSource.Get + JSON Data</a> |
|
270 </li> |
|
271 |
|
272 |
|
273 |
|
274 <li data-description="DataTable loaded with XML data from a remote webservice via DataSource.IO."> |
|
275 <a href="datatable-dsio.html">DataTable + DataSource.IO + XML Data</a> |
|
276 </li> |
|
277 |
|
278 |
|
279 |
|
280 <li data-description="Custom format data for display."> |
|
281 <a href="datatable-formatting.html">Formatting Row Data for Display</a> |
|
282 </li> |
|
283 |
|
284 |
|
285 |
|
286 <li data-description="DataTable with nested column headers."> |
|
287 <a href="datatable-nestedcols.html">Nested Column Headers</a> |
|
288 </li> |
|
289 |
|
290 |
|
291 |
|
292 <li data-description="DataTable with column sorting."> |
|
293 <a href="datatable-sort.html">Column Sorting</a> |
|
294 </li> |
|
295 |
|
296 |
|
297 |
|
298 <li data-description="DataTable with vertical and/or horizontal scrolling rows."> |
|
299 <a href="datatable-scroll.html">Scrolling DataTable</a> |
|
300 </li> |
|
301 |
|
302 |
|
303 |
|
304 <li data-description="Using DataTable's recordType attribute to create calculated, sortable columns."> |
|
305 <a href="datatable-recordtype.html">Sortable generated columns</a> |
|
306 </li> |
|
307 |
|
308 |
|
309 |
|
310 <li data-description="Populating one DataTable from details in the data of another."> |
|
311 <a href="datatable-masterdetail.html">Master and detail tables</a> |
|
312 </li> |
|
313 |
|
314 |
|
315 |
|
316 <li data-description="Checkbox column that retains checked state when sorting."> |
|
317 <a href="datatable-chkboxselect.html">Checkbox select column</a> |
|
318 </li> |
|
319 |
|
320 |
|
321 |
|
322 |
|
323 </ul> |
|
324 </div> |
|
325 </div> |
|
326 |
|
327 |
|
328 |
|
329 <div class="sidebox"> |
|
330 <div class="hd"> |
|
331 <h2 class="no-toc">Examples That Use This Component</h2> |
|
332 </div> |
|
333 |
|
334 <div class="bd"> |
|
335 <ul class="examples"> |
|
336 |
|
337 |
|
338 |
|
339 |
|
340 |
|
341 |
|
342 |
|
343 |
|
344 |
|
345 |
|
346 |
|
347 |
|
348 |
|
349 |
|
350 |
|
351 |
|
352 |
|
353 |
|
354 |
|
355 |
|
356 |
|
357 |
|
358 <li data-description="Shows how to instantiate multiple Panel instances, and use nested modality to interact with a Datatable."> |
|
359 <a href="../panel/panel-form.html">Creating a Modal Form</a> |
|
360 </li> |
|
361 |
|
362 |
|
363 </ul> |
|
364 </div> |
|
365 </div> |
|
366 |
|
367 </div> |
|
368 </div> |
|
369 </div> |
|
370 </div> |
|
371 |
|
372 <script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
373 <script>prettyPrint();</script> |
|
374 |
|
375 <script> |
|
376 YUI.Env.Tests = { |
|
377 examples: [], |
|
378 project: '../assets', |
|
379 assets: '../assets/datatable', |
|
380 name: 'datatable-basic', |
|
381 title: 'Basic DataTable', |
|
382 newWindow: '', |
|
383 auto: false |
|
384 }; |
|
385 YUI.Env.Tests.examples.push('datatable-basic'); |
|
386 YUI.Env.Tests.examples.push('datatable-dsget'); |
|
387 YUI.Env.Tests.examples.push('datatable-dsio'); |
|
388 YUI.Env.Tests.examples.push('datatable-formatting'); |
|
389 YUI.Env.Tests.examples.push('datatable-nestedcols'); |
|
390 YUI.Env.Tests.examples.push('datatable-sort'); |
|
391 YUI.Env.Tests.examples.push('datatable-scroll'); |
|
392 YUI.Env.Tests.examples.push('datatable-recordtype'); |
|
393 YUI.Env.Tests.examples.push('datatable-masterdetail'); |
|
394 YUI.Env.Tests.examples.push('datatable-chkboxselect'); |
|
395 YUI.Env.Tests.examples.push('panel-form'); |
|
396 |
|
397 </script> |
|
398 <script src="../assets/yui/test-runner.js"></script> |
|
399 |
|
400 |
|
401 |
|
402 </body> |
|
403 </html> |