|
1 <!DOCTYPE html> |
|
2 <html lang="en"> |
|
3 <head> |
|
4 <meta charset="utf-8"> |
|
5 <title>Example: Scrolling 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: Scrolling 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 Datatables can be made to scroll along the x and y axes. Include |
|
51 "<code>datatable-scroll</code>" in your <code>use()</code> line to enable the feature. |
|
52 </p> |
|
53 |
|
54 <p> |
|
55 This example shows the basic scrolling configurations available. |
|
56 </p> |
|
57 |
|
58 <p> |
|
59 <strong>Note:</strong> Scrolling is not currently supported on the |
|
60 Android WebKit browser. |
|
61 </p> |
|
62 </div> |
|
63 |
|
64 <h3> Vertically Scrolling Table</h3> |
|
65 <div class="example yui3-skin-sam"> |
|
66 <div id="scrolling-y" class="yui3-skin-sam tableDemo"></div> |
|
67 </div> |
|
68 |
|
69 <p> |
|
70 Enable vertical scrolling by setting <code>scrollable</code> to "y" and assigning the |
|
71 <code>height</code>. |
|
72 </p> |
|
73 |
|
74 <pre class="code prettyprint">YUI().use('datatable-scroll', function (Y) { |
|
75 var state_census_data = [ ... ], |
|
76 table; |
|
77 |
|
78 table = new Y.DataTable({ |
|
79 caption: "Y axis scrolling table", |
|
80 columns: [ |
|
81 { key: "STATE", label: "State" }, |
|
82 { key: "TOTAL_POP", label: "Total Population" } |
|
83 ], |
|
84 data: state_census_data, |
|
85 scrollable: "y", |
|
86 height:"200px" |
|
87 }); |
|
88 |
|
89 table.render('#scrolling-y'); |
|
90 |
|
91 });</pre> |
|
92 |
|
93 |
|
94 <h3>Horizontally Scrolling Table</h3> |
|
95 <div class="example yui3-skin-sam"> |
|
96 <div id="scrolling-x" class="tableDemo"></div> |
|
97 </div> |
|
98 |
|
99 <p> |
|
100 Enable horizontal scrolling by setting <code>scrollable</code> to "x" and assigning |
|
101 the <code>width</code>. |
|
102 </p> |
|
103 <pre class="code prettyprint">YUI().use('datatable-scroll', function (Y) { |
|
104 var state_census_data = [ ... ], |
|
105 table; |
|
106 |
|
107 table = new Y.DataTable({ |
|
108 caption: "X axis scrolling table", |
|
109 columns: [ |
|
110 { key: "ANSI" }, |
|
111 { key: "STATE", label:"State" }, |
|
112 { key: "TOTAL_POP", label:"Total Population" }, |
|
113 { key: "LAND_AREA", label:"Land Area" }, |
|
114 { key: "POP_PER_SQ_MILE", label:"Pop/Square Mile" } |
|
115 ], |
|
116 data: state_census_data.slice(0, 7), // truncated for the example |
|
117 scrollable: "x", |
|
118 width: "250px" |
|
119 }); |
|
120 |
|
121 table.render('#scrolling-x'); |
|
122 |
|
123 });</pre> |
|
124 |
|
125 |
|
126 <h3>Fully Scrolling Datatable</h3> |
|
127 <div class="example yui3-skin-sam"> |
|
128 <div id="scrolling-xy" class="tableDemo"></div> |
|
129 </div> |
|
130 |
|
131 <p> |
|
132 Enable scrolling along both axes by setting <code>scrollable</code> to <code>true</code> or "xy" |
|
133 and assigning both <code>height</code> and <code>width</code>. |
|
134 </p> |
|
135 |
|
136 <pre class="code prettyprint">YUI().use('datatable-scroll', function (Y) { |
|
137 var state_census_data = [ ... ], |
|
138 table; |
|
139 |
|
140 table = new Y.DataTable({ |
|
141 caption: "X and Y axis scrolling table", |
|
142 columns: [ |
|
143 { key: "ANSI" }, |
|
144 { key: "STATE", label:"State" }, |
|
145 { key: "TOTAL_POP", label:"Total Population" }, |
|
146 { key: "LAND_AREA", label:"Land Area" }, |
|
147 { key: "POP_PER_SQ_MILE", label:"Pop/Square Mile" } |
|
148 ], |
|
149 data: state_census_data, |
|
150 scrollable: true, |
|
151 width: "300px", |
|
152 height: "150px" |
|
153 }); |
|
154 |
|
155 table.render('#scrolling-xy'); |
|
156 |
|
157 });</pre> |
|
158 |
|
159 |
|
160 <h3>Using Percentage Widths</h3> |
|
161 <div class="example yui3-skin-sam"> |
|
162 <div id="scrolling-100pct" class="tableDemo"></div> |
|
163 </div> |
|
164 <p> |
|
165 Scrolling DataTables support percentage <code>width</code>s. The table above is |
|
166 configured to scroll vertically with a <code>width</code> of "100%". |
|
167 </p> |
|
168 |
|
169 <pre class="code prettyprint">YUI().use('datatable-scroll', function (Y) { |
|
170 var state_census_data = [ ... ], |
|
171 table; |
|
172 |
|
173 table = new Y.DataTable({ |
|
174 caption: "100% width scrolling table", |
|
175 columns: [ |
|
176 { key: "STATE", label: "State" }, |
|
177 { key: "TOTAL_POP", label: "Total Population" } |
|
178 ], |
|
179 data: state_census_data, |
|
180 scrollable: "y", |
|
181 height:"200px", |
|
182 width: "100%" |
|
183 }); |
|
184 |
|
185 table.render('#scrolling-100pct'); |
|
186 |
|
187 });</pre> |
|
188 |
|
189 |
|
190 <h3>The Data</h3> |
|
191 |
|
192 <p> |
|
193 This is the data that is used for each example table. The keys in each |
|
194 tables' <code>columns</code> correspond with the keys in the data. |
|
195 </p> |
|
196 |
|
197 <pre class="code prettyprint">var sampleData = [ |
|
198 { ANSI: "00000", STATE: "UNITED STATES", TOTAL_POP: 307006550, LAND_AREA: 3537438.44, POP_PER_SQ_MILE: 79.6 }, |
|
199 { ANSI: "01000", STATE: "ALABAMA", TOTAL_POP: 4708708, LAND_AREA: 50744, POP_PER_SQ_MILE: 87.6 }, |
|
200 { ANSI: "02000", STATE: "ALASKA", TOTAL_POP: 698473, LAND_AREA: 571951.26, POP_PER_SQ_MILE: 1.1 }, |
|
201 { ANSI: "04000", STATE: "ARIZONA", TOTAL_POP: 6595778, LAND_AREA: 113634.57, POP_PER_SQ_MILE: 45.2 }, |
|
202 ... |
|
203 ];</pre> |
|
204 |
|
205 |
|
206 <h3>Setting scrolling direction and dimensions</h3> |
|
207 |
|
208 <p> |
|
209 The values of <code>scrollable</code> and the respective dimensional attribute |
|
210 determine the scrolling direction(s) of each datatable instance. |
|
211 </p> |
|
212 |
|
213 <p>Other things to consider are:</p> |
|
214 |
|
215 <ol> |
|
216 <li> |
|
217 If a DataTable is configured with <code>scrollable</code> of "y", but the <code>height</code> |
|
218 is not set, it will <strong>not</strong> be made scrollable. Likewise |
|
219 for "x" and <code>width</code>. The respective dimension attribute is required. |
|
220 </li> |
|
221 <li> |
|
222 If the configured <code>width</code> of an "x" or "xy" scrolling table is wider |
|
223 than necessary to fit the data, the table width will be expanded to |
|
224 the assigned <code>width</code>. |
|
225 </li> |
|
226 <li> |
|
227 If a DataTable is configured with <code>scrollable</code> of "y", but the <code>width</code> |
|
228 attribute is also set, DataTable will attempt to make the table that |
|
229 wide. But if the table data doesn't fit within the configured width, |
|
230 the table will expand naturally to fit the data. |
|
231 </li> |
|
232 |
|
233 </ol> |
|
234 |
|
235 <h3>Full Code Listing</h3> |
|
236 <p> |
|
237 <strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the |
|
238 page's <code><body></code> element or to a parent element of the widget in order to apply |
|
239 the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>. |
|
240 </p> |
|
241 <pre class="code prettyprint"><body class="yui3-skin-sam"> <!-- You need this skin class --></pre> |
|
242 |
|
243 <pre class="code prettyprint">YUI().use('datatable-scroll', function (Y) { |
|
244 var state_census_data = [ |
|
245 { ANSI: "00000", STATE: "UNITED STATES", TOTAL_POP: 307006550, LAND_AREA: 3537438.44, POP_PER_SQ_MILE: 79.6 }, |
|
246 { ANSI: "01000", STATE: "ALABAMA", TOTAL_POP: 4708708, LAND_AREA: 50744, POP_PER_SQ_MILE: 87.6 }, |
|
247 { ANSI: "02000", STATE: "ALASKA", TOTAL_POP: 698473, LAND_AREA: 571951.26, POP_PER_SQ_MILE: 1.1 }, |
|
248 { ANSI: "04000", STATE: "ARIZONA", TOTAL_POP: 6595778, LAND_AREA: 113634.57, POP_PER_SQ_MILE: 45.2 }, |
|
249 { ANSI: "05000", STATE: "ARKANSAS", TOTAL_POP: 2889450, LAND_AREA: 52068.17, POP_PER_SQ_MILE: 51.3 }, |
|
250 { ANSI: "06000", STATE: "CALIFORNIA", TOTAL_POP: 36961664, LAND_AREA: 155959.34, POP_PER_SQ_MILE: 217.2 }, |
|
251 { ANSI: "08000", STATE: "COLORADO", TOTAL_POP: 5024748, LAND_AREA: 103717.53, POP_PER_SQ_MILE: 41.5 }, |
|
252 { ANSI: "09000", STATE: "CONNECTICUT", TOTAL_POP: 3518288, LAND_AREA: 4844.8, POP_PER_SQ_MILE: 702.9 }, |
|
253 { ANSI: "10000", STATE: "DELAWARE", TOTAL_POP: 885122, LAND_AREA: 1953.56, POP_PER_SQ_MILE: 401 }, |
|
254 { ANSI: "11000", STATE: "DISTRICT OF COLUMBIA", TOTAL_POP: 599657, LAND_AREA: 61.4, POP_PER_SQ_MILE: 9378 }, |
|
255 { ANSI: "12000", STATE: "FLORIDA", TOTAL_POP: 18537969, LAND_AREA: 53926.82, POP_PER_SQ_MILE: 296.4 }, |
|
256 { ANSI: "13000", STATE: "GEORGIA", TOTAL_POP: 9829211, LAND_AREA: 57906.14, POP_PER_SQ_MILE: 141.4 }, |
|
257 { ANSI: "15000", STATE: "HAWAII", TOTAL_POP: 1295178, LAND_AREA: 6422.62, POP_PER_SQ_MILE: 188.6 }, |
|
258 { ANSI: "16000", STATE: "IDAHO", TOTAL_POP: 1545801, LAND_AREA: 82747.21, POP_PER_SQ_MILE: 15.6 }, |
|
259 { ANSI: "17000", STATE: "ILLINOIS", TOTAL_POP: 12910409, LAND_AREA: 55583.58, POP_PER_SQ_MILE: 223.4 }, |
|
260 { ANSI: "18000", STATE: "INDIANA", TOTAL_POP: 6423113, LAND_AREA: 35866.9, POP_PER_SQ_MILE: 169.5 }, |
|
261 { ANSI: "19000", STATE: "IOWA", TOTAL_POP: 3007856, LAND_AREA: 55869.36, POP_PER_SQ_MILE: 52.4 }, |
|
262 { ANSI: "20000", STATE: "KANSAS", TOTAL_POP: 2818747, LAND_AREA: 81814.88, POP_PER_SQ_MILE: 32.9 }, |
|
263 { ANSI: "21000", STATE: "KENTUCKY", TOTAL_POP: 4314113, LAND_AREA: 39728.18, POP_PER_SQ_MILE: 101.7 }, |
|
264 { ANSI: "22000", STATE: "LOUISIANA", TOTAL_POP: 4492076, LAND_AREA: 43561.85, POP_PER_SQ_MILE: 102.6 }, |
|
265 { ANSI: "23000", STATE: "MAINE", TOTAL_POP: 1318301, LAND_AREA: 30861.55, POP_PER_SQ_MILE: 41.3 }, |
|
266 { ANSI: "24000", STATE: "MARYLAND", TOTAL_POP: 5699478, LAND_AREA: 9773.82, POP_PER_SQ_MILE: 541.9 }, |
|
267 { ANSI: "25000", STATE: "MASSACHUSETTS", TOTAL_POP: 6593587, LAND_AREA: 7840.02, POP_PER_SQ_MILE: 809.8 }, |
|
268 { ANSI: "26000", STATE: "MICHIGAN", TOTAL_POP: 9969727, LAND_AREA: 56803.82, POP_PER_SQ_MILE: 175 }, |
|
269 { ANSI: "27000", STATE: "MINNESOTA", TOTAL_POP: 5266214, LAND_AREA: 79610.08, POP_PER_SQ_MILE: 61.8 }, |
|
270 { ANSI: "28000", STATE: "MISSISSIPPI", TOTAL_POP: 2951996, LAND_AREA: 46906.96, POP_PER_SQ_MILE: 60.6 }, |
|
271 { ANSI: "29000", STATE: "MISSOURI", TOTAL_POP: 5987580, LAND_AREA: 68885.93, POP_PER_SQ_MILE: 81.2 }, |
|
272 { ANSI: "30000", STATE: "MONTANA", TOTAL_POP: 974989, LAND_AREA: 145552.43, POP_PER_SQ_MILE: 6.2 }, |
|
273 { ANSI: "31000", STATE: "NEBRASKA", TOTAL_POP: 1796619, LAND_AREA: 76872.41, POP_PER_SQ_MILE: 22.3 }, |
|
274 { ANSI: "32000", STATE: "NEVADA", TOTAL_POP: 2643085, LAND_AREA: 109825.99, POP_PER_SQ_MILE: 18.2 }, |
|
275 { ANSI: "33000", STATE: "NEW HAMPSHIRE", TOTAL_POP: 1324575, LAND_AREA: 8968.1, POP_PER_SQ_MILE: 137.8 }, |
|
276 { ANSI: "34000", STATE: "NEW JERSEY", TOTAL_POP: 8707739, LAND_AREA: 7417.34, POP_PER_SQ_MILE: 1134.5}, |
|
277 { ANSI: "35000", STATE: "NEW MEXICO", TOTAL_POP: 2009671, LAND_AREA: 121355.53, POP_PER_SQ_MILE: 15 }, |
|
278 { ANSI: "36000", STATE: "NEW YORK", TOTAL_POP: 19541453, LAND_AREA: 47213.79, POP_PER_SQ_MILE: 401.9 }, |
|
279 { ANSI: "37000", STATE: "NORTH CAROLINA", TOTAL_POP: 9380884, LAND_AREA: 48710.88, POP_PER_SQ_MILE: 165.2 }, |
|
280 { ANSI: "38000", STATE: "NORTH DAKOTA", TOTAL_POP: 646844, LAND_AREA: 68975.93, POP_PER_SQ_MILE: 9.3 }, |
|
281 { ANSI: "39000", STATE: "OHIO", TOTAL_POP: 11542645, LAND_AREA: 40948.38, POP_PER_SQ_MILE: 277.3 }, |
|
282 { ANSI: "40000", STATE: "OKLAHOMA", TOTAL_POP: 3687050, LAND_AREA: 68667.06, POP_PER_SQ_MILE: 50.3 }, |
|
283 { ANSI: "41000", STATE: "OREGON", TOTAL_POP: 3825657, LAND_AREA: 95996.79, POP_PER_SQ_MILE: 35.6 }, |
|
284 { ANSI: "42000", STATE: "PENNSYLVANIA", TOTAL_POP: 12604767, LAND_AREA: 44816.61, POP_PER_SQ_MILE: 274 }, |
|
285 { ANSI: "44000", STATE: "RHODE ISLAND", TOTAL_POP: 1053209, LAND_AREA: 1044.93, POP_PER_SQ_MILE: 1003.2 }, |
|
286 { ANSI: "45000", STATE: "SOUTH CAROLINA", TOTAL_POP: 4561242, LAND_AREA: 30109.47, POP_PER_SQ_MILE: 133.2 }, |
|
287 { ANSI: "46000", STATE: "SOUTH DAKOTA", TOTAL_POP: 812383, LAND_AREA: 75884.64, POP_PER_SQ_MILE: 9.9 }, |
|
288 { ANSI: "47000", STATE: "TENNESSEE", TOTAL_POP: 6296254, LAND_AREA: 41217.12, POP_PER_SQ_MILE: 138 }, |
|
289 { ANSI: "48000", STATE: "TEXAS", TOTAL_POP: 24782302, LAND_AREA: 261797.12, POP_PER_SQ_MILE: 79.6 }, |
|
290 { ANSI: "49000", STATE: "UTAH", TOTAL_POP: 2784572, LAND_AREA: 82143.65, POP_PER_SQ_MILE: 27.2 }, |
|
291 { ANSI: "50000", STATE: "VERMONT", TOTAL_POP: 621760, LAND_AREA: 9249.56, POP_PER_SQ_MILE: 65.8 }, |
|
292 { ANSI: "51000", STATE: "VIRGINIA", TOTAL_POP: 7882590, LAND_AREA: 39594.07, POP_PER_SQ_MILE: 178.8 }, |
|
293 { ANSI: "53000", STATE: "WASHINGTON", TOTAL_POP: 6664195, LAND_AREA: 66544.06, POP_PER_SQ_MILE: 88.6 }, |
|
294 { ANSI: "54000", STATE: "WEST VIRGINIA", TOTAL_POP: 1819777, LAND_AREA: 24077.73, POP_PER_SQ_MILE: 75.1 }, |
|
295 { ANSI: "55000", STATE: "WISCONSIN", TOTAL_POP: 5654774, LAND_AREA: 54310.1, POP_PER_SQ_MILE: 98.8 }, |
|
296 { ANSI: "56000", STATE: "WYOMING", TOTAL_POP: 544270, LAND_AREA: 97100.4, POP_PER_SQ_MILE: 5.1 } |
|
297 ]; |
|
298 |
|
299 var table; |
|
300 |
|
301 table = new Y.DataTable({ |
|
302 caption: "Y axis scrolling table", |
|
303 columns: [ |
|
304 { key: "STATE", label: "State" }, |
|
305 { key: "TOTAL_POP", label: "Total Population" } |
|
306 ], |
|
307 data: state_census_data, |
|
308 scrollable: "y", |
|
309 height:"200px" |
|
310 }); |
|
311 |
|
312 table.render('#scrolling-y'); |
|
313 |
|
314 |
|
315 table = new Y.DataTable({ |
|
316 caption: "X axis scrolling table", |
|
317 columns: [ |
|
318 { key: "ANSI" }, |
|
319 { key: "STATE", label:"State" }, |
|
320 { key: "TOTAL_POP", label:"Total Population" }, |
|
321 { key: "LAND_AREA", label:"Land Area" }, |
|
322 { key: "POP_PER_SQ_MILE", label:"Pop/Square Mile" } |
|
323 ], |
|
324 data: state_census_data.slice(0, 7), // truncated for the example |
|
325 scrollable: "x", |
|
326 width: "250px" |
|
327 }); |
|
328 |
|
329 table.render('#scrolling-x'); |
|
330 |
|
331 |
|
332 table = new Y.DataTable({ |
|
333 caption: "X and Y axis scrolling table", |
|
334 columns: [ |
|
335 { key: "ANSI" }, |
|
336 { key: "STATE", label:"State" }, |
|
337 { key: "TOTAL_POP", label:"Total Population" }, |
|
338 { key: "LAND_AREA", label:"Land Area" }, |
|
339 { key: "POP_PER_SQ_MILE", label:"Pop/Square Mile" } |
|
340 ], |
|
341 data: state_census_data, |
|
342 scrollable: true, |
|
343 width: "300px", |
|
344 height: "150px" |
|
345 }); |
|
346 |
|
347 table.render('#scrolling-xy'); |
|
348 |
|
349 |
|
350 table = new Y.DataTable({ |
|
351 caption: "100% width scrolling table", |
|
352 columns: [ |
|
353 { key: "STATE", label: "State" }, |
|
354 { key: "TOTAL_POP", label: "Total Population" } |
|
355 ], |
|
356 data: state_census_data, |
|
357 scrollable: "y", |
|
358 height:"200px", |
|
359 width: "100%" |
|
360 }); |
|
361 |
|
362 table.render('#scrolling-100pct'); |
|
363 |
|
364 });</pre> |
|
365 |
|
366 |
|
367 <script> |
|
368 YUI().use('datatable-scroll', function (Y) { |
|
369 var state_census_data = [ |
|
370 { ANSI: "00000", STATE: "UNITED STATES", TOTAL_POP: 307006550, LAND_AREA: 3537438.44, POP_PER_SQ_MILE: 79.6 }, |
|
371 { ANSI: "01000", STATE: "ALABAMA", TOTAL_POP: 4708708, LAND_AREA: 50744, POP_PER_SQ_MILE: 87.6 }, |
|
372 { ANSI: "02000", STATE: "ALASKA", TOTAL_POP: 698473, LAND_AREA: 571951.26, POP_PER_SQ_MILE: 1.1 }, |
|
373 { ANSI: "04000", STATE: "ARIZONA", TOTAL_POP: 6595778, LAND_AREA: 113634.57, POP_PER_SQ_MILE: 45.2 }, |
|
374 { ANSI: "05000", STATE: "ARKANSAS", TOTAL_POP: 2889450, LAND_AREA: 52068.17, POP_PER_SQ_MILE: 51.3 }, |
|
375 { ANSI: "06000", STATE: "CALIFORNIA", TOTAL_POP: 36961664, LAND_AREA: 155959.34, POP_PER_SQ_MILE: 217.2 }, |
|
376 { ANSI: "08000", STATE: "COLORADO", TOTAL_POP: 5024748, LAND_AREA: 103717.53, POP_PER_SQ_MILE: 41.5 }, |
|
377 { ANSI: "09000", STATE: "CONNECTICUT", TOTAL_POP: 3518288, LAND_AREA: 4844.8, POP_PER_SQ_MILE: 702.9 }, |
|
378 { ANSI: "10000", STATE: "DELAWARE", TOTAL_POP: 885122, LAND_AREA: 1953.56, POP_PER_SQ_MILE: 401 }, |
|
379 { ANSI: "11000", STATE: "DISTRICT OF COLUMBIA", TOTAL_POP: 599657, LAND_AREA: 61.4, POP_PER_SQ_MILE: 9378 }, |
|
380 { ANSI: "12000", STATE: "FLORIDA", TOTAL_POP: 18537969, LAND_AREA: 53926.82, POP_PER_SQ_MILE: 296.4 }, |
|
381 { ANSI: "13000", STATE: "GEORGIA", TOTAL_POP: 9829211, LAND_AREA: 57906.14, POP_PER_SQ_MILE: 141.4 }, |
|
382 { ANSI: "15000", STATE: "HAWAII", TOTAL_POP: 1295178, LAND_AREA: 6422.62, POP_PER_SQ_MILE: 188.6 }, |
|
383 { ANSI: "16000", STATE: "IDAHO", TOTAL_POP: 1545801, LAND_AREA: 82747.21, POP_PER_SQ_MILE: 15.6 }, |
|
384 { ANSI: "17000", STATE: "ILLINOIS", TOTAL_POP: 12910409, LAND_AREA: 55583.58, POP_PER_SQ_MILE: 223.4 }, |
|
385 { ANSI: "18000", STATE: "INDIANA", TOTAL_POP: 6423113, LAND_AREA: 35866.9, POP_PER_SQ_MILE: 169.5 }, |
|
386 { ANSI: "19000", STATE: "IOWA", TOTAL_POP: 3007856, LAND_AREA: 55869.36, POP_PER_SQ_MILE: 52.4 }, |
|
387 { ANSI: "20000", STATE: "KANSAS", TOTAL_POP: 2818747, LAND_AREA: 81814.88, POP_PER_SQ_MILE: 32.9 }, |
|
388 { ANSI: "21000", STATE: "KENTUCKY", TOTAL_POP: 4314113, LAND_AREA: 39728.18, POP_PER_SQ_MILE: 101.7 }, |
|
389 { ANSI: "22000", STATE: "LOUISIANA", TOTAL_POP: 4492076, LAND_AREA: 43561.85, POP_PER_SQ_MILE: 102.6 }, |
|
390 { ANSI: "23000", STATE: "MAINE", TOTAL_POP: 1318301, LAND_AREA: 30861.55, POP_PER_SQ_MILE: 41.3 }, |
|
391 { ANSI: "24000", STATE: "MARYLAND", TOTAL_POP: 5699478, LAND_AREA: 9773.82, POP_PER_SQ_MILE: 541.9 }, |
|
392 { ANSI: "25000", STATE: "MASSACHUSETTS", TOTAL_POP: 6593587, LAND_AREA: 7840.02, POP_PER_SQ_MILE: 809.8 }, |
|
393 { ANSI: "26000", STATE: "MICHIGAN", TOTAL_POP: 9969727, LAND_AREA: 56803.82, POP_PER_SQ_MILE: 175 }, |
|
394 { ANSI: "27000", STATE: "MINNESOTA", TOTAL_POP: 5266214, LAND_AREA: 79610.08, POP_PER_SQ_MILE: 61.8 }, |
|
395 { ANSI: "28000", STATE: "MISSISSIPPI", TOTAL_POP: 2951996, LAND_AREA: 46906.96, POP_PER_SQ_MILE: 60.6 }, |
|
396 { ANSI: "29000", STATE: "MISSOURI", TOTAL_POP: 5987580, LAND_AREA: 68885.93, POP_PER_SQ_MILE: 81.2 }, |
|
397 { ANSI: "30000", STATE: "MONTANA", TOTAL_POP: 974989, LAND_AREA: 145552.43, POP_PER_SQ_MILE: 6.2 }, |
|
398 { ANSI: "31000", STATE: "NEBRASKA", TOTAL_POP: 1796619, LAND_AREA: 76872.41, POP_PER_SQ_MILE: 22.3 }, |
|
399 { ANSI: "32000", STATE: "NEVADA", TOTAL_POP: 2643085, LAND_AREA: 109825.99, POP_PER_SQ_MILE: 18.2 }, |
|
400 { ANSI: "33000", STATE: "NEW HAMPSHIRE", TOTAL_POP: 1324575, LAND_AREA: 8968.1, POP_PER_SQ_MILE: 137.8 }, |
|
401 { ANSI: "34000", STATE: "NEW JERSEY", TOTAL_POP: 8707739, LAND_AREA: 7417.34, POP_PER_SQ_MILE: 1134.5}, |
|
402 { ANSI: "35000", STATE: "NEW MEXICO", TOTAL_POP: 2009671, LAND_AREA: 121355.53, POP_PER_SQ_MILE: 15 }, |
|
403 { ANSI: "36000", STATE: "NEW YORK", TOTAL_POP: 19541453, LAND_AREA: 47213.79, POP_PER_SQ_MILE: 401.9 }, |
|
404 { ANSI: "37000", STATE: "NORTH CAROLINA", TOTAL_POP: 9380884, LAND_AREA: 48710.88, POP_PER_SQ_MILE: 165.2 }, |
|
405 { ANSI: "38000", STATE: "NORTH DAKOTA", TOTAL_POP: 646844, LAND_AREA: 68975.93, POP_PER_SQ_MILE: 9.3 }, |
|
406 { ANSI: "39000", STATE: "OHIO", TOTAL_POP: 11542645, LAND_AREA: 40948.38, POP_PER_SQ_MILE: 277.3 }, |
|
407 { ANSI: "40000", STATE: "OKLAHOMA", TOTAL_POP: 3687050, LAND_AREA: 68667.06, POP_PER_SQ_MILE: 50.3 }, |
|
408 { ANSI: "41000", STATE: "OREGON", TOTAL_POP: 3825657, LAND_AREA: 95996.79, POP_PER_SQ_MILE: 35.6 }, |
|
409 { ANSI: "42000", STATE: "PENNSYLVANIA", TOTAL_POP: 12604767, LAND_AREA: 44816.61, POP_PER_SQ_MILE: 274 }, |
|
410 { ANSI: "44000", STATE: "RHODE ISLAND", TOTAL_POP: 1053209, LAND_AREA: 1044.93, POP_PER_SQ_MILE: 1003.2 }, |
|
411 { ANSI: "45000", STATE: "SOUTH CAROLINA", TOTAL_POP: 4561242, LAND_AREA: 30109.47, POP_PER_SQ_MILE: 133.2 }, |
|
412 { ANSI: "46000", STATE: "SOUTH DAKOTA", TOTAL_POP: 812383, LAND_AREA: 75884.64, POP_PER_SQ_MILE: 9.9 }, |
|
413 { ANSI: "47000", STATE: "TENNESSEE", TOTAL_POP: 6296254, LAND_AREA: 41217.12, POP_PER_SQ_MILE: 138 }, |
|
414 { ANSI: "48000", STATE: "TEXAS", TOTAL_POP: 24782302, LAND_AREA: 261797.12, POP_PER_SQ_MILE: 79.6 }, |
|
415 { ANSI: "49000", STATE: "UTAH", TOTAL_POP: 2784572, LAND_AREA: 82143.65, POP_PER_SQ_MILE: 27.2 }, |
|
416 { ANSI: "50000", STATE: "VERMONT", TOTAL_POP: 621760, LAND_AREA: 9249.56, POP_PER_SQ_MILE: 65.8 }, |
|
417 { ANSI: "51000", STATE: "VIRGINIA", TOTAL_POP: 7882590, LAND_AREA: 39594.07, POP_PER_SQ_MILE: 178.8 }, |
|
418 { ANSI: "53000", STATE: "WASHINGTON", TOTAL_POP: 6664195, LAND_AREA: 66544.06, POP_PER_SQ_MILE: 88.6 }, |
|
419 { ANSI: "54000", STATE: "WEST VIRGINIA", TOTAL_POP: 1819777, LAND_AREA: 24077.73, POP_PER_SQ_MILE: 75.1 }, |
|
420 { ANSI: "55000", STATE: "WISCONSIN", TOTAL_POP: 5654774, LAND_AREA: 54310.1, POP_PER_SQ_MILE: 98.8 }, |
|
421 { ANSI: "56000", STATE: "WYOMING", TOTAL_POP: 544270, LAND_AREA: 97100.4, POP_PER_SQ_MILE: 5.1 } |
|
422 ]; |
|
423 |
|
424 var table; |
|
425 |
|
426 table = new Y.DataTable({ |
|
427 caption: "Y axis scrolling table", |
|
428 columns: [ |
|
429 { key: "STATE", label: "State" }, |
|
430 { key: "TOTAL_POP", label: "Total Population" } |
|
431 ], |
|
432 data: state_census_data, |
|
433 scrollable: "y", |
|
434 height:"200px" |
|
435 }); |
|
436 |
|
437 table.render('#scrolling-y'); |
|
438 |
|
439 |
|
440 table = new Y.DataTable({ |
|
441 caption: "X axis scrolling table", |
|
442 columns: [ |
|
443 { key: "ANSI" }, |
|
444 { key: "STATE", label:"State" }, |
|
445 { key: "TOTAL_POP", label:"Total Population" }, |
|
446 { key: "LAND_AREA", label:"Land Area" }, |
|
447 { key: "POP_PER_SQ_MILE", label:"Pop/Square Mile" } |
|
448 ], |
|
449 data: state_census_data.slice(0, 7), // truncated for the example |
|
450 scrollable: "x", |
|
451 width: "250px" |
|
452 }); |
|
453 |
|
454 table.render('#scrolling-x'); |
|
455 |
|
456 |
|
457 table = new Y.DataTable({ |
|
458 caption: "X and Y axis scrolling table", |
|
459 columns: [ |
|
460 { key: "ANSI" }, |
|
461 { key: "STATE", label:"State" }, |
|
462 { key: "TOTAL_POP", label:"Total Population" }, |
|
463 { key: "LAND_AREA", label:"Land Area" }, |
|
464 { key: "POP_PER_SQ_MILE", label:"Pop/Square Mile" } |
|
465 ], |
|
466 data: state_census_data, |
|
467 scrollable: true, |
|
468 width: "300px", |
|
469 height: "150px" |
|
470 }); |
|
471 |
|
472 table.render('#scrolling-xy'); |
|
473 |
|
474 |
|
475 table = new Y.DataTable({ |
|
476 caption: "100% width scrolling table", |
|
477 columns: [ |
|
478 { key: "STATE", label: "State" }, |
|
479 { key: "TOTAL_POP", label: "Total Population" } |
|
480 ], |
|
481 data: state_census_data, |
|
482 scrollable: "y", |
|
483 height:"200px", |
|
484 width: "100%" |
|
485 }); |
|
486 |
|
487 table.render('#scrolling-100pct'); |
|
488 |
|
489 }); |
|
490 |
|
491 </script> |
|
492 </div> |
|
493 </div> |
|
494 </div> |
|
495 |
|
496 <div class="yui3-u-1-4"> |
|
497 <div class="sidebar"> |
|
498 |
|
499 |
|
500 |
|
501 <div class="sidebox"> |
|
502 <div class="hd"> |
|
503 <h2 class="no-toc">Examples</h2> |
|
504 </div> |
|
505 |
|
506 <div class="bd"> |
|
507 <ul class="examples"> |
|
508 |
|
509 |
|
510 <li data-description="This example illustrates simple DataTable use cases."> |
|
511 <a href="datatable-basic.html">Basic DataTable</a> |
|
512 </li> |
|
513 |
|
514 |
|
515 |
|
516 <li data-description="DataTable loaded with JSON data from a remote webservice via DataSource.Get"> |
|
517 <a href="datatable-dsget.html">DataTable + DataSource.Get + JSON Data</a> |
|
518 </li> |
|
519 |
|
520 |
|
521 |
|
522 <li data-description="DataTable loaded with XML data from a remote webservice via DataSource.IO."> |
|
523 <a href="datatable-dsio.html">DataTable + DataSource.IO + XML Data</a> |
|
524 </li> |
|
525 |
|
526 |
|
527 |
|
528 <li data-description="Custom format data for display."> |
|
529 <a href="datatable-formatting.html">Formatting Row Data for Display</a> |
|
530 </li> |
|
531 |
|
532 |
|
533 |
|
534 <li data-description="DataTable with nested column headers."> |
|
535 <a href="datatable-nestedcols.html">Nested Column Headers</a> |
|
536 </li> |
|
537 |
|
538 |
|
539 |
|
540 <li data-description="DataTable with column sorting."> |
|
541 <a href="datatable-sort.html">Column Sorting</a> |
|
542 </li> |
|
543 |
|
544 |
|
545 |
|
546 <li data-description="DataTable with vertical and/or horizontal scrolling rows."> |
|
547 <a href="datatable-scroll.html">Scrolling DataTable</a> |
|
548 </li> |
|
549 |
|
550 |
|
551 |
|
552 <li data-description="Using DataTable's recordType attribute to create calculated, sortable columns."> |
|
553 <a href="datatable-recordtype.html">Sortable generated columns</a> |
|
554 </li> |
|
555 |
|
556 |
|
557 |
|
558 <li data-description="Populating one DataTable from details in the data of another."> |
|
559 <a href="datatable-masterdetail.html">Master and detail tables</a> |
|
560 </li> |
|
561 |
|
562 |
|
563 |
|
564 <li data-description="Checkbox column that retains checked state when sorting."> |
|
565 <a href="datatable-chkboxselect.html">Checkbox select column</a> |
|
566 </li> |
|
567 |
|
568 |
|
569 |
|
570 |
|
571 </ul> |
|
572 </div> |
|
573 </div> |
|
574 |
|
575 |
|
576 |
|
577 <div class="sidebox"> |
|
578 <div class="hd"> |
|
579 <h2 class="no-toc">Examples That Use This Component</h2> |
|
580 </div> |
|
581 |
|
582 <div class="bd"> |
|
583 <ul class="examples"> |
|
584 |
|
585 |
|
586 |
|
587 |
|
588 |
|
589 |
|
590 |
|
591 |
|
592 |
|
593 |
|
594 |
|
595 |
|
596 |
|
597 |
|
598 |
|
599 |
|
600 |
|
601 |
|
602 |
|
603 |
|
604 |
|
605 |
|
606 <li data-description="Shows how to instantiate multiple Panel instances, and use nested modality to interact with a Datatable."> |
|
607 <a href="../panel/panel-form.html">Creating a Modal Form</a> |
|
608 </li> |
|
609 |
|
610 |
|
611 </ul> |
|
612 </div> |
|
613 </div> |
|
614 |
|
615 </div> |
|
616 </div> |
|
617 </div> |
|
618 </div> |
|
619 |
|
620 <script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
621 <script>prettyPrint();</script> |
|
622 |
|
623 <script> |
|
624 YUI.Env.Tests = { |
|
625 examples: [], |
|
626 project: '../assets', |
|
627 assets: '../assets/datatable', |
|
628 name: 'datatable-scroll', |
|
629 title: 'Scrolling DataTable', |
|
630 newWindow: '', |
|
631 auto: false |
|
632 }; |
|
633 YUI.Env.Tests.examples.push('datatable-basic'); |
|
634 YUI.Env.Tests.examples.push('datatable-dsget'); |
|
635 YUI.Env.Tests.examples.push('datatable-dsio'); |
|
636 YUI.Env.Tests.examples.push('datatable-formatting'); |
|
637 YUI.Env.Tests.examples.push('datatable-nestedcols'); |
|
638 YUI.Env.Tests.examples.push('datatable-sort'); |
|
639 YUI.Env.Tests.examples.push('datatable-scroll'); |
|
640 YUI.Env.Tests.examples.push('datatable-recordtype'); |
|
641 YUI.Env.Tests.examples.push('datatable-masterdetail'); |
|
642 YUI.Env.Tests.examples.push('datatable-chkboxselect'); |
|
643 YUI.Env.Tests.examples.push('panel-form'); |
|
644 |
|
645 </script> |
|
646 <script src="../assets/yui/test-runner.js"></script> |
|
647 |
|
648 |
|
649 |
|
650 </body> |
|
651 </html> |