|
525
|
1 |
<!DOCTYPE html>
|
|
|
2 |
<html lang="en">
|
|
|
3 |
<head>
|
|
|
4 |
<meta charset="utf-8">
|
|
|
5 |
<title>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 |
<a href="#toc" class="jump">Jump to Table of Contents</a>
|
|
|
24 |
|
|
|
25 |
|
|
|
26 |
<h1>DataTable</h1>
|
|
|
27 |
<div class="yui3-g">
|
|
|
28 |
<div class="yui3-u-3-4">
|
|
|
29 |
<div id="main">
|
|
|
30 |
<div class="content"><style type="text/css">
|
|
|
31 |
td code {
|
|
|
32 |
white-space: nowrap;
|
|
|
33 |
background: #fcfbfa;
|
|
|
34 |
border: 1px solid #d0d5ec;
|
|
|
35 |
padding: 0 3px;
|
|
|
36 |
}
|
|
|
37 |
.yui3-datatable table {
|
|
|
38 |
width: auto;
|
|
|
39 |
}
|
|
|
40 |
|
|
|
41 |
.yui3-datatable td, .yui3-datatable th {
|
|
|
42 |
border: 0 none;
|
|
|
43 |
}
|
|
|
44 |
|
|
|
45 |
.yui3-datatable-col-Module {
|
|
|
46 |
white-space: nowrap;
|
|
|
47 |
}
|
|
|
48 |
|
|
|
49 |
.yui3-skin-sam .yui3-datatable-message-content {
|
|
|
50 |
background: #fff;
|
|
|
51 |
border-bottom: 0 none;
|
|
|
52 |
}
|
|
|
53 |
|
|
|
54 |
.notice {
|
|
|
55 |
background: #faf3d1;
|
|
|
56 |
border: 1px solid #eac9a9;
|
|
|
57 |
-moz-border-radius: 3px;
|
|
|
58 |
-webkit-border-radius: 3px;
|
|
|
59 |
border-radius: px;
|
|
|
60 |
padding: 0 1em;
|
|
|
61 |
-moz-box-shadow: 0 0 5px #ccc8b3;
|
|
|
62 |
-webkit-box-shadow: 0 0 5px #ccc8b3;
|
|
|
63 |
box-shadow: 0 0 5px #ccc8b3;
|
|
|
64 |
margin-bottom: 1em;
|
|
|
65 |
}
|
|
|
66 |
.notice h2 {
|
|
|
67 |
margin-top: .6em;
|
|
|
68 |
}
|
|
|
69 |
</style>
|
|
|
70 |
|
|
|
71 |
<div class="intro component">
|
|
|
72 |
<p>
|
|
|
73 |
The DataTable widget is responsible for rendering columnar data into a
|
|
|
74 |
highly customizable and fully accessible HTML table. The core
|
|
|
75 |
functionality of DataTable is to visualize structured data as a table.
|
|
|
76 |
A variety of class extensions can then be used to add features to the
|
|
|
77 |
table such as sorting and scrolling.
|
|
|
78 |
</p>
|
|
|
79 |
</div>
|
|
|
80 |
|
|
|
81 |
<h2 id="getting-started">Getting Started</h2>
|
|
|
82 |
|
|
|
83 |
<p>
|
|
|
84 |
To include the source files for DataTable and its dependencies, first load
|
|
|
85 |
the YUI seed file if you haven't already loaded it.
|
|
|
86 |
</p>
|
|
|
87 |
|
|
|
88 |
<pre class="code prettyprint"><script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script></pre>
|
|
|
89 |
|
|
|
90 |
|
|
|
91 |
<p>
|
|
|
92 |
Next, create a new YUI instance for your application and populate it with the
|
|
|
93 |
modules you need by specifying them as arguments to the <code>YUI().use()</code> method.
|
|
|
94 |
YUI will automatically load any dependencies required by the modules you
|
|
|
95 |
specify.
|
|
|
96 |
</p>
|
|
|
97 |
|
|
|
98 |
<pre class="code prettyprint"><script>
|
|
|
99 |
// Create a new YUI instance and populate it with the required modules.
|
|
|
100 |
YUI().use('datatable', function (Y) {
|
|
|
101 |
// DataTable is available and ready for use. Add implementation
|
|
|
102 |
// code here.
|
|
|
103 |
});
|
|
|
104 |
</script></pre>
|
|
|
105 |
|
|
|
106 |
|
|
|
107 |
<p>
|
|
|
108 |
For more information on creating YUI instances and on the
|
|
|
109 |
<a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_use"><code>use()</code> method</a>, see the
|
|
|
110 |
documentation for the <a href="../yui/index.html">YUI Global Object</a>.
|
|
|
111 |
</p>
|
|
|
112 |
|
|
|
113 |
|
|
|
114 |
<p>
|
|
|
115 |
<strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the
|
|
|
116 |
page's <code><body></code> element or to a parent element of the widget in order to apply
|
|
|
117 |
the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>.
|
|
|
118 |
</p>
|
|
|
119 |
|
|
|
120 |
<div class="notice">
|
|
|
121 |
<h2 id="migration-intro">Upgrading from version 3.4.1 or older?</h2>
|
|
|
122 |
|
|
|
123 |
<p>
|
|
|
124 |
DataTable was refactored for 3.5.0. Some APIs were changed in backward
|
|
|
125 |
incompatible ways.
|
|
|
126 |
</p>
|
|
|
127 |
|
|
|
128 |
<p>
|
|
|
129 |
Read the <a href="migration.html">3.5.0 Migration Guide</a> for tips to
|
|
|
130 |
avoid unpleasant surprises. If you still run into issues, please
|
|
|
131 |
<a href="../../../projects/yui3/newticket/">file a ticket</a>.
|
|
|
132 |
</p>
|
|
|
133 |
|
|
|
134 |
<p>
|
|
|
135 |
If you are unable to upgrade due to unresolvable issues, you can use the
|
|
|
136 |
<a href="../datatable-deprecated/index.html"><code>datatable-deprecated</code></a>
|
|
|
137 |
module suite, which is equivalent to the 3.4.1 implementation. But be
|
|
|
138 |
aware that these modules will be removed in a future version of YUI.
|
|
|
139 |
</p>
|
|
|
140 |
</div>
|
|
|
141 |
|
|
|
142 |
<h2 id="using">DataTable Basics</h2>
|
|
|
143 |
|
|
|
144 |
<p>
|
|
|
145 |
A basic DataTable is made of columns and rows. Define the columns you
|
|
|
146 |
want to display in your DataTable with the <code>columns</code> attribute. Rows are
|
|
|
147 |
created for you based on the data you provide to the <code>data</code> attribute.
|
|
|
148 |
</p>
|
|
|
149 |
|
|
|
150 |
<p>
|
|
|
151 |
Under the hood, the DataTable class uses a
|
|
|
152 |
<a href="../model-list/index.html">ModelList</a> instance to manage the row
|
|
|
153 |
data properties. Read the <a href="#data">Table Data Configuration</a>
|
|
|
154 |
section below for details about how to load, configure, and work with the
|
|
|
155 |
table data.
|
|
|
156 |
</p>
|
|
|
157 |
|
|
|
158 |
<pre class="code prettyprint">// Columns must match data object property names
|
|
|
159 |
var data = [
|
|
|
160 |
{ id: "ga-3475", name: "gadget", price: "$6.99", cost: "$5.99" },
|
|
|
161 |
{ id: "sp-9980", name: "sprocket", price: "$3.75", cost: "$3.25" },
|
|
|
162 |
{ id: "wi-0650", name: "widget", price: "$4.25", cost: "$3.75" }
|
|
|
163 |
];
|
|
|
164 |
|
|
|
165 |
var table = new Y.DataTable({
|
|
|
166 |
columns: ["id", "name", "price"],
|
|
|
167 |
data: data,
|
|
|
168 |
|
|
|
169 |
// Optionally configure your table with a caption
|
|
|
170 |
caption: "My first DataTable!",
|
|
|
171 |
|
|
|
172 |
// and/or a summary (table attribute)
|
|
|
173 |
summary: "Example DataTable showing basic instantiation configuration"
|
|
|
174 |
});
|
|
|
175 |
|
|
|
176 |
table.render("#example");</pre>
|
|
|
177 |
|
|
|
178 |
|
|
|
179 |
<p>This code produces this table:</p>
|
|
|
180 |
|
|
|
181 |
<div id="basic-example" class="yui3-skin-sam"></div>
|
|
|
182 |
|
|
|
183 |
<script>
|
|
|
184 |
YUI({ filter: 'raw' }).use('datatable-base', function (Y) {
|
|
|
185 |
// Columns must match data object property names
|
|
|
186 |
var data = [
|
|
|
187 |
{ id: "ga-3475", name: "gadget", price: "$6.99", cost: "$5.99" },
|
|
|
188 |
{ id: "sp-9980", name: "sprocket", price: "$3.75", cost: "$3.25" },
|
|
|
189 |
{ id: "wi-0650", name: "widget", price: "$4.25", cost: "$3.75" }
|
|
|
190 |
];
|
|
|
191 |
|
|
|
192 |
var table = new Y.DataTable({
|
|
|
193 |
columns: ["id", "name", "price"],
|
|
|
194 |
data: data,
|
|
|
195 |
caption: "My first DataTable!",
|
|
|
196 |
summary: "Example DataTable showing basic instantiation configuration"
|
|
|
197 |
});
|
|
|
198 |
|
|
|
199 |
table.render("#basic-example");
|
|
|
200 |
});
|
|
|
201 |
</script>
|
|
|
202 |
|
|
|
203 |
<h2 id="columns">Column Configuration</h2>
|
|
|
204 |
|
|
|
205 |
<p>
|
|
|
206 |
The <code>columns</code> attribute takes an array of field names that correspond to
|
|
|
207 |
property names in the <code>data</code> objects. These field names are called "keys".
|
|
|
208 |
As long as these keys exist in your data, DataTable will display the
|
|
|
209 |
values in the table. By default, the key is also used as the label of the
|
|
|
210 |
column header.
|
|
|
211 |
</p>
|
|
|
212 |
|
|
|
213 |
|
|
|
214 |
<p>
|
|
|
215 |
Use objects instead of key strings to customize how the cells in a column
|
|
|
216 |
display.
|
|
|
217 |
</p>
|
|
|
218 |
|
|
|
219 |
<pre class="code prettyprint">// Columns must match data object property names
|
|
|
220 |
var data = [
|
|
|
221 |
{ id: "ga-3475", name: "gadget", price: "$6.99", cost: "$5.99" },
|
|
|
222 |
{ id: "sp-9980", name: "sprocket", price: "$3.75", cost: "$3.25" },
|
|
|
223 |
{ id: "wi-0650", name: "widget", /* missing */ cost: "$3.75" }
|
|
|
224 |
];
|
|
|
225 |
|
|
|
226 |
var table = new Y.DataTable({
|
|
|
227 |
columns: [
|
|
|
228 |
"id",
|
|
|
229 |
{ key: "name", label: "part name" },
|
|
|
230 |
{ key: "price", allowHTML: true, emptyCellValue: "<em>(not set)</em>" },
|
|
|
231 |
"cost"
|
|
|
232 |
],
|
|
|
233 |
data: data
|
|
|
234 |
});
|
|
|
235 |
|
|
|
236 |
table.render("#example");</pre>
|
|
|
237 |
|
|
|
238 |
|
|
|
239 |
<p>This code produces this table:</p>
|
|
|
240 |
|
|
|
241 |
<div id="column-example1" class="yui3-skin-sam"></div>
|
|
|
242 |
|
|
|
243 |
<script>
|
|
|
244 |
YUI().use('datatable-base', function (Y) {
|
|
|
245 |
// Columns must match data object property names
|
|
|
246 |
var data = [
|
|
|
247 |
{ id: "ga-3475", name: "gadget", price: "$6.99", cost: "$5.99" },
|
|
|
248 |
{ id: "sp-9980", name: "sprocket", price: "$3.75", cost: "$3.25" },
|
|
|
249 |
{ id: "wi-0650", name: "widget", cost: "$3.75" }
|
|
|
250 |
];
|
|
|
251 |
|
|
|
252 |
var table = new Y.DataTable({
|
|
|
253 |
columns: [
|
|
|
254 |
"id",
|
|
|
255 |
{ key: "name", label: "part name" },
|
|
|
256 |
{ key: "price", allowHTML: true, emptyCellValue: "<em>(not set)</em>" },
|
|
|
257 |
"cost"
|
|
|
258 |
],
|
|
|
259 |
data: data
|
|
|
260 |
});
|
|
|
261 |
|
|
|
262 |
table.render("#column-example1");
|
|
|
263 |
});
|
|
|
264 |
</script>
|
|
|
265 |
|
|
|
266 |
<p>
|
|
|
267 |
Some column configurations affect the table headers and others affect the
|
|
|
268 |
data cells.
|
|
|
269 |
</p>
|
|
|
270 |
|
|
|
271 |
<p>
|
|
|
272 |
Use the <code>key</code> property to reference the associated data field when
|
|
|
273 |
configuring columns with objects. Other supported configuration
|
|
|
274 |
properties are listed in <a href="#column-config">Appendix A</a> below.
|
|
|
275 |
</p>
|
|
|
276 |
|
|
|
277 |
|
|
|
278 |
<h3 id="nested">Stacked Column Headers</h3>
|
|
|
279 |
|
|
|
280 |
<p>
|
|
|
281 |
Use the <code>children</code> column configuration to create multiple rows of column
|
|
|
282 |
headers.
|
|
|
283 |
</p>
|
|
|
284 |
|
|
|
285 |
<pre class="code prettyprint">var columns = [
|
|
|
286 |
'username',
|
|
|
287 |
{
|
|
|
288 |
// Important: Parent columns do NOT get a key...
|
|
|
289 |
|
|
|
290 |
// but DO get a label
|
|
|
291 |
label: "Access",
|
|
|
292 |
|
|
|
293 |
// Pass an array of column configurations (strings or objects) as children
|
|
|
294 |
children: [
|
|
|
295 |
'read',
|
|
|
296 |
'write',
|
|
|
297 |
]
|
|
|
298 |
}
|
|
|
299 |
];
|
|
|
300 |
|
|
|
301 |
var data = [
|
|
|
302 |
{ username: "root", read: true, write: true },
|
|
|
303 |
{ username: "spilgrim", read: true, write: false },
|
|
|
304 |
{ username: "fizzgig", read: false, write: false }
|
|
|
305 |
];
|
|
|
306 |
|
|
|
307 |
var table = new Y.DataTable({
|
|
|
308 |
columns: columns,
|
|
|
309 |
data : data
|
|
|
310 |
}).render("#example");</pre>
|
|
|
311 |
|
|
|
312 |
|
|
|
313 |
<p>This code produces this table:</p>
|
|
|
314 |
|
|
|
315 |
<div id="nested-example" class="yui3-skin-sam"></div>
|
|
|
316 |
|
|
|
317 |
<script>
|
|
|
318 |
YUI().use('datatable-base', function (Y) {
|
|
|
319 |
var data = [
|
|
|
320 |
{ username: "root", read: true, write: true },
|
|
|
321 |
{ username: "spilgrim", read: true, write: false },
|
|
|
322 |
{ username: "fizzgig", read: false, write: false }
|
|
|
323 |
];
|
|
|
324 |
|
|
|
325 |
var table = new Y.DataTable({
|
|
|
326 |
columns: [
|
|
|
327 |
'username',
|
|
|
328 |
{
|
|
|
329 |
// Important: Parent columns do NOT get a key...
|
|
|
330 |
|
|
|
331 |
// but DO get a label
|
|
|
332 |
label: "Access",
|
|
|
333 |
|
|
|
334 |
// Pass an array of column configurations (strings or objects) as children
|
|
|
335 |
children: [
|
|
|
336 |
'read',
|
|
|
337 |
'write'
|
|
|
338 |
]
|
|
|
339 |
}
|
|
|
340 |
],
|
|
|
341 |
data : data
|
|
|
342 |
}).render("#nested-example");
|
|
|
343 |
});
|
|
|
344 |
</script>
|
|
|
345 |
|
|
|
346 |
<p>
|
|
|
347 |
<code>children</code> takes an array of column configurations, just like the <code>columns</code>
|
|
|
348 |
attribute itself. The columns defined in the <code>children</code> property will have
|
|
|
349 |
header cells rendered below the parent column's header.
|
|
|
350 |
</p>
|
|
|
351 |
|
|
|
352 |
<p>
|
|
|
353 |
Columns that have <code>children</code> don't relate directly to the data cells in the
|
|
|
354 |
table rows, so they <strong>should not</strong> have a <code>key</code> configured.
|
|
|
355 |
They should, however, include a <code>label</code> to provide the header's content.
|
|
|
356 |
</p>
|
|
|
357 |
|
|
|
358 |
<h3 id="formatters">Formatting Cell Data</h3>
|
|
|
359 |
|
|
|
360 |
<p>
|
|
|
361 |
Customizing the content of the cells in your table is done using column
|
|
|
362 |
configurations. The most common formatting-related column configurations
|
|
|
363 |
are:
|
|
|
364 |
</p>
|
|
|
365 |
|
|
|
366 |
<ul>
|
|
|
367 |
<li>
|
|
|
368 |
<code>allowHTML</code> - set this to <code>true</code> if your cell data, <code>emptyCellValue</code>, or
|
|
|
369 |
<code>formatter</code> outputs HTML. By default, cell data is HTML escaped for
|
|
|
370 |
security.
|
|
|
371 |
</li>
|
|
|
372 |
<li>
|
|
|
373 |
<code>emptyCellValue</code> - string to populate cells where no data (empty
|
|
|
374 |
string, <code>undefined</code>, or <code>null</code>) is available in a record.
|
|
|
375 |
</li>
|
|
|
376 |
<li>
|
|
|
377 |
<code>formatter</code> - string or function used to translate the raw record data
|
|
|
378 |
for each cell in a given column into a format better suited to display.
|
|
|
379 |
</li>
|
|
|
380 |
<li>
|
|
|
381 |
<code>nodeFormatter</code> - function used to customize the DOM structure of a
|
|
|
382 |
cell, its row, or its surrounding elements. Use with caution.
|
|
|
383 |
</li>
|
|
|
384 |
</ul>
|
|
|
385 |
|
|
|
386 |
<p>
|
|
|
387 |
When the <code>formatter</code> configuration setting contains a string it will be assumed
|
|
|
388 |
to be the key into the hash of formatting functions at <code>Y.DataTable.BodyView.Formatters</code>.
|
|
|
389 |
If any such function is found, it will be used, otherwise, the string will be
|
|
|
390 |
presumed to be a template which may contain placeholders for data enclosed
|
|
|
391 |
in curly braces. The <code>{value}</code> placeholder would use the value destined for
|
|
|
392 |
the current cell. The values of other fields in the record corresponding
|
|
|
393 |
to the current row can be shown by providing their name enclosed in curly braces.
|
|
|
394 |
These other fields
|
|
|
395 |
don't need to have column definitions of their own, they will simply be read
|
|
|
396 |
from the underlying Model instance.
|
|
|
397 |
</p>
|
|
|
398 |
<p>
|
|
|
399 |
The <code>Y.DataTable.BodyView.Formatters</code> is empty for the developers to provide
|
|
|
400 |
their own formatting functions. A basic set is provided in module
|
|
|
401 |
<code>datatable-formatters</code> that has to be explicitly loaded. Some of these
|
|
|
402 |
named formatters accept extra configuration settings in the column definition,
|
|
|
403 |
as described in their
|
|
|
404 |
<a href="http://yuilibrary.com/yui/docs/api/classes/DataTable.BodyView.Formatters.html">
|
|
|
405 |
API docs</a>.
|
|
|
406 |
</p>
|
|
|
407 |
<p>
|
|
|
408 |
<code>formatter</code> functions are expected to return the string content to populate each
|
|
|
409 |
cell in that column, and <code>nodeFormatter</code>s are provided with the cell Nodes
|
|
|
410 |
and expected to populate them using the Node API.
|
|
|
411 |
</p>
|
|
|
412 |
|
|
|
413 |
<p>
|
|
|
414 |
For best performance, <strong><a href="#formatter-vs-nodeformatter">avoid
|
|
|
415 |
<code>nodeFormatter</code>s unless absolutely necessary</a></strong>.
|
|
|
416 |
</p>
|
|
|
417 |
|
|
|
418 |
<pre class="code prettyprint">var columns = [
|
|
|
419 |
{
|
|
|
420 |
key: 'item',
|
|
|
421 |
formatter: '<a href="#{value}">{value}</a>',
|
|
|
422 |
allowHTML: true // Must be set or the html will be escaped
|
|
|
423 |
},
|
|
|
424 |
{
|
|
|
425 |
key: 'cost',
|
|
|
426 |
formatter: '${value}' // formatter template string
|
|
|
427 |
},
|
|
|
428 |
{
|
|
|
429 |
key: 'price',
|
|
|
430 |
formatter: function (o) {
|
|
|
431 |
if (o.value > 3) {
|
|
|
432 |
o.className += 'expensive';
|
|
|
433 |
}
|
|
|
434 |
|
|
|
435 |
return '$' + o.value.toFixed(2);
|
|
|
436 |
}
|
|
|
437 |
},
|
|
|
438 |
{
|
|
|
439 |
label: 'profit',
|
|
|
440 |
nodeFormatter: function (o) {
|
|
|
441 |
var profit = o.data.price - o.data.cost,
|
|
|
442 |
prefix = '$',
|
|
|
443 |
row;
|
|
|
444 |
|
|
|
445 |
if (profit < 0) {
|
|
|
446 |
prefix = '-' + prefix;
|
|
|
447 |
profit = Math.abs(profit);
|
|
|
448 |
row = o.cell.ancestor();
|
|
|
449 |
|
|
|
450 |
o.cell.addClass('negative');
|
|
|
451 |
|
|
|
452 |
// Assign a rowspan to the first cell and add a new row
|
|
|
453 |
// below this one to span the last three columns
|
|
|
454 |
row.one('td').setAttribute('rowspan', 2);
|
|
|
455 |
|
|
|
456 |
row.insert(
|
|
|
457 |
'<tr class="auth"><td colspan="3">' +
|
|
|
458 |
'<button class="ok">authorize</button>' +
|
|
|
459 |
'<button class="stop">discontinue</button>' +
|
|
|
460 |
'</td></tr>',
|
|
|
461 |
'after');
|
|
|
462 |
}
|
|
|
463 |
|
|
|
464 |
o.cell.set('text', prefix + profit.toFixed(2));
|
|
|
465 |
}
|
|
|
466 |
}
|
|
|
467 |
];</pre>
|
|
|
468 |
|
|
|
469 |
|
|
|
470 |
<p>This code produces this table:</p>
|
|
|
471 |
|
|
|
472 |
<div id="formatter-example" class="yui3-skin-sam">
|
|
|
473 |
<style scoped>
|
|
|
474 |
.yui3-datatable .yui3-datatable-data .expensive {
|
|
|
475 |
background-color: #ffe;
|
|
|
476 |
}
|
|
|
477 |
.yui3-skin-sam .yui3-datatable-data .auth td {
|
|
|
478 |
border-bottom: 1px dashed #cbcbcb;
|
|
|
479 |
}
|
|
|
480 |
.negative {
|
|
|
481 |
color: #700;
|
|
|
482 |
font-weight: 700;
|
|
|
483 |
}
|
|
|
484 |
tr.auth td {
|
|
|
485 |
text-align: right;
|
|
|
486 |
background-color: #fff;
|
|
|
487 |
border-top: 1px dashed #cbcbcb;
|
|
|
488 |
border-left: 1px solid #cbcbcb;
|
|
|
489 |
padding-right: 5px;
|
|
|
490 |
}
|
|
|
491 |
</style>
|
|
|
492 |
</div>
|
|
|
493 |
|
|
|
494 |
<script>
|
|
|
495 |
YUI().use('datatable-base', function (Y) {
|
|
|
496 |
var columns = [
|
|
|
497 |
{
|
|
|
498 |
key: 'item',
|
|
|
499 |
formatter: '<a href="#{value}">{value}</a>',
|
|
|
500 |
allowHTML: true // Must be set or the html will be escaped
|
|
|
501 |
},
|
|
|
502 |
{
|
|
|
503 |
key: 'cost',
|
|
|
504 |
formatter: '${value}' // formatter template string
|
|
|
505 |
},
|
|
|
506 |
{
|
|
|
507 |
key: 'price',
|
|
|
508 |
formatter: function (o) {
|
|
|
509 |
if (o.value > 10) {
|
|
|
510 |
o.className += 'expensive';
|
|
|
511 |
}
|
|
|
512 |
|
|
|
513 |
return '$' + o.value.toFixed(2);
|
|
|
514 |
}
|
|
|
515 |
},
|
|
|
516 |
{
|
|
|
517 |
label: 'profit',
|
|
|
518 |
nodeFormatter: function (o) {
|
|
|
519 |
var profit = o.data.price - o.data.cost,
|
|
|
520 |
prefix = '$',
|
|
|
521 |
row;
|
|
|
522 |
|
|
|
523 |
if (profit < 0) {
|
|
|
524 |
prefix = '-' + prefix;
|
|
|
525 |
profit = Math.abs(profit);
|
|
|
526 |
row = o.cell.ancestor();
|
|
|
527 |
|
|
|
528 |
o.cell.addClass('negative');
|
|
|
529 |
|
|
|
530 |
row.one('td').setAttribute('rowspan', 2);
|
|
|
531 |
|
|
|
532 |
row.insert(
|
|
|
533 |
'<tr class="auth"><td colspan="3">' +
|
|
|
534 |
'<button class="ok">authorize</button>' +
|
|
|
535 |
'<button class="stop">discontinue</button>' +
|
|
|
536 |
'</td></tr>',
|
|
|
537 |
'after');
|
|
|
538 |
}
|
|
|
539 |
|
|
|
540 |
o.cell.setHTML(prefix + profit.toFixed(2));
|
|
|
541 |
}
|
|
|
542 |
}
|
|
|
543 |
];
|
|
|
544 |
|
|
|
545 |
var data = [
|
|
|
546 |
{ item: "widget", cost: 23.57, price: 47.5 },
|
|
|
547 |
{ item: "gadget", cost: 0.11, price: 6.99 },
|
|
|
548 |
{ item: "sprocket", cost: 4.08, price: 3.75 },
|
|
|
549 |
{ item: "nut", cost: 0.01, price: 0.25 }
|
|
|
550 |
];
|
|
|
551 |
|
|
|
552 |
var table = new Y.DataTable({
|
|
|
553 |
columns: columns,
|
|
|
554 |
data : data
|
|
|
555 |
}).render("#formatter-example");
|
|
|
556 |
});
|
|
|
557 |
</script>
|
|
|
558 |
|
|
|
559 |
<p>
|
|
|
560 |
The parameters passed to <code>formatter</code> functions and <code>nodeFormatter</code>
|
|
|
561 |
functions are described in <a href="#formatter-props">Appendix B</a> and <a
|
|
|
562 |
href="#nodeformatter-props">Appendix C</a>, respectively. Also look for
|
|
|
563 |
what can be passed in to the columns in
|
|
|
564 |
<a href="#column-config">Appendix A</a>.
|
|
|
565 |
</p>
|
|
|
566 |
|
|
|
567 |
<p>
|
|
|
568 |
<strong>Note</strong>: It's highly recommended to keep the data in the
|
|
|
569 |
underlying <code>data</code> ModelList as pure data, free from presentational
|
|
|
570 |
concerns. For example, use real numbers, not numeric strings, and store
|
|
|
571 |
link urls and labels either in separate data fields or in a single data
|
|
|
572 |
field, but as separate properties of a value object. This allows the data
|
|
|
573 |
to be used for calculations such as sorting or averaging.
|
|
|
574 |
</p>
|
|
|
575 |
|
|
|
576 |
<h4 id="formatter-function">Setting content with <code>formatter</code> functions</h4>
|
|
|
577 |
|
|
|
578 |
<p>
|
|
|
579 |
Set the cell content with column <code>formatter</code>s by returning the desired
|
|
|
580 |
content string from the function. Alternately, just update <code>o.value</code> with
|
|
|
581 |
the new value in the object passed as an argument to the <code>formatter</code>. When
|
|
|
582 |
updating <code>o.value</code> <em>do not include a return statement</em>.
|
|
|
583 |
</p>
|
|
|
584 |
|
|
|
585 |
<p>
|
|
|
586 |
<code>formatters</code> are very powerful because not only do they have access to the
|
|
|
587 |
record's value for that column's field, but they also receive the rest of
|
|
|
588 |
the record's data, the record Model instance itself, and the column
|
|
|
589 |
configuration object. This allows you to include any extra configurations
|
|
|
590 |
in your column configuration that might be useful to customizing how cells
|
|
|
591 |
in the column are rendered.
|
|
|
592 |
</p>
|
|
|
593 |
|
|
|
594 |
<pre class="code prettyprint">function currency(o) {
|
|
|
595 |
return Y.DataType.Number.format(o.value, {
|
|
|
596 |
prefix : o.column.currencySymbol || '$',
|
|
|
597 |
decimalPlaces : o.column.decimalPlaces || 2,
|
|
|
598 |
decimalSeparator : o.column.decimalSeparator || '.',
|
|
|
599 |
thousandsSeparator: o.column.thousandsSeparator || ','
|
|
|
600 |
});
|
|
|
601 |
}
|
|
|
602 |
|
|
|
603 |
var cols = [
|
|
|
604 |
{ key: "price", formatter: currency, decimalPlaces: 3 },
|
|
|
605 |
...</pre>
|
|
|
606 |
|
|
|
607 |
<p>
|
|
|
608 |
If such a formatter will be used regularly, it is best to store it in the
|
|
|
609 |
<code>Y.DataTable.BodyView.Formatters</code> hash. The formatter can later be used
|
|
|
610 |
by its name.
|
|
|
611 |
</p>
|
|
|
612 |
<p>
|
|
|
613 |
Named formatters are structured slightly differently in
|
|
|
614 |
order to improve performance:
|
|
|
615 |
</p>
|
|
|
616 |
<pre class="code prettyprint">Y.DataTable.BodyView.Formatters.currency = function (col) {
|
|
|
617 |
// This is done just once per rendering cycle:
|
|
|
618 |
var fn = Y.DataType.Number.format,
|
|
|
619 |
format = {
|
|
|
620 |
prefix : col.currencySymbol || '$',
|
|
|
621 |
decimalPlaces : col.decimalPlaces || 2,
|
|
|
622 |
decimalSeparator : col.decimalSeparator || '.',
|
|
|
623 |
thousandsSeparator: col.thousandsSeparator || ','
|
|
|
624 |
};
|
|
|
625 |
return function (o) {
|
|
|
626 |
// This is done once per row:
|
|
|
627 |
return fn(o.value, format);
|
|
|
628 |
}
|
|
|
629 |
}</pre>
|
|
|
630 |
|
|
|
631 |
<p>
|
|
|
632 |
The function stored in the <code>Formatters</code> table is not the formatter function
|
|
|
633 |
itself, instead, it returns the formatting function. The outer function is called just
|
|
|
634 |
once per rendering cycle and does any preliminary setup usually based on the
|
|
|
635 |
column configuration which it receives as its only argument, storing any
|
|
|
636 |
information in local variables. The returned formatting function is then
|
|
|
637 |
run once per row accessing all the setup information via closure.
|
|
|
638 |
</p>
|
|
|
639 |
<p>
|
|
|
640 |
An optional <code>datatable-formatters</code> module provides
|
|
|
641 |
a collection of such formatters.
|
|
|
642 |
See the <a href="../api/classes/DataTable.BodyView.Formatters.html">API docs</a>
|
|
|
643 |
for more information on them.
|
|
|
644 |
</p>
|
|
|
645 |
<p>
|
|
|
646 |
See <a href="#formatter-props">Appendix B</a> for a list of all properties
|
|
|
647 |
passed to <code>formatter</code> functions.
|
|
|
648 |
</p>
|
|
|
649 |
|
|
|
650 |
<h4 id="nodeformatters">Setting content with <code>nodeFormatter</code> functions</h4>
|
|
|
651 |
|
|
|
652 |
<p>
|
|
|
653 |
Unlike <code>formatters</code> which can effectively default to the normal rendering
|
|
|
654 |
logic by leaving <code>o.value</code> unchanged, <code>nodeFormatters</code> must assign content
|
|
|
655 |
to the cells themselves. The cell's initial classes will be set up, but
|
|
|
656 |
that's it. Everything else is your responsibility.
|
|
|
657 |
</p>
|
|
|
658 |
|
|
|
659 |
<p>
|
|
|
660 |
<strong><code>nodeFormatter</code>s should return <code>false</code></strong>.
|
|
|
661 |
<a href="formatter-vs-nodeformatter">See below</a> for details.
|
|
|
662 |
</p>
|
|
|
663 |
|
|
|
664 |
<p>
|
|
|
665 |
While there are <a href="#formatter-vs-nodeformatter">few scenarios that
|
|
|
666 |
require <code>nodeFormatter</code>s</a>, they do have the benefits of having the Node
|
|
|
667 |
API for constructing more complex DOM subtrees and the ability to access
|
|
|
668 |
all nodes in the <code><tbody></code>. This means they can reference, and even modify,
|
|
|
669 |
cells in other rows.
|
|
|
670 |
</p>
|
|
|
671 |
|
|
|
672 |
<p>
|
|
|
673 |
Like <code>formatters</code>, <code>nodeFormatters</code> are provided with the data field value,
|
|
|
674 |
the record data, the record Model instance, and the column configuration
|
|
|
675 |
object.
|
|
|
676 |
</p>
|
|
|
677 |
|
|
|
678 |
<p>
|
|
|
679 |
See <a href="#nodeformatter-props">Appendix C</a> for a list of all
|
|
|
680 |
properties passed to <code>nodeFormatter</code> functions.
|
|
|
681 |
</p>
|
|
|
682 |
|
|
|
683 |
<h4 id="formatter-vs-nodeformatter">Why <code>formatter</code> and <code>nodeFormatter</code>?</h4>
|
|
|
684 |
|
|
|
685 |
<p>
|
|
|
686 |
For good rendering performance and memory management, DataTable creates
|
|
|
687 |
table content by assembling <code>innerHTML</code> strings from templates, with
|
|
|
688 |
<code>{placeholder}</code> tokens replaced with your data. However, this means that
|
|
|
689 |
the Nodes don't exist yet when a column's <code>formatter</code>s are applied.
|
|
|
690 |
</p>
|
|
|
691 |
|
|
|
692 |
<p>
|
|
|
693 |
To minimize the need to create Nodes for each cell, the default rendering
|
|
|
694 |
logic supports the addition of cell classes as well as row classes via
|
|
|
695 |
<code>formatter</code> functions. Event subscriptions should be
|
|
|
696 |
<a href="http://yuilibrary.com/yui/docs/event/delegation.html">delegated</a>
|
|
|
697 |
from the DataTable instance itself using the
|
|
|
698 |
<a href="http://yuilibrary.com/yui/docs/api/classes/DataTable.html#method_delegate"><code>delegate()</code> method</a>.
|
|
|
699 |
</p>
|
|
|
700 |
|
|
|
701 |
<p>
|
|
|
702 |
On the rare occasion that you <em>must</em> use Nodes to supply the cell
|
|
|
703 |
data, DataTable allows a second pass over the generated DOM elements once
|
|
|
704 |
the initial string concatenation has been completed and the full HTML
|
|
|
705 |
content created.
|
|
|
706 |
</p>
|
|
|
707 |
|
|
|
708 |
<p>
|
|
|
709 |
It is important to note that <code>nodeFormatters</code> will necessarily create a
|
|
|
710 |
Node instance for each cell in that column, which will increase the memory
|
|
|
711 |
footprint of your application. If the Node instance wrappers around the
|
|
|
712 |
DOM elements don't need to be maintained beyond the life of the
|
|
|
713 |
<code>nodeFormatter</code>, return <code>false</code> to remove them from the internal object
|
|
|
714 |
cache. <strong>This will not remove the rendered DOM, but it will remove
|
|
|
715 |
event subscriptions made on those Nodes</strong>.
|
|
|
716 |
</p>
|
|
|
717 |
|
|
|
718 |
<p>
|
|
|
719 |
In general, <code>nodeFormatter</code>s should only be used if absolutely necessary,
|
|
|
720 |
and should <em>always return <code>false</code></em>.
|
|
|
721 |
</p>
|
|
|
722 |
|
|
|
723 |
<h4 id="formatters-vs-empty">Formatters vs. <code>emptyCellValue</code></h4>
|
|
|
724 |
|
|
|
725 |
<p>
|
|
|
726 |
The <code>emptyCellValue</code> configuration is useful to provide fallback content in
|
|
|
727 |
the case of missing or empty column data, but it interacts with each type of
|
|
|
728 |
formatter differently.
|
|
|
729 |
</p>
|
|
|
730 |
|
|
|
731 |
<p>
|
|
|
732 |
String formatters will only be applied if the field data for that cell is
|
|
|
733 |
not <code>undefined</code>. This allows the <code>emptyCellValue</code> to populate the cell.
|
|
|
734 |
</p>
|
|
|
735 |
|
|
|
736 |
<p>
|
|
|
737 |
Function formatters are applied before the return value or (potentially
|
|
|
738 |
altered) <code>o.value</code> property is tested for <code>undefined</code>, <code>null</code>, or the empty
|
|
|
739 |
string. In any of these cases, the <code>emptyCellValue</code> populates the cell.
|
|
|
740 |
</p>
|
|
|
741 |
|
|
|
742 |
<p>
|
|
|
743 |
The <code>emptyCellValue</code> configuration is ignored by columns configured with
|
|
|
744 |
<code>nodeFormatter</code>s.
|
|
|
745 |
</p>
|
|
|
746 |
|
|
|
747 |
|
|
|
748 |
<h2 id="data">Table Data Configuration</h2>
|
|
|
749 |
|
|
|
750 |
<p>
|
|
|
751 |
Each record in the table is stored as a
|
|
|
752 |
<a href="../model/index.html">Model</a> instance, where the
|
|
|
753 |
keys of the record objects become Model attributes. This allows you to
|
|
|
754 |
interact with the models as you would any other <a
|
|
|
755 |
href="../base/index.html">Base</a>-based class, with <code>get(attr)</code>,
|
|
|
756 |
<code>set(attr, value)</code>, and subscribing to attribute change events.
|
|
|
757 |
</p>
|
|
|
758 |
|
|
|
759 |
<pre class="code prettyprint">var data = [
|
|
|
760 |
{ item: "widget", cost: 23.57, price: 47.5 },
|
|
|
761 |
{ item: "gadget", cost: 0.11, price: 6.99 },
|
|
|
762 |
{ item: "sprocket", cost: 4.08, price: 3.75 },
|
|
|
763 |
{ item: "nut", cost: 0.01, price: 0.25 }
|
|
|
764 |
];
|
|
|
765 |
|
|
|
766 |
var table = new Y.DataTable({
|
|
|
767 |
columns: ["item", "cost", "price"],
|
|
|
768 |
data: data
|
|
|
769 |
});
|
|
|
770 |
|
|
|
771 |
var sprocket = table.getRecord(2);
|
|
|
772 |
|
|
|
773 |
// Fires a costChange event, and the table is updated if rendered
|
|
|
774 |
sprocket.set('cost', 2.65);</pre>
|
|
|
775 |
|
|
|
776 |
|
|
|
777 |
<p>
|
|
|
778 |
The Model class used to store the record data is created for you, based on
|
|
|
779 |
the objects in the <code>data</code> array. If <code>data</code> is not set, the column keys
|
|
|
780 |
identified in the <code>columns</code> configuration is used.
|
|
|
781 |
</p>
|
|
|
782 |
|
|
|
783 |
<h3 id="recordtype">Specifying the Record Model</h3>
|
|
|
784 |
|
|
|
785 |
<p>
|
|
|
786 |
To use a custom Model for your records, pass your Model subclass to the
|
|
|
787 |
<code>recordType</code> attribute.
|
|
|
788 |
</p>
|
|
|
789 |
|
|
|
790 |
<pre class="code prettyprint">var pieTable = new Y.DataTable({
|
|
|
791 |
recordType: Y.PieModel,
|
|
|
792 |
columns: ['slices', 'type'],
|
|
|
793 |
data: [
|
|
|
794 |
// Y.PieModel has attributes 'slices', which defaults to 6, and 'type',
|
|
|
795 |
// which defaults to 'apple'. Records can use these defaults.
|
|
|
796 |
{ type: 'lemon meringue' },
|
|
|
797 |
{ type: 'chocolate creme', slices: 8 },
|
|
|
798 |
{} // equivalent to { type: 'apple', slices: 6 }
|
|
|
799 |
]
|
|
|
800 |
});
|
|
|
801 |
|
|
|
802 |
// Y.PieModel has its idAttribute assigned to 'type', overriding the default
|
|
|
803 |
// of 'id'. Fetch a PieModel by its id.
|
|
|
804 |
var applePie = pieTable.getRecord('apple');
|
|
|
805 |
|
|
|
806 |
// eatSlice is a method on the Y.PieModel prototype
|
|
|
807 |
applePie.eatSlice();</pre>
|
|
|
808 |
|
|
|
809 |
|
|
|
810 |
<p>
|
|
|
811 |
Alternately, <code>recordType</code> will accept an array of attribute strings or an
|
|
|
812 |
<code>ATTRS</code> configuration object to make it easier to create custom attribute
|
|
|
813 |
behaviors without needing to explicitly build the Model subclass.
|
|
|
814 |
</p>
|
|
|
815 |
|
|
|
816 |
<p>
|
|
|
817 |
If the <code>columns</code> configuration is omitted, but the <code>recordType</code> is set, the
|
|
|
818 |
<code>columns</code> will default to the <code>recordType</code>'s attributes.
|
|
|
819 |
</p>
|
|
|
820 |
|
|
|
821 |
<pre class="code prettyprint">var data = [
|
|
|
822 |
{ item: "widget", cost: 23.57, price: 47.5 },
|
|
|
823 |
{ item: "gadget", cost: 0.11, price: 6.99 },
|
|
|
824 |
{ item: "sprocket", cost: 4.08, price: 3.75 },
|
|
|
825 |
{ item: "nut", cost: 0.01, price: 0.25 }
|
|
|
826 |
];
|
|
|
827 |
|
|
|
828 |
// Effectively synonymous with setting the columns attribute if no special
|
|
|
829 |
// column configuration is needed.
|
|
|
830 |
var table = new Y.DataTable({
|
|
|
831 |
recordType: [ 'item', 'cost', 'price' ],
|
|
|
832 |
data: data
|
|
|
833 |
});
|
|
|
834 |
|
|
|
835 |
// Or for more control, pass an ATTRS configuration object
|
|
|
836 |
var table = new Y.DataTable({
|
|
|
837 |
recordType: {
|
|
|
838 |
item: {},
|
|
|
839 |
cost: {
|
|
|
840 |
value: 0,
|
|
|
841 |
setter: function (val) { return +val || 0; }
|
|
|
842 |
},
|
|
|
843 |
price: {
|
|
|
844 |
valueFn: function () { return (this.get('cost') + 0.1) * 10; },
|
|
|
845 |
setter: function (val) { return +val || 0; }
|
|
|
846 |
}
|
|
|
847 |
},
|
|
|
848 |
data: data
|
|
|
849 |
});</pre>
|
|
|
850 |
|
|
|
851 |
|
|
|
852 |
<p>
|
|
|
853 |
When the table data is loaded asychronously, it is often a good idea to
|
|
|
854 |
configure the <code>recordType</code>. This can prevent the generation of a record
|
|
|
855 |
Model that is missing fields that are omitted from the <code>columns</code>
|
|
|
856 |
configuration because they aren't intended for viewing.
|
|
|
857 |
</p>
|
|
|
858 |
|
|
|
859 |
<h3 id="modellist">The <code>data</code> ModelList</h3>
|
|
|
860 |
|
|
|
861 |
<p>
|
|
|
862 |
The record Models are stored in a
|
|
|
863 |
<a href="../model-list/index.html">ModelList</a>, which is assigned to the
|
|
|
864 |
<code>data</code> <em>property</em> on the instance (for easier access than going through <code>table.get('data')</code>).
|
|
|
865 |
</p>
|
|
|
866 |
|
|
|
867 |
<pre class="code prettyprint">var records = [
|
|
|
868 |
{ item: "widget", cost: 23.57, price: 47.5 },
|
|
|
869 |
{ item: "gadget", cost: 0.11, price: 6.99 },
|
|
|
870 |
{ item: "sprocket", cost: 4.08, price: 3.75 }
|
|
|
871 |
];
|
|
|
872 |
|
|
|
873 |
var table = new Y.DataTable({
|
|
|
874 |
columns: ["item", "cost", "price"],
|
|
|
875 |
data : records
|
|
|
876 |
});
|
|
|
877 |
|
|
|
878 |
// Add a new Model using the ModelList API. This will fire
|
|
|
879 |
// events and change the table if rendered.
|
|
|
880 |
table.data.add({ item: "nut", cost: 0.01, price: 0.25 });</pre>
|
|
|
881 |
|
|
|
882 |
|
|
|
883 |
<p>
|
|
|
884 |
When assigning the DataTable's <code>data</code> attribute with an array, a ModelList
|
|
|
885 |
is created for you. But you can also pass a ModelList instance if you are
|
|
|
886 |
sharing a ModelList between widgets on the page, or you have created custom
|
|
|
887 |
Model and ModelList classes with additional logic, such as adding a
|
|
|
888 |
<a href="../model-list/#implementing-a-list-sync-layer">data sync layer</a>.
|
|
|
889 |
</p>
|
|
|
890 |
|
|
|
891 |
<pre class="code prettyprint">var table = new Y.DataTable({
|
|
|
892 |
columns: ['type', 'slices'],
|
|
|
893 |
data: new Y.PieList()
|
|
|
894 |
});
|
|
|
895 |
|
|
|
896 |
// The Y.PieList class implements a sync layer, enabling its load() method
|
|
|
897 |
table.data.load(function () {
|
|
|
898 |
table.render('#pies');
|
|
|
899 |
});</pre>
|
|
|
900 |
|
|
|
901 |
|
|
|
902 |
<h3 id="getting-data">Getting Remote Table Data</h3>
|
|
|
903 |
|
|
|
904 |
<p>
|
|
|
905 |
To fetch remote data, you have three options:
|
|
|
906 |
</p>
|
|
|
907 |
|
|
|
908 |
<ol>
|
|
|
909 |
<li>
|
|
|
910 |
<p>
|
|
|
911 |
<strong>For quick one-offs</strong>, you can load and parse the
|
|
|
912 |
data manually, using <code>Y.io(...)</code>, <code>Y.jsonp(...)</code>, etc., then assign
|
|
|
913 |
that data to the DataTable's <code>data</code> attribute. This isn't very
|
|
|
914 |
elegant or maintainable, so is best avoided for anything other than
|
|
|
915 |
proofs of concept.
|
|
|
916 |
</p>
|
|
|
917 |
</li>
|
|
|
918 |
<li>
|
|
|
919 |
<p>
|
|
|
920 |
<strong>For the most control</strong>, better maintainability, and
|
|
|
921 |
better encapsulation of business logic, create Model and ModelList
|
|
|
922 |
subclasses that
|
|
|
923 |
<a href="../model-list/#implementing-a-list-sync-layer">implement a
|
|
|
924 |
sync layer</a> as suggested above.
|
|
|
925 |
</p>
|
|
|
926 |
</li>
|
|
|
927 |
<li>
|
|
|
928 |
<p>
|
|
|
929 |
<strong>For common read-only scenarios</strong>, use the
|
|
|
930 |
<a href="http://yuilibrary.com/yui/docs/api/classes/Plugin.DataTableDataSource.html"><code>Y.Plugin.DataTableDataSource</code></a>
|
|
|
931 |
plugin to bind your table to a
|
|
|
932 |
<a href="../datasource/index.html"><code>DataSource</code></a> instance. Use
|
|
|
933 |
plugins to add DataSource features.
|
|
|
934 |
</p>
|
|
|
935 |
</li>
|
|
|
936 |
</ol>
|
|
|
937 |
|
|
|
938 |
|
|
|
939 |
<pre class="code prettyprint">// Create a JSONP DataSource to query YQL
|
|
|
940 |
var myDataSource = new Y.DataSource.Get({
|
|
|
941 |
source: 'http://query.yahooapis.com/v1/public/yql?format=json&' +
|
|
|
942 |
'env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&q='
|
|
|
943 |
});
|
|
|
944 |
|
|
|
945 |
myDataSource.plug(Y.Plugin.DataSourceJSONSchema, {
|
|
|
946 |
schema: {
|
|
|
947 |
resultListLocator: 'query.results.Result',
|
|
|
948 |
resultFields: [
|
|
|
949 |
'Title',
|
|
|
950 |
'Phone',
|
|
|
951 |
{
|
|
|
952 |
// Important that record fields NOT include ".", so
|
|
|
953 |
// extract nested data with locators
|
|
|
954 |
key: 'Rating',
|
|
|
955 |
locator: "Rating.AverageRating"
|
|
|
956 |
}
|
|
|
957 |
]
|
|
|
958 |
}
|
|
|
959 |
})
|
|
|
960 |
.plug(Y.Plugin.DataSourceCache, {
|
|
|
961 |
max: 3
|
|
|
962 |
});
|
|
|
963 |
|
|
|
964 |
// No data is provided at construction because it will load via the
|
|
|
965 |
// DataTableDataSource plugin
|
|
|
966 |
var table = new Y.DataTable({
|
|
|
967 |
columns: ['Title', 'Phone', 'Rating'],
|
|
|
968 |
summary: 'Pizza places near 98089'
|
|
|
969 |
});
|
|
|
970 |
|
|
|
971 |
table.plug(Y.Plugin.DataTableDataSource, {
|
|
|
972 |
datasource: myDataSource
|
|
|
973 |
})
|
|
|
974 |
|
|
|
975 |
// Initially render an empty table and show a loading message
|
|
|
976 |
table.render('#pizza')
|
|
|
977 |
.showMessage('loadingMessage');
|
|
|
978 |
|
|
|
979 |
// Load the data into the table
|
|
|
980 |
table.datasource.load({
|
|
|
981 |
request: encodeURIComponent(
|
|
|
982 |
'select *' +
|
|
|
983 |
' from local.search' +
|
|
|
984 |
' where zip="94089"' +
|
|
|
985 |
' and query="pizza"');
|
|
|
986 |
});</pre>
|
|
|
987 |
|
|
|
988 |
|
|
|
989 |
<h2 id="features">DataTable Modules and Features</h2>
|
|
|
990 |
|
|
|
991 |
<p>
|
|
|
992 |
For a basic, stripped down <code>Y.DataTable</code> class, include the <code>datatable-base</code>
|
|
|
993 |
module in your <code>use()</code>.
|
|
|
994 |
</p>
|
|
|
995 |
|
|
|
996 |
<p>
|
|
|
997 |
Feature modules, such as <code>datatable-sort</code>, will bring in <code>datatable-base</code>
|
|
|
998 |
automatically. By including only feature modules in your <code>use()</code>, you will
|
|
|
999 |
get a <code>Y.DataTable</code> that supports specifically those features, without
|
|
|
1000 |
extra code for other features you won't be using.
|
|
|
1001 |
</p>
|
|
|
1002 |
|
|
|
1003 |
<p>
|
|
|
1004 |
The <code>datatable</code> module is a bundle of <code>datatable-base</code> plus a set of common
|
|
|
1005 |
feature modules. Other feature modules need to be included explicitly in
|
|
|
1006 |
<code>use()</code>.
|
|
|
1007 |
</p>
|
|
|
1008 |
|
|
|
1009 |
<table>
|
|
|
1010 |
<thead>
|
|
|
1011 |
<tr>
|
|
|
1012 |
<th>Module</th>
|
|
|
1013 |
<th>Description</th>
|
|
|
1014 |
<th>In <code>datatable</code>?</th>
|
|
|
1015 |
</tr>
|
|
|
1016 |
</thead>
|
|
|
1017 |
<tbody>
|
|
|
1018 |
<tr>
|
|
|
1019 |
<td><a href="http://yuilibrary.com/yui/docs/api/modules/datatable-core.html"><code>datatable-core</code></a></td>
|
|
|
1020 |
<td>
|
|
|
1021 |
The core API for DataTable, implemented as a class extension, used
|
|
|
1022 |
by <code>datatable-base</code> to create <code>Y.DataTable</code> and <code>Y.DataTable.Base</code>.
|
|
|
1023 |
</td>
|
|
|
1024 |
<td>yes</td>
|
|
|
1025 |
</tr>
|
|
|
1026 |
<tr>
|
|
|
1027 |
<td><a href="http://yuilibrary.com/yui/docs/api/modules/datatable-base.html"><code>datatable-base</code></a></td>
|
|
|
1028 |
<td>
|
|
|
1029 |
Creates the <code>Y.DataTable</code> and <code>Y.DataTable.Base</code> classes, and
|
|
|
1030 |
defaults the <code>headerView</code> and <code>bodyView</code> to <code>Y.DataTable.HeaderView</code>
|
|
|
1031 |
and <code>Y.DataTable.BodyView</code> respectively.
|
|
|
1032 |
</td>
|
|
|
1033 |
<td>yes</td>
|
|
|
1034 |
</tr>
|
|
|
1035 |
<tr>
|
|
|
1036 |
<td><a href="http://yuilibrary.com/yui/docs/api/modules/datatable-head.html"><code>datatable-head</code></a></td>
|
|
|
1037 |
<td>
|
|
|
1038 |
Creates the <code>Y.DataTable.HeaderView</code> class as a subclass of
|
|
|
1039 |
<code>Y.View</code>. DataTable defers rendering of the <code><thead></code> content to
|
|
|
1040 |
this View when it is passed as the DataTable's <code>headerView</code>
|
|
|
1041 |
attribute (the default, as set by <code>datatable-base</code>).
|
|
|
1042 |
</td>
|
|
|
1043 |
<td>yes</td>
|
|
|
1044 |
</tr>
|
|
|
1045 |
<tr>
|
|
|
1046 |
<td><a href="http://yuilibrary.com/yui/docs/api/modules/datatable-body.html"><code>datatable-body</code></a></td>
|
|
|
1047 |
<td>
|
|
|
1048 |
Creates the <code>Y.DataTable.BodyView</code> class as a subclass of
|
|
|
1049 |
<code>Y.View</code>. DataTable defers rendering of the <code><tbody></code> content to
|
|
|
1050 |
this View when it is passed as the DataTable's <code>bodyView</code>
|
|
|
1051 |
attribute (the default, as set by <code>datatable-base</code>).
|
|
|
1052 |
</td>
|
|
|
1053 |
<td>yes</td>
|
|
|
1054 |
</tr>
|
|
|
1055 |
<tr>
|
|
|
1056 |
<td><a href="http://yuilibrary.com/yui/docs/api/modules/datatable-message.html"><code>datatable-message</code></a></td>
|
|
|
1057 |
<td>
|
|
|
1058 |
Creates the <code>Y.DataTable.Message</code> class extension and adds
|
|
|
1059 |
<code>showMessage</code> and <code>hideMessage</code> methods to <code>Y.DataTable</code>.
|
|
|
1060 |
</td>
|
|
|
1061 |
<td>yes</td>
|
|
|
1062 |
</tr>
|
|
|
1063 |
<tr>
|
|
|
1064 |
<td><a href="http://yuilibrary.com/yui/docs/api/modules/datatable-column-widths.html"><code>datatable-column-widths</code></a></td>
|
|
|
1065 |
<td>
|
|
|
1066 |
Creates the <code>Y.DataTable.ColumnWidths</code> class extension, and adds
|
|
|
1067 |
support for the <code>width</code> property in column configuration objects
|
|
|
1068 |
to <code>Y.DataTable</code>.
|
|
|
1069 |
</td>
|
|
|
1070 |
<td>yes</td>
|
|
|
1071 |
</tr>
|
|
|
1072 |
<tr>
|
|
|
1073 |
<td><a href="http://yuilibrary.com/yui/docs/api/modules/datatable-mutable.html"><code>datatable-mutable</code></a></td>
|
|
|
1074 |
<td>
|
|
|
1075 |
Creates the <code>Y.DataTable.Mutable</code> class extension and adds methods
|
|
|
1076 |
such as <code>addRow</code>, <code>removeRow</code>, and <code>moveColumn</code> to <code>Y.DataTable</code>.
|
|
|
1077 |
</td>
|
|
|
1078 |
<td>yes</td>
|
|
|
1079 |
</tr>
|
|
|
1080 |
<tr>
|
|
|
1081 |
<td><a href="http://yuilibrary.com/yui/docs/api/modules/datatable-sort.html"><code>datatable-sort</code></a></td>
|
|
|
1082 |
<td>
|
|
|
1083 |
Creates the <code>Y.DataTable.Sortable</code> class extension and adds methods
|
|
|
1084 |
<code>sort</code> and <code>toggleSort</code> as well as attributes <code>sortable</code> and
|
|
|
1085 |
<code>sortBy</code> to <code>Y.DataTable</code>. Enables sorting the table rows by
|
|
|
1086 |
clicking on column headers.
|
|
|
1087 |
</td>
|
|
|
1088 |
<td>yes</td>
|
|
|
1089 |
</tr>
|
|
|
1090 |
<tr>
|
|
|
1091 |
<td><a href="http://yuilibrary.com/yui/docs/api/modules/datatable-datasource.html"><code>datatable-datasource</code></a></td>
|
|
|
1092 |
<td>
|
|
|
1093 |
Creates the <code>Y.Plugin.DataTableDataSource</code> plugin for binding a
|
|
|
1094 |
DataSource instance to the table as its source of record data.
|
|
|
1095 |
</td>
|
|
|
1096 |
<td>yes</td>
|
|
|
1097 |
</tr>
|
|
|
1098 |
<tr>
|
|
|
1099 |
<td><a href="http://yuilibrary.com/yui/docs/api/modules/datatable-scroll.html"><code>datatable-scroll</code></a></td>
|
|
|
1100 |
<td>
|
|
|
1101 |
Creates the <code>Y.DataTable.Scroll</code> class extension and adds attribute
|
|
|
1102 |
<code>scrollable</code> to <code>Y.DataTable</code>. Adds support for vertically and/or
|
|
|
1103 |
horizontally scrolling table rows within fixed table dimensions.
|
|
|
1104 |
</td>
|
|
|
1105 |
<td>no</td>
|
|
|
1106 |
</tr>
|
|
|
1107 |
<tr>
|
|
|
1108 |
<td><a href="http://yuilibrary.com/yui/docs/api/modules/datatable-formatters.html"><code>datatable-formatters</code></a></td>
|
|
|
1109 |
<td>
|
|
|
1110 |
Populates <code>Y.DataTable.BodyView.Formatters</code> with a collection of
|
|
|
1111 |
cell formatting functions.
|
|
|
1112 |
</td>
|
|
|
1113 |
<td>no</td>
|
|
|
1114 |
</tr>
|
|
|
1115 |
</tbody>
|
|
|
1116 |
</table>
|
|
|
1117 |
|
|
|
1118 |
<h3 id="base">Features in <code>DataTable.Base</code></h3>
|
|
|
1119 |
|
|
|
1120 |
<p>
|
|
|
1121 |
By including only <code>datatable-base</code> in your <code>use()</code> line, you get both
|
|
|
1122 |
<code>Y.DataTable</code> and <code>Y.DataTable.Base</code> classes. With no other module
|
|
|
1123 |
inclusion, these classes are effectively the same. When additional
|
|
|
1124 |
DataTable related modules are included, those modules' features will
|
|
|
1125 |
usually be added to <code>Y.DataTable</code>, but <strong>never</strong> to
|
|
|
1126 |
<code>Y.DataTable.Base</code>.
|
|
|
1127 |
</p>
|
|
|
1128 |
|
|
|
1129 |
<p>
|
|
|
1130 |
Though it can be instantiated, the purpose of <code>Y.DataTable.Base</code> is
|
|
|
1131 |
primarily as a superclass to a custom DataTable implementation that has a
|
|
|
1132 |
locked set of features that will not be modified, as <code>Y.DataTable</code> can be,
|
|
|
1133 |
by the inclusion of other modules.
|
|
|
1134 |
</p>
|
|
|
1135 |
|
|
|
1136 |
<pre class="code prettyprint">// Create a custom DataTable that includes only the core set of APIs, plus
|
|
|
1137 |
// sorting and message support.
|
|
|
1138 |
Y.MyDataTable = Y.Base.create('myTable', Y.DataTable.Base,
|
|
|
1139 |
[ Y.DataTable.Sortable, Y.DataTable.Message ]);
|
|
|
1140 |
|
|
|
1141 |
Y.use('datatable-scroll', function (Y) {
|
|
|
1142 |
// Y.DataTable now has support for scrolling
|
|
|
1143 |
var table = new Y.DataTable({ scrollable: 'y', ... });
|
|
|
1144 |
|
|
|
1145 |
// Y.MyDataTable does not (the config does nothing)
|
|
|
1146 |
var myTable = new Y.MyDataTable({ scrollable: 'y', ... });
|
|
|
1147 |
});</pre>
|
|
|
1148 |
|
|
|
1149 |
|
|
|
1150 |
<p>
|
|
|
1151 |
<code>Y.DataTable.Base</code> includes the <code>columns</code>, <code>data</code>, <code>caption</code>, and other
|
|
|
1152 |
basic table attributes, the underlying ModelList and View rendering
|
|
|
1153 |
architecture, as well as methods to fetch rows and cells or columns and
|
|
|
1154 |
records.
|
|
|
1155 |
</p>
|
|
|
1156 |
|
|
|
1157 |
<p>
|
|
|
1158 |
Rendering features include most column configurations, such as <code>children</code>
|
|
|
1159 |
and <code>allowHTML</code>, as well as column formatting options <code>formatter</code>,
|
|
|
1160 |
<code>nodeFormatter</code>, <code>cellTemplate</code>, etc.
|
|
|
1161 |
</p>
|
|
|
1162 |
|
|
|
1163 |
<h3 id="datatable-message">Table Messages</h3>
|
|
|
1164 |
|
|
|
1165 |
<p>
|
|
|
1166 |
The <code>datatable-message</code> module adds the ability to display a message in the
|
|
|
1167 |
table body. By default, the "emptyMessage" will display when the table's
|
|
|
1168 |
ModelList has no data records. The message will hide when data is added.
|
|
|
1169 |
</p>
|
|
|
1170 |
|
|
|
1171 |
<pre class="code prettyprint">var table = new Y.DataTable({
|
|
|
1172 |
columns: ["id", "name", "price"],
|
|
|
1173 |
data: []
|
|
|
1174 |
}).render('#example');</pre>
|
|
|
1175 |
|
|
|
1176 |
|
|
|
1177 |
<p>This code produces this table:</p>
|
|
|
1178 |
|
|
|
1179 |
<div id="message-example" class="yui3-skin-sam"></div>
|
|
|
1180 |
|
|
|
1181 |
<script>
|
|
|
1182 |
YUI({ filter: 'raw' }).use('datatable-message', function (Y) {
|
|
|
1183 |
var table = new Y.DataTable({
|
|
|
1184 |
columns: ["id", "name", "price"],
|
|
|
1185 |
data: []
|
|
|
1186 |
}).render('#message-example');
|
|
|
1187 |
});
|
|
|
1188 |
</script>
|
|
|
1189 |
|
|
|
1190 |
<p>
|
|
|
1191 |
Use <code>table.showMessage("message")</code> and <code>table.hideMessage()</code> to toggle the
|
|
|
1192 |
message display.
|
|
|
1193 |
</p>
|
|
|
1194 |
|
|
|
1195 |
<p>
|
|
|
1196 |
<code>showMessage</code> supports internationalized strings by using a few named
|
|
|
1197 |
strings, which are registered in the language packs for the
|
|
|
1198 |
<code>datatable-message</code> module . These strings are currently:
|
|
|
1199 |
</p>
|
|
|
1200 |
|
|
|
1201 |
<ul>
|
|
|
1202 |
<li>
|
|
|
1203 |
<code>table.showMessage("emptyMessage")</code> defaults to "No data to display".
|
|
|
1204 |
</li>
|
|
|
1205 |
<li>
|
|
|
1206 |
<code>table.showMessage("loadingMessage")</code> defaults to "Loading...".
|
|
|
1207 |
</li>
|
|
|
1208 |
</ul>
|
|
|
1209 |
|
|
|
1210 |
<p>
|
|
|
1211 |
Other values passed to <code>showMessage</code> will pass that content directly
|
|
|
1212 |
through to the message Node.
|
|
|
1213 |
</p>
|
|
|
1214 |
|
|
|
1215 |
<h3 id="colwidths">Column Width Configuration</h3>
|
|
|
1216 |
|
|
|
1217 |
<p>
|
|
|
1218 |
The <code>datatable-column-widths</code> module adds basic support for specifying
|
|
|
1219 |
column widths.
|
|
|
1220 |
</p>
|
|
|
1221 |
|
|
|
1222 |
<pre class="code prettyprint">var table = new Y.DataTable({
|
|
|
1223 |
columns: [
|
|
|
1224 |
{ key: 'item', width: '125px' },
|
|
|
1225 |
{ key: 'cost', formatter: '${value}' },
|
|
|
1226 |
...
|
|
|
1227 |
],
|
|
|
1228 |
data : data
|
|
|
1229 |
}).render("#example");</pre>
|
|
|
1230 |
|
|
|
1231 |
|
|
|
1232 |
<p>This code produces this table:</p>
|
|
|
1233 |
|
|
|
1234 |
<div id="colwidths-example" class="yui3-skin-sam"></div>
|
|
|
1235 |
|
|
|
1236 |
<script>
|
|
|
1237 |
YUI({ filter: 'raw' }).use('datatable-column-widths', function (Y) {
|
|
|
1238 |
var data = [
|
|
|
1239 |
{ item: "widget", cost: 23.57, price: 47.5 },
|
|
|
1240 |
{ item: "gadget", cost: 0.11, price: 6.99 },
|
|
|
1241 |
{ item: "sprocket", cost: 4.08, price: 3.75 },
|
|
|
1242 |
{ item: "nut", cost: 0.01, price: 0.25 }
|
|
|
1243 |
];
|
|
|
1244 |
|
|
|
1245 |
var table = new Y.DataTable({
|
|
|
1246 |
columns: [
|
|
|
1247 |
{ key: 'item', width: '125px' },
|
|
|
1248 |
{ key: 'cost', formatter: '${value}' },
|
|
|
1249 |
{ key: 'price', formatter: '${value}' },
|
|
|
1250 |
{ key: 'profit', formatter: function (o) {
|
|
|
1251 |
var price = o.data.price,
|
|
|
1252 |
cost = o.data.cost;
|
|
|
1253 |
|
|
|
1254 |
return (((price - cost) / cost) * 100).toFixed(2) + '%';
|
|
|
1255 |
}
|
|
|
1256 |
}
|
|
|
1257 |
],
|
|
|
1258 |
data : data
|
|
|
1259 |
}).render("#colwidths-example");
|
|
|
1260 |
});
|
|
|
1261 |
</script>
|
|
|
1262 |
|
|
|
1263 |
<p>
|
|
|
1264 |
<strong>CAVEAT</strong>: Column widths will expand beyond the configured
|
|
|
1265 |
value if column cells contain data that is long and can't line-wrap. Also,
|
|
|
1266 |
column widths may be reduced below the configured value if the table width
|
|
|
1267 |
(by configuring the DataTable's <code>width</code> attribute, or constrained by a
|
|
|
1268 |
narrow containing element) is too narrow to fit all data at the configured
|
|
|
1269 |
widths.
|
|
|
1270 |
</p>
|
|
|
1271 |
|
|
|
1272 |
<p>
|
|
|
1273 |
To force column widths, including cell data truncation and allowing the
|
|
|
1274 |
table to spill beyond its configured or inherited width, wrap the cell
|
|
|
1275 |
content in a <code><div></code> either by configuring the column's <code>formatter</code> or
|
|
|
1276 |
<code>cellTemplate</code>, then assign the <code><div></code>'s CSS style with the desired width
|
|
|
1277 |
(or "inherit"), plus <code>overflow: hidden;</code>. Then set the DataTable column's
|
|
|
1278 |
<code>width</code> configuration accordingly.
|
|
|
1279 |
</p>
|
|
|
1280 |
|
|
|
1281 |
<h3 id="sorting">Column sorting</h3>
|
|
|
1282 |
|
|
|
1283 |
<p>
|
|
|
1284 |
The <code>datatable-sort</code> module adds support for sorting the table rows either
|
|
|
1285 |
through the added APIs or by clicking on the table headers.
|
|
|
1286 |
</p>
|
|
|
1287 |
|
|
|
1288 |
<p>
|
|
|
1289 |
By default, when <code>datatable-sort</code> is included, DataTables will inspects
|
|
|
1290 |
the <code>columns</code> objects, looking for <code>sortable: true</code> to enable table sorting
|
|
|
1291 |
by those columns, triggered by clicking on their respective headers.
|
|
|
1292 |
</p>
|
|
|
1293 |
<pre class="code prettyprint">var cols = [
|
|
|
1294 |
{ key: "Company", sortable: true },
|
|
|
1295 |
{ key: "Phone" },
|
|
|
1296 |
{ key: "Contact", sortable: true }
|
|
|
1297 |
];</pre>
|
|
|
1298 |
|
|
|
1299 |
|
|
|
1300 |
<p>
|
|
|
1301 |
For convenience, you can enable header-click sorting for all columns by
|
|
|
1302 |
setting the <code>sortable</code> attribute to <code>true</code>, or pass an array of column keys
|
|
|
1303 |
to enable just those column's headers.
|
|
|
1304 |
</p>
|
|
|
1305 |
|
|
|
1306 |
<pre class="code prettyprint">// Set all columns to be sortable
|
|
|
1307 |
var table = new Y.DataTable({
|
|
|
1308 |
columns: ["Company", "Phone", "Contact"],
|
|
|
1309 |
data: ...
|
|
|
1310 |
sortable: true
|
|
|
1311 |
}).render("#example");</pre>
|
|
|
1312 |
|
|
|
1313 |
|
|
|
1314 |
<p>This code produces this table:</p>
|
|
|
1315 |
|
|
|
1316 |
<div id="sort-example1" class="yui3-skin-sam"></div>
|
|
|
1317 |
|
|
|
1318 |
<script>
|
|
|
1319 |
YUI({ filter: 'raw' }).use('datatable-sort', function (Y) {
|
|
|
1320 |
var table = new Y.DataTable({
|
|
|
1321 |
columns: ['Company', 'Phone', 'Contact'],
|
|
|
1322 |
data: [
|
|
|
1323 |
{ Company: "Company Bee", Phone: "415-555-1234", Contact: "Sally Spencer"},
|
|
|
1324 |
{ Company: "Acme Company", Phone: "650-555-4444", Contact: "John Jones"},
|
|
|
1325 |
{ Company: "Indutrial Industries", Phone: "408-555-5678", Contact: "Robin Smith"}
|
|
|
1326 |
],
|
|
|
1327 |
sortable: true
|
|
|
1328 |
}).render('#sort-example1');
|
|
|
1329 |
});
|
|
|
1330 |
</script>
|
|
|
1331 |
|
|
|
1332 |
<p>
|
|
|
1333 |
Hold down the <code>shift</code> key while clicking on column headers to subsort by
|
|
|
1334 |
that column. Doing so repeatedly will toggle the subsort direction.
|
|
|
1335 |
</p>
|
|
|
1336 |
|
|
|
1337 |
<p>
|
|
|
1338 |
As long as the <code>datatable-sort</code> module has been included, you will always
|
|
|
1339 |
be able to sort the table data through the API, even by columns that aren't
|
|
|
1340 |
configured to accept header-click sorting.
|
|
|
1341 |
</p>
|
|
|
1342 |
|
|
|
1343 |
<p>
|
|
|
1344 |
When a table is sorted, any new records added to the DataTable's ModelList
|
|
|
1345 |
will be inserted at the proper sorted index, as will the created table
|
|
|
1346 |
rows.
|
|
|
1347 |
</p>
|
|
|
1348 |
|
|
|
1349 |
<p>
|
|
|
1350 |
Disable header-click sorting by setting <code>sortable</code> to <code>false</code>.
|
|
|
1351 |
</p>
|
|
|
1352 |
<p>
|
|
|
1353 |
The default sort order is case insensitive, the sort order can be set to case sensitive
|
|
|
1354 |
by using the <code>caseSensitive</code> attribute, see <a href="#column-config">Appendix A</a> below.
|
|
|
1355 |
</p>
|
|
|
1356 |
|
|
|
1357 |
<h4 id="customsort">Custom Sorting</h4>
|
|
|
1358 |
|
|
|
1359 |
<p>
|
|
|
1360 |
Assign a function to a column's <code>sortFn</code> to support customized sorting. The
|
|
|
1361 |
function will receive the two records being compared and a boolean flag
|
|
|
1362 |
indicating a descending sort was requested.
|
|
|
1363 |
</p>
|
|
|
1364 |
|
|
|
1365 |
<pre class="code prettyprint">var columns = [
|
|
|
1366 |
{
|
|
|
1367 |
key: 'id',
|
|
|
1368 |
label: '&#9679;', // a big dot
|
|
|
1369 |
formatter: function (o) {
|
|
|
1370 |
return o.value ? '' : '&#9679;'; // only new records have a dot
|
|
|
1371 |
},
|
|
|
1372 |
sortable: true,
|
|
|
1373 |
sortFn: function (a, b, desc) {
|
|
|
1374 |
var aid = a.get('id'),
|
|
|
1375 |
bid = b.get('id'),
|
|
|
1376 |
acid = a.get('clientId'),
|
|
|
1377 |
bcid = b.get('clientId'),
|
|
|
1378 |
order = // existing records are equivalent
|
|
|
1379 |
(aid && bid) ? 0 :
|
|
|
1380 |
// new records are grouped apart from existing records
|
|
|
1381 |
(aid && -1) || (bid && 1) ||
|
|
|
1382 |
// new records are sorted by insertion order
|
|
|
1383 |
(acid > bcid) ? 1 : -(acid < bcid);
|
|
|
1384 |
|
|
|
1385 |
return desc ? -order : order;
|
|
|
1386 |
}
|
|
|
1387 |
},
|
|
|
1388 |
...</pre>
|
|
|
1389 |
|
|
|
1390 |
|
|
|
1391 |
<p>
|
|
|
1392 |
The function must return 1, 0, or -1. 1 specifies that the Model passed as
|
|
|
1393 |
the first parameter should sort below the Model passed as the second
|
|
|
1394 |
parameter. -1 for above, and 0 if they are equivalent for the purpose of
|
|
|
1395 |
this sort.
|
|
|
1396 |
</p>
|
|
|
1397 |
|
|
|
1398 |
|
|
|
1399 |
<h4 id="sortapi">Sorting Methods</h4>
|
|
|
1400 |
|
|
|
1401 |
<p>
|
|
|
1402 |
To sort the table in the code, call <code>table.sort(NAME OR KEY)</code>. To
|
|
|
1403 |
toggle the sort direction, call <code>table.toggleSort(NAME OR KEY)</code>.
|
|
|
1404 |
</p>
|
|
|
1405 |
|
|
|
1406 |
<pre class="code prettyprint">// Sorts the table by values in the price field in ascending order
|
|
|
1407 |
table.sort('price');
|
|
|
1408 |
|
|
|
1409 |
// Flips to descending
|
|
|
1410 |
table.toggleSort('price');</pre>
|
|
|
1411 |
|
|
|
1412 |
|
|
|
1413 |
<p>
|
|
|
1414 |
To sort by multiple columns, pass an array of column keys to <code>sort</code> or
|
|
|
1415 |
<code>toggleSort</code>.
|
|
|
1416 |
</p>
|
|
|
1417 |
|
|
|
1418 |
<p>
|
|
|
1419 |
Calling <code>toggleSort</code> with no arguments will reverse all current sort
|
|
|
1420 |
directions. Calling with specific column names or keys will toggle only
|
|
|
1421 |
those columns.
|
|
|
1422 |
</p>
|
|
|
1423 |
|
|
|
1424 |
<pre class="code prettyprint">// Sort first by author, subsort by title in ascending order
|
|
|
1425 |
table.sort(['author', 'title']);
|
|
|
1426 |
|
|
|
1427 |
// Now descending by author then title
|
|
|
1428 |
// same as table.toggleSort(['author', 'title']);
|
|
|
1429 |
table.toggleSort();
|
|
|
1430 |
|
|
|
1431 |
// Now ascending by author, descending by title
|
|
|
1432 |
table.toggleSort('author');</pre>
|
|
|
1433 |
|
|
|
1434 |
|
|
|
1435 |
<p>
|
|
|
1436 |
To specify a sort direction, pass an object instead of a string to <code>sort</code>.
|
|
|
1437 |
The object should have the column name as the key, and sort direction as its
|
|
|
1438 |
value.
|
|
|
1439 |
</p>
|
|
|
1440 |
|
|
|
1441 |
<pre class="code prettyprint">// Explicitly sort by price in descending order
|
|
|
1442 |
table.sort({ price: 'desc' });
|
|
|
1443 |
|
|
|
1444 |
// Each column gets its own object
|
|
|
1445 |
table.sort([{ author: 'desc' }, { title: 'desc' }]);</pre>
|
|
|
1446 |
|
|
|
1447 |
|
|
|
1448 |
<p>
|
|
|
1449 |
Acceptable values for the sort direction are "asc", "desc", 1, and -1. 1 is
|
|
|
1450 |
equivalent to "asc", and -1 to "desc".
|
|
|
1451 |
</p>
|
|
|
1452 |
|
|
|
1453 |
<h4 id="sortby">The <code>sortBy</code> Attribute</h4>
|
|
|
1454 |
|
|
|
1455 |
<p>
|
|
|
1456 |
Every sort operation updates the <code>sortBy</code> attribute. You can also trigger
|
|
|
1457 |
a sort by setting this attribute directly. It accepts the same values as
|
|
|
1458 |
the <code>sort</code> method.
|
|
|
1459 |
</p>
|
|
|
1460 |
|
|
|
1461 |
<pre class="code prettyprint">// Sort by author in descending order, then by title in ascending order
|
|
|
1462 |
table.set('sortBy', [{ author: -1 }, 'title']);</pre>
|
|
|
1463 |
|
|
|
1464 |
|
|
|
1465 |
<p>
|
|
|
1466 |
To specify an initial sort order for your table, assign this attribute
|
|
|
1467 |
during instantiation. This will sort the data as soon as it is added
|
|
|
1468 |
to the table's ModelList.
|
|
|
1469 |
</p>
|
|
|
1470 |
|
|
|
1471 |
<pre class="code prettyprint">// Pre-sort the data
|
|
|
1472 |
var table = new Y.DataTable({
|
|
|
1473 |
columns: ['item', 'cost', 'price'],
|
|
|
1474 |
data: [...],
|
|
|
1475 |
sortBy: { price: -1 }
|
|
|
1476 |
});</pre>
|
|
|
1477 |
|
|
|
1478 |
|
|
|
1479 |
<h4 id="sortevent">The <code>sort</code> Event</h4>
|
|
|
1480 |
|
|
|
1481 |
<p>
|
|
|
1482 |
Clicking on a column header, or calling the <code>sort</code> or <code>toggleSort</code> methods
|
|
|
1483 |
will fire a <code>sort</code> method containing an <code>e.sortBy</code> property that
|
|
|
1484 |
corresponds to the requested sort column and direction. The value will be
|
|
|
1485 |
in either string or object format, depending on how each method was used.
|
|
|
1486 |
</p>
|
|
|
1487 |
|
|
|
1488 |
<p>
|
|
|
1489 |
Preventing the <code>sort</code> event will prevent the <code>sortBy</code> attribute from being
|
|
|
1490 |
updated. Updating the <code>sortBy</code> attribute directly will not fire the <code>sort</code>
|
|
|
1491 |
event, but will still sort the data and update the table.
|
|
|
1492 |
</p>
|
|
|
1493 |
|
|
|
1494 |
<h3 id="mutation">Table Mutation APIs (<code>addRow</code>, etc)</h3>
|
|
|
1495 |
|
|
|
1496 |
<p>
|
|
|
1497 |
The <code>datatable-mutable</code> module adds APIs for adding, removing, and
|
|
|
1498 |
modifying records and columns.
|
|
|
1499 |
</p>
|
|
|
1500 |
|
|
|
1501 |
<h4 id="column-mutation">Column Mutation Methods</h4>
|
|
|
1502 |
|
|
|
1503 |
<p>
|
|
|
1504 |
Use the methods <code>addColumn</code>, <code>removeColumn</code>, <code>modifyColumn</code>, and
|
|
|
1505 |
<code>moveColumn</code> to update the table's configured <code>columns</code>.
|
|
|
1506 |
</p>
|
|
|
1507 |
|
|
|
1508 |
<pre class="code prettyprint">// Insert a column for the profit field in the data records as the third column
|
|
|
1509 |
table.addColumn('profit', 2);
|
|
|
1510 |
|
|
|
1511 |
// Actually, make that the fourth column
|
|
|
1512 |
table.moveColumn('profit', 3);
|
|
|
1513 |
|
|
|
1514 |
// Actually, strike that. Don't show it after all
|
|
|
1515 |
table.removeColumn('profit');
|
|
|
1516 |
|
|
|
1517 |
// Instead, add a formatter to the price column that includes the profit data
|
|
|
1518 |
table.modifyColumn('price', {
|
|
|
1519 |
formatter: function (o) {
|
|
|
1520 |
return o.value + ' (' + (o.data.profit / o.data.cost).toFixed(2) + '%)';
|
|
|
1521 |
}
|
|
|
1522 |
});</pre>
|
|
|
1523 |
|
|
|
1524 |
|
|
|
1525 |
<p>
|
|
|
1526 |
Each column mutation method fires an identically named event. See
|
|
|
1527 |
<a href="http://yuilibrary.com/yui/docs/api/classes/DataTable.html">the API docs</a> for details.
|
|
|
1528 |
</p>
|
|
|
1529 |
|
|
|
1530 |
<h4 id="row-mutation">Row Mutation Methods</h4>
|
|
|
1531 |
|
|
|
1532 |
<p>
|
|
|
1533 |
Use the methods <code>addRow</code>, <code>addRows</code>, <code>removeRow</code>, and <code>modifyRow</code> to update
|
|
|
1534 |
the table's ModelList.
|
|
|
1535 |
</p>
|
|
|
1536 |
|
|
|
1537 |
<pre class="code prettyprint">table.addRow({ item: 'collet', cost: 0.42, price: 2.65 });
|
|
|
1538 |
|
|
|
1539 |
table.addRows([
|
|
|
1540 |
{ item: 'nut', cost: 0.42, price: 2.65 },
|
|
|
1541 |
{ item: 'washer', cost: 0.01, price: 0.08 },
|
|
|
1542 |
{ item: 'bit', cost: 0.19, price: 0.97 }
|
|
|
1543 |
]);
|
|
|
1544 |
|
|
|
1545 |
// Remove table records by their Model, id, clientId, or index
|
|
|
1546 |
table.removeRow(0);
|
|
|
1547 |
|
|
|
1548 |
// Modify a record by passing its id, clientId, or index, followed by an
|
|
|
1549 |
// object with new field values
|
|
|
1550 |
table.modifyRow('record_4', { cost: 0.74 });</pre>
|
|
|
1551 |
|
|
|
1552 |
<p>
|
|
|
1553 |
Everything that's done by these methods can be accomplished through the
|
|
|
1554 |
table's ModelList instance methods, but having methods on the table itself
|
|
|
1555 |
can make the code more readable.
|
|
|
1556 |
</p>
|
|
|
1557 |
|
|
|
1558 |
<pre class="code prettyprint">// Same as table.addRow(...);
|
|
|
1559 |
table.data.add({ item: 'collet', cost: 0.42, price: 2.65 });</pre>
|
|
|
1560 |
|
|
|
1561 |
|
|
|
1562 |
<p>
|
|
|
1563 |
By default, changes made to the table are only local, they don't update the
|
|
|
1564 |
server or other data origin if the data was served remotely. However, if
|
|
|
1565 |
your table's ModelList is built with a sync layer, the mutation methods
|
|
|
1566 |
can also trigger the appropriate sync behavior by passing an additional
|
|
|
1567 |
argument to the methods, an object with the property <code>sync</code> set to <code>true</code>.
|
|
|
1568 |
</p>
|
|
|
1569 |
|
|
|
1570 |
<pre class="code prettyprint">// Tell the server we're down to one slice of apple pie!
|
|
|
1571 |
table.modifyRow('apple', { slices: 1 }, { sync: true });
|
|
|
1572 |
|
|
|
1573 |
// Uh oh, make that 0. No more apple pie :(
|
|
|
1574 |
table.removeRow('apple', { sync: true });</pre>
|
|
|
1575 |
|
|
|
1576 |
|
|
|
1577 |
<p>
|
|
|
1578 |
If all modifications are destined for the server/origin, you can set the
|
|
|
1579 |
<code>autoSync</code> attribute to <code>true</code>, and the row mutation methods will
|
|
|
1580 |
automatically call into the sync layer.
|
|
|
1581 |
</p>
|
|
|
1582 |
|
|
|
1583 |
<pre class="code prettyprint">var pies = new Y.DataTable({
|
|
|
1584 |
columns: ['type', 'slices'],
|
|
|
1585 |
data: new Y.PieList()
|
|
|
1586 |
autoSync: true
|
|
|
1587 |
});
|
|
|
1588 |
|
|
|
1589 |
pies.data.load(function () {
|
|
|
1590 |
|
|
|
1591 |
pies.render('#pie-cart');
|
|
|
1592 |
|
|
|
1593 |
// The new PieModel's save() method is called, notifying the server
|
|
|
1594 |
pies.addRow({ type: 'pecan', slices: 8 });
|
|
|
1595 |
|
|
|
1596 |
// Let us eat some pie!
|
|
|
1597 |
pies.modifyRow('lemon meringue', { slices: 5 });
|
|
|
1598 |
});</pre>
|
|
|
1599 |
|
|
|
1600 |
|
|
|
1601 |
<h3 id="scrolling">Scrolling</h3>
|
|
|
1602 |
|
|
|
1603 |
<p>
|
|
|
1604 |
<strong>Note:</strong> Scrolling is not currently supported on the Android
|
|
|
1605 |
WebKit browser.
|
|
|
1606 |
</p>
|
|
|
1607 |
|
|
|
1608 |
<p>
|
|
|
1609 |
Scrolling functionality can be added to <code>Y.DataTable</code> by including
|
|
|
1610 |
<code>datatable-scroll</code> module in your <code>use()</code>. <code>datatable-scroll</code> is
|
|
|
1611 |
<strong>NOT</strong> included in the <code>datatable</code> rollup module, so must be
|
|
|
1612 |
included separately.
|
|
|
1613 |
</p>
|
|
|
1614 |
|
|
|
1615 |
<p>
|
|
|
1616 |
Enable scrolling by setting the <code>scrollable</code> attribute, which accepts values
|
|
|
1617 |
"x", "y", "xy", <code>true</code> (same as "xy"), or <code>false</code> (the default).
|
|
|
1618 |
</p>
|
|
|
1619 |
|
|
|
1620 |
<p>
|
|
|
1621 |
Note, vertical scrolling also requires the table's <code>height</code> attribute to be
|
|
|
1622 |
set, and horizontal scrolling requires the <code>width</code> to be set.
|
|
|
1623 |
</p>
|
|
|
1624 |
|
|
|
1625 |
<pre class="code prettyprint">// Data from the seafoodwatch YQL table as of 3/16/2012
|
|
|
1626 |
var data = [
|
|
|
1627 |
{ "fish": "Barramundi (Imported Farmed in Open Systems)", "recommendation": "avoid" },
|
|
|
1628 |
{ "fish": "Caviar, Paddlefish (Wild caught from U.S.)", "recommendation": "avoid" },
|
|
|
1629 |
{ "fish": "Caviar, Sturgeon (Imported Wild-caught)", "recommendation": "avoid" },
|
|
|
1630 |
...
|
|
|
1631 |
];
|
|
|
1632 |
|
|
|
1633 |
// Enable vertical scrolling with scrollable "y". The width is also set, but
|
|
|
1634 |
// because scrollable is not "x" or "xy", this just sets the table width.
|
|
|
1635 |
var table = new Y.DataTable({
|
|
|
1636 |
caption: 'Seafood tips for the US West Coast',
|
|
|
1637 |
columns: ['fish', 'recommendation'],
|
|
|
1638 |
data: data,
|
|
|
1639 |
scrollable: "y",
|
|
|
1640 |
height: "200px",
|
|
|
1641 |
width: "400px"
|
|
|
1642 |
}).render("#scroll");</pre>
|
|
|
1643 |
|
|
|
1644 |
|
|
|
1645 |
<p>This code produces this table:</p>
|
|
|
1646 |
|
|
|
1647 |
<div id="scroll-example" class="yui3-skin-sam"></div>
|
|
|
1648 |
|
|
|
1649 |
<script>
|
|
|
1650 |
YUI().use('datatable-scroll', function (Y) {
|
|
|
1651 |
// Data from the seafoodwatch YQL table as of 3/16/2012
|
|
|
1652 |
var data = [
|
|
|
1653 |
{ "fish": "Barramundi (Imported Farmed in Open Systems)", "recommendation": "avoid" },
|
|
|
1654 |
{ "fish": "Caviar, Paddlefish (Wild caught from U.S.)", "recommendation": "avoid" },
|
|
|
1655 |
{ "fish": "Caviar, Sturgeon (Imported Wild-caught)", "recommendation": "avoid" },
|
|
|
1656 |
{ "fish": "Chilean Seabass", "recommendation": "avoid" },
|
|
|
1657 |
{ "fish": "Cobia (Imported Farmed)", "recommendation": "avoid" },
|
|
|
1658 |
{ "fish": "Cod, Atlantic (Trawl-caught from Canadian and U.S. Atlantic)", "recommendation": "avoid" },
|
|
|
1659 |
{ "fish": "Cod, Pacific (Imported)", "recommendation": "avoid" },
|
|
|
1660 |
{ "fish": "Crab, King (Imported)", "recommendation": "avoid" },
|
|
|
1661 |
{ "fish": "Dab, Common (Danish Seine from Iceland)", "recommendation": "avoid" },
|
|
|
1662 |
{ "fish": "Flounder (Wild-caught from U.S. Atlantic, Except Summer Flounder)", "recommendation": "avoid" },
|
|
|
1663 |
{ "fish": "Hake, White", "recommendation": "avoid" },
|
|
|
1664 |
{ "fish": "Halibut, Atlantic (Wild-caught from U.S.)", "recommendation": "avoid" },
|
|
|
1665 |
{ "fish": "Lobster, Caribbean Spiny (Brazil)", "recommendation": "avoid" },
|
|
|
1666 |
{ "fish": "Mahi Mahi (Imported Longline)", "recommendation": "avoid" },
|
|
|
1667 |
{ "fish": "Marlin, Blue (Imported)", "recommendation": "avoid" },
|
|
|
1668 |
{ "fish": "Marlin, Striped", "recommendation": "avoid" },
|
|
|
1669 |
{ "fish": "Monkfish", "recommendation": "avoid" },
|
|
|
1670 |
{ "fish": "Octopus (Philippines)", "recommendation": "avoid" },
|
|
|
1671 |
{ "fish": "Orange Roughy", "recommendation": "avoid" },
|
|
|
1672 |
{ "fish": "Plaice, American (Wild-caught from U.S. Atlantic)", "recommendation": "avoid" },
|
|
|
1673 |
{ "fish": "Pollock, Atlantic (Danish Seine and Trawl from Iceland)", "recommendation": "avoid" },
|
|
|
1674 |
{ "fish": "Salmon (Farmed including Atlantic Except U.S. Farmed in Tank Systems)", "recommendation": "avoid" },
|
|
|
1675 |
{ "fish": "Sardines, Atlantic (Mediterranean)", "recommendation": "avoid" },
|
|
|
1676 |
{ "fish": "Shad, American (U.S. Atlantic Gillnet)", "recommendation": "avoid" },
|
|
|
1677 |
{ "fish": "Shark (Except Common Thresher and Shortfin Mako, from California and Hawaii)", "recommendation": "avoid" },
|
|
|
1678 |
{ "fish": "Shrimp (Imported Farmed Except Thailand Farmed in Fully Reciruclating Systems)", "recommendation": "avoid" },
|
|
|
1679 |
{ "fish": "Shrimp (Imported Wild-Caught Except Canadian)", "recommendation": "avoid" },
|
|
|
1680 |
{ "fish": "Shrimp (Mexico Farmed in Open Systems)", "recommendation": "avoid" },
|
|
|
1681 |
{ "fish": "Skates", "recommendation": "avoid" },
|
|
|
1682 |
{ "fish": "Snapper, Red (U.S. Gulf of Mexico Wild-caught)", "recommendation": "avoid" },
|
|
|
1683 |
{ "fish": "Snapper, Red (Imported Wild-caught)", "recommendation": "avoid" },
|
|
|
1684 |
{ "fish": "Sole (Wild-caught from U.S Atlantic)", "recommendation": "avoid" },
|
|
|
1685 |
{ "fish": "Sturgeon (Imported Wild-caught)", "recommendation": "avoid" },
|
|
|
1686 |
{ "fish": "Swordfish (Imported)", "recommendation": "avoid" }
|
|
|
1687 |
];
|
|
|
1688 |
|
|
|
1689 |
var table = new Y.DataTable({
|
|
|
1690 |
caption: 'Seafood tips for the US West Coast',
|
|
|
1691 |
columns: ['fish', 'recommendation'],
|
|
|
1692 |
data: data,
|
|
|
1693 |
scrollable: "y",
|
|
|
1694 |
height: "200px",
|
|
|
1695 |
width: "400px" // scrollable is not set to x or xy, so no scrolling
|
|
|
1696 |
}).render("#scroll-example");
|
|
|
1697 |
});
|
|
|
1698 |
</script>
|
|
|
1699 |
|
|
|
1700 |
<h2 id="events">DataTable Events</h2>
|
|
|
1701 |
|
|
|
1702 |
<p>
|
|
|
1703 |
DataTable is a composition of supporting class instances and extensions, so
|
|
|
1704 |
to centralize event reporting, it is a bubble target for its <code>data</code>
|
|
|
1705 |
ModelList as well as the View instances used for rendering.
|
|
|
1706 |
</p>
|
|
|
1707 |
|
|
|
1708 |
<p>
|
|
|
1709 |
In other words, some events you may need to subscribe to using an event
|
|
|
1710 |
prefix to be notified. Often, using a wildcard prefix is the simplest
|
|
|
1711 |
method to ensure your subscribers will be notified, even if classes change.
|
|
|
1712 |
</p>
|
|
|
1713 |
|
|
|
1714 |
<pre class="code prettyprint">// The sort event is from an extension, so it originates from DataTable
|
|
|
1715 |
table.after('sort', function (e) { ... });
|
|
|
1716 |
|
|
|
1717 |
// Model changes originate from the record's Model instance, propagate to the
|
|
|
1718 |
// table's ModelList, then finally to the DataTable, so they must be
|
|
|
1719 |
// subscribed with an event prefix. In this case, we'll use a wildcard
|
|
|
1720 |
// prefix.
|
|
|
1721 |
table.after('*:priceChange', function (e) { ... });</pre>
|
|
|
1722 |
|
|
|
1723 |
|
|
|
1724 |
<p>
|
|
|
1725 |
DataTable generates a custom Model class with the "record" event prefix, if
|
|
|
1726 |
you want to be more specific. Otherwise, if your table uses a custom Model
|
|
|
1727 |
class for its <code>recordType</code>, you can prefix Model events with the appropriate
|
|
|
1728 |
prefix.
|
|
|
1729 |
</p>
|
|
|
1730 |
|
|
|
1731 |
<pre class="code prettyprint">// Allow DataTable to generate the Model class automatically
|
|
|
1732 |
var table = new Y.DataTable({
|
|
|
1733 |
columns: ['items', 'cost', 'price'],
|
|
|
1734 |
data: [
|
|
|
1735 |
{ item: "widget", cost: 23.57, price: 47.5 },
|
|
|
1736 |
{ item: "gadget", cost: 0.11, price: 6.99 },
|
|
|
1737 |
...
|
|
|
1738 |
]
|
|
|
1739 |
});
|
|
|
1740 |
|
|
|
1741 |
// generated Model classes have prefix "record"
|
|
|
1742 |
table.after('record:change', function (e) { ... });
|
|
|
1743 |
|
|
|
1744 |
// PieList uses PieModels, which have a prefix of, you guessed it, "pie"
|
|
|
1745 |
var pies = new Y.DataTable({
|
|
|
1746 |
columns: ['type', 'slices'],
|
|
|
1747 |
data: new Y.PieList()
|
|
|
1748 |
});
|
|
|
1749 |
|
|
|
1750 |
pies.on('pie:slicesChange', function (e) {
|
|
|
1751 |
if (e.target.get('type') === 'chocolate creme') {
|
|
|
1752 |
// Oh no you don't!
|
|
|
1753 |
e.preventDefault();
|
|
|
1754 |
}
|
|
|
1755 |
});</pre>
|
|
|
1756 |
|
|
|
1757 |
|
|
|
1758 |
<p>
|
|
|
1759 |
The full list of events is included in <a href="http://yuilibrary.com/yui/docs/api/classes/DataTable.html#events">the DataTable API docs</a>.
|
|
|
1760 |
</p>
|
|
|
1761 |
|
|
|
1762 |
<h2 id="knownissues">Known Issues</h2>
|
|
|
1763 |
|
|
|
1764 |
<ul>
|
|
|
1765 |
<li>
|
|
|
1766 |
Scrolling is
|
|
|
1767 |
<a href="http://yuilibrary.com/projects/yui3/ticket/2529761">not
|
|
|
1768 |
currently supported on Android</a> WebKit browser.
|
|
|
1769 |
</li>
|
|
|
1770 |
<li>
|
|
|
1771 |
Scrolling DataTable
|
|
|
1772 |
<a href="http://yuilibrary.com/projects/yui3/ticket/2531047">may not
|
|
|
1773 |
appear scrollable</a> on iOS browsers or OS X 10.7 depending on the
|
|
|
1774 |
system preference "Show scroll bars" (General).
|
|
|
1775 |
</li>
|
|
|
1776 |
</ul>
|
|
|
1777 |
|
|
|
1778 |
<h2 id="column-config">Appendix A: Column Configurations</h2>
|
|
|
1779 |
|
|
|
1780 |
<p>
|
|
|
1781 |
The properties below are supported in the column configuration objects
|
|
|
1782 |
passed in the <code>columns</code> attribute array.
|
|
|
1783 |
</p>
|
|
|
1784 |
|
|
|
1785 |
<div id="column-config-table" class="yui3-skin-sam">
|
|
|
1786 |
<table>
|
|
|
1787 |
<thead>
|
|
|
1788 |
<tr>
|
|
|
1789 |
<th scope="col">Configuration</th>
|
|
|
1790 |
<th scope="col">Description</th>
|
|
|
1791 |
<th scope="col">Module</th>
|
|
|
1792 |
</tr>
|
|
|
1793 |
</thead>
|
|
|
1794 |
<tbody>
|
|
|
1795 |
<tr>
|
|
|
1796 |
<td>key</td>
|
|
|
1797 |
<td>
|
|
|
1798 |
<pre class="code prettyprint">{ key: 'username' }</pre>
|
|
|
1799 |
|
|
|
1800 |
<p>
|
|
|
1801 |
Binds the column values to the named property in the <code>data</code>.
|
|
|
1802 |
<p>
|
|
|
1803 |
<p>
|
|
|
1804 |
Optional if <code>formatter</code>, <code>nodeFormatter</code>, or <code>cellTemplate</code>
|
|
|
1805 |
is used to populate the content.
|
|
|
1806 |
</p>
|
|
|
1807 |
<p>It should not be set if <code>children</code> is set.</p>
|
|
|
1808 |
<p>
|
|
|
1809 |
The value is used for the <code>_id</code> property unless the <code>name</code>
|
|
|
1810 |
property is also set.
|
|
|
1811 |
</p>
|
|
|
1812 |
</td>
|
|
|
1813 |
<td><code>datatable-base</code></td>
|
|
|
1814 |
</tr>
|
|
|
1815 |
<tr>
|
|
|
1816 |
<td>name</td>
|
|
|
1817 |
<td>
|
|
|
1818 |
<pre class="code prettyprint">{ name: 'fullname', formatter: ... }</pre>
|
|
|
1819 |
|
|
|
1820 |
|
|
|
1821 |
<p>
|
|
|
1822 |
Use this to assign a name to pass to <code>table.getColumn(NAME)</code>
|
|
|
1823 |
or style columns with class "yui3-datatable-col-NAME" if a
|
|
|
1824 |
column isn't assigned a <code>key</code>.
|
|
|
1825 |
</p>
|
|
|
1826 |
<p>
|
|
|
1827 |
The value is used for the <code>_id</code> property.
|
|
|
1828 |
</p>
|
|
|
1829 |
</td>
|
|
|
1830 |
<td><code>datatable-base</code></td>
|
|
|
1831 |
</tr>
|
|
|
1832 |
<tr>
|
|
|
1833 |
<td>field</td>
|
|
|
1834 |
<td>
|
|
|
1835 |
<pre class="code prettyprint">{ field: 'fullname', formatter: ... }</pre>
|
|
|
1836 |
|
|
|
1837 |
|
|
|
1838 |
<p>An alias for <code>name</code> for backward compatibility.</p>
|
|
|
1839 |
</td>
|
|
|
1840 |
<td><code>datatable-base</code></td>
|
|
|
1841 |
</tr>
|
|
|
1842 |
<tr>
|
|
|
1843 |
<td>id</td>
|
|
|
1844 |
<td>
|
|
|
1845 |
<pre class="code prettyprint">{
|
|
|
1846 |
name: 'checkAll',
|
|
|
1847 |
id: 'check-all',
|
|
|
1848 |
label: ...
|
|
|
1849 |
formatter: ...
|
|
|
1850 |
}</pre>
|
|
|
1851 |
|
|
|
1852 |
<p>
|
|
|
1853 |
Overrides the default unique id assigned <code><th id="HERE"></code>.
|
|
|
1854 |
</p>
|
|
|
1855 |
<p>
|
|
|
1856 |
<em>Use this with caution</em>, since it can result in
|
|
|
1857 |
duplicate ids in the DOM.
|
|
|
1858 |
</p>
|
|
|
1859 |
</td>
|
|
|
1860 |
<td><code>datatable-base</code></td>
|
|
|
1861 |
</tr>
|
|
|
1862 |
<tr>
|
|
|
1863 |
<td>label</td>
|
|
|
1864 |
<td>
|
|
|
1865 |
<pre class="code prettyprint">{ key: 'MfgPrtNum', label: 'Part Number' }</pre>
|
|
|
1866 |
|
|
|
1867 |
|
|
|
1868 |
<p>HTML to populate the header <code><th></code> for the column.</p>
|
|
|
1869 |
</td>
|
|
|
1870 |
<td><code>datatable-base</code></td>
|
|
|
1871 |
</tr>
|
|
|
1872 |
<tr>
|
|
|
1873 |
<td>children</td>
|
|
|
1874 |
<td>
|
|
|
1875 |
<p>
|
|
|
1876 |
Used to create stacked headers.
|
|
|
1877 |
<a href="#nested">See the example above</a>.
|
|
|
1878 |
</p>
|
|
|
1879 |
|
|
|
1880 |
<p>
|
|
|
1881 |
Child columns may also contain <code>children</code>. There is no limit
|
|
|
1882 |
to the depth of nesting.
|
|
|
1883 |
</p>
|
|
|
1884 |
|
|
|
1885 |
<p>
|
|
|
1886 |
Columns configured with <code>children</code> are for display only and
|
|
|
1887 |
<strong>should not</strong> be configured with a <code>key</code>.
|
|
|
1888 |
Configurations relating to the display of data, such as
|
|
|
1889 |
<code>formatter</code>, <code>nodeFormatter</code>, <code>emptyCellValue</code>, etc. are
|
|
|
1890 |
ignored.
|
|
|
1891 |
</p>
|
|
|
1892 |
</td>
|
|
|
1893 |
<td><code>datatable-base</code></td>
|
|
|
1894 |
</tr>
|
|
|
1895 |
<tr>
|
|
|
1896 |
<td>abbr</td>
|
|
|
1897 |
<td>
|
|
|
1898 |
<pre class="code prettyprint">{
|
|
|
1899 |
key : 'forecast',
|
|
|
1900 |
label: '1yr Target Forecast',
|
|
|
1901 |
abbr : 'Forecast'
|
|
|
1902 |
}</pre>
|
|
|
1903 |
|
|
|
1904 |
|
|
|
1905 |
<p>Assigns the value <code><th abbr="HERE"></code>.</p>
|
|
|
1906 |
</td>
|
|
|
1907 |
<td><code>datatable-base</code></td>
|
|
|
1908 |
</tr>
|
|
|
1909 |
<tr>
|
|
|
1910 |
<td>title</td>
|
|
|
1911 |
<td>
|
|
|
1912 |
<pre class="code prettyprint">{
|
|
|
1913 |
key : 'forecast',
|
|
|
1914 |
label: '1yr Target Forecast',
|
|
|
1915 |
title: 'Target Forecast for the Next 12 Months'
|
|
|
1916 |
}</pre>
|
|
|
1917 |
|
|
|
1918 |
|
|
|
1919 |
<p>Assigns the value <code><th title="HERE"></code>.</p>
|
|
|
1920 |
</td>
|
|
|
1921 |
<td><code>datatable-base</code></td>
|
|
|
1922 |
</tr>
|
|
|
1923 |
<tr>
|
|
|
1924 |
<td>headerTemplate</td>
|
|
|
1925 |
<td>
|
|
|
1926 |
<pre class="code prettyprint">{
|
|
|
1927 |
headerTemplate:
|
|
|
1928 |
'<th id="{id}" ' +
|
|
|
1929 |
'title="Unread" ' +
|
|
|
1930 |
'class="{className}" ' +
|
|
|
1931 |
'{_id}>&#9679;</th>'
|
|
|
1932 |
}</pre>
|
|
|
1933 |
|
|
|
1934 |
|
|
|
1935 |
<p>
|
|
|
1936 |
Overrides the default
|
|
|
1937 |
<a href="http://yuilibrary.com/yui/docs/api/classes/DataTable.HeaderView.html#property_CELL_TEMPLATE">CELL_TEMPLATE</a>
|
|
|
1938 |
used by <code>Y.DataTable.HeaderView</code> to render the header cell
|
|
|
1939 |
for this column. This is necessary when more control is
|
|
|
1940 |
needed over the markup for the header itself, rather than
|
|
|
1941 |
its content.
|
|
|
1942 |
</p>
|
|
|
1943 |
|
|
|
1944 |
<p>
|
|
|
1945 |
Use the <code>label</code> configuration if you don't need to
|
|
|
1946 |
customize the <code><th></code> iteself.
|
|
|
1947 |
</p>
|
|
|
1948 |
|
|
|
1949 |
<p>
|
|
|
1950 |
Implementers are strongly encouraged to preserve at least
|
|
|
1951 |
the <code>{id}</code> and <code>{_id}</code> placeholders in the custom value.
|
|
|
1952 |
</p>
|
|
|
1953 |
</td>
|
|
|
1954 |
<td><code>datatable-base</code></td>
|
|
|
1955 |
</tr>
|
|
|
1956 |
<tr>
|
|
|
1957 |
<td>cellTemplate</td>
|
|
|
1958 |
<td>
|
|
|
1959 |
<pre class="code prettyprint">{
|
|
|
1960 |
key: 'id',
|
|
|
1961 |
cellTemplate:
|
|
|
1962 |
'<td class="{className}">' +
|
|
|
1963 |
'<input type="checkbox" ' +
|
|
|
1964 |
'id="{content}">' +
|
|
|
1965 |
'</td>'
|
|
|
1966 |
}</pre>
|
|
|
1967 |
|
|
|
1968 |
|
|
|
1969 |
<p>
|
|
|
1970 |
Overrides the default
|
|
|
1971 |
<a href="http://yuilibrary.com/yui/docs/api/classes/DataTable.BodyView.html#property_CELL_TEMPLATE">CELL_TEMPLATE</a>
|
|
|
1972 |
used by <code>Y.DataTable.BodyView</code> to render the data cells
|
|
|
1973 |
for this column. This is necessary when more control is
|
|
|
1974 |
needed over the markup for the <code><td></code> itself, rather than
|
|
|
1975 |
its content.
|
|
|
1976 |
</p>
|
|
|
1977 |
</td>
|
|
|
1978 |
<td><code>datatable-base</code></td>
|
|
|
1979 |
</tr>
|
|
|
1980 |
<tr>
|
|
|
1981 |
<td>formatter</td>
|
|
|
1982 |
<td>
|
|
|
1983 |
<p>
|
|
|
1984 |
Used to customize the content of the data cells for this
|
|
|
1985 |
column.
|
|
|
1986 |
</p>
|
|
|
1987 |
|
|
|
1988 |
<p>
|
|
|
1989 |
<a href="#formatters">See the example above</a>
|
|
|
1990 |
</p>
|
|
|
1991 |
</td>
|
|
|
1992 |
<td><code>datatable-base</code></td>
|
|
|
1993 |
</tr>
|
|
|
1994 |
<tr>
|
|
|
1995 |
<td>nodeFormatter</td>
|
|
|
1996 |
<td>
|
|
|
1997 |
<p>
|
|
|
1998 |
Used to customize the content of the data cells for this
|
|
|
1999 |
column.
|
|
|
2000 |
</p>
|
|
|
2001 |
|
|
|
2002 |
<p>
|
|
|
2003 |
<a href="#formatters">See the example above</a>
|
|
|
2004 |
</p>
|
|
|
2005 |
</td>
|
|
|
2006 |
<td><code>datatable-base</code></td>
|
|
|
2007 |
</tr>
|
|
|
2008 |
<tr>
|
|
|
2009 |
<td>emptyCellValue</td>
|
|
|
2010 |
<td>
|
|
|
2011 |
<pre class="code prettyprint">{
|
|
|
2012 |
key: 'price',
|
|
|
2013 |
emptyCellValue: '???'
|
|
|
2014 |
}</pre>
|
|
|
2015 |
|
|
|
2016 |
|
|
|
2017 |
<p>
|
|
|
2018 |
Provides the default value to populate the cell if the data
|
|
|
2019 |
for that cell is <code>undefined</code>, <code>null</code>, or an empty string.
|
|
|
2020 |
</p>
|
|
|
2021 |
</td>
|
|
|
2022 |
<td><code>datatable-base</code></td>
|
|
|
2023 |
</tr>
|
|
|
2024 |
<tr>
|
|
|
2025 |
<td>allowHTML</td>
|
|
|
2026 |
<td>
|
|
|
2027 |
<pre class="code prettyprint">{
|
|
|
2028 |
key: 'preview',
|
|
|
2029 |
allowHTML: true
|
|
|
2030 |
}</pre>
|
|
|
2031 |
|
|
|
2032 |
|
|
|
2033 |
<p>
|
|
|
2034 |
Skips the security step of HTML escaping the value for cells
|
|
|
2035 |
in this column. This is also necessary if <code>emptyCellValue</code>
|
|
|
2036 |
is set with an HTML string.
|
|
|
2037 |
</p>
|
|
|
2038 |
<p>
|
|
|
2039 |
<code>nodeFormatter</code>s ignore this configuration. If using a
|
|
|
2040 |
<code>nodeFormatter</code>, it is recommended to use
|
|
|
2041 |
<a href="http://yuilibrary.com/yui/docs/api/classes/Escape.html#method_html">Y.Escape.html()</a>
|
|
|
2042 |
on any user supplied content that is to be displayed.
|
|
|
2043 |
</p>
|
|
|
2044 |
</td>
|
|
|
2045 |
<td><code>datatable-base</code></td>
|
|
|
2046 |
</tr>
|
|
|
2047 |
<tr>
|
|
|
2048 |
<td>className</td>
|
|
|
2049 |
<td>
|
|
|
2050 |
<pre class="code prettyprint">{
|
|
|
2051 |
key: 'symbol',
|
|
|
2052 |
className: 'no-hide'
|
|
|
2053 |
}</pre>
|
|
|
2054 |
|
|
|
2055 |
|
|
|
2056 |
<p>
|
|
|
2057 |
A string of CSS classes that will be added to the <code><td></code>'s
|
|
|
2058 |
<code>class</code> attribute.
|
|
|
2059 |
</p>
|
|
|
2060 |
|
|
|
2061 |
<p>
|
|
|
2062 |
Note, all cells will automatically have a class in the
|
|
|
2063 |
form of "yui3-datatable-col-KEY" added to the <code><td></code>, where
|
|
|
2064 |
KEY is the column's configured <code>name</code>, <code>key</code>, or <code>id</code> (in
|
|
|
2065 |
that order of preference).
|
|
|
2066 |
</p>
|
|
|
2067 |
</td>
|
|
|
2068 |
<td><code>datatable-base</code></td>
|
|
|
2069 |
</tr>
|
|
|
2070 |
<tr>
|
|
|
2071 |
<td>width</td>
|
|
|
2072 |
<td>
|
|
|
2073 |
<pre class="code prettyprint">{ key: 'a', width: '400px' },
|
|
|
2074 |
{ key: 'b', width: '10em' }</pre>
|
|
|
2075 |
|
|
|
2076 |
|
|
|
2077 |
<p>
|
|
|
2078 |
Adds a style <code>width</code> setting to an associated <code><col></code>
|
|
|
2079 |
element for the column.
|
|
|
2080 |
</p>
|
|
|
2081 |
|
|
|
2082 |
<p>
|
|
|
2083 |
Note, the assigned width will not truncate cell content, and
|
|
|
2084 |
it will not preserve the configured width if doing so would
|
|
|
2085 |
compromise either the instance's <code>width</code> configuration or
|
|
|
2086 |
the natural width of the table's containing DOM elements.
|
|
|
2087 |
</p>
|
|
|
2088 |
|
|
|
2089 |
<p>
|
|
|
2090 |
If absolute widths are required, it can be accomplished with
|
|
|
2091 |
some custom CSS and the use of a <code>cellTemplate</code>, or
|
|
|
2092 |
<code>formatter</code>. See
|
|
|
2093 |
<a href="http://yuilibrary.com/yui/docs/api/modules/datatable-column-widths.html">the
|
|
|
2094 |
description of <code>datatable-column-widths</code></a> for an example
|
|
|
2095 |
of how to do this.
|
|
|
2096 |
</p>
|
|
|
2097 |
</td>
|
|
|
2098 |
<td><code>datatable-column-widths</code></td>
|
|
|
2099 |
</tr>
|
|
|
2100 |
<tr>
|
|
|
2101 |
<td>sortable</td>
|
|
|
2102 |
<td>
|
|
|
2103 |
<pre class="code prettyprint">{ key: 'lastLogin', sortable: true }</pre>
|
|
|
2104 |
|
|
|
2105 |
|
|
|
2106 |
<p>
|
|
|
2107 |
Used when the instance's <code>sortable</code> attribute is set to
|
|
|
2108 |
"auto" (the default) to determine which columns will support
|
|
|
2109 |
user sorting by clicking on the header.
|
|
|
2110 |
</p>
|
|
|
2111 |
<p>
|
|
|
2112 |
If the instance's <code>key</code> attribute is not set, this
|
|
|
2113 |
configuration is ignored.
|
|
|
2114 |
</p>
|
|
|
2115 |
</td>
|
|
|
2116 |
<td><code>datatable-sort</code></td>
|
|
|
2117 |
</tr>
|
|
|
2118 |
<tr>
|
|
|
2119 |
<td>caseSensitive</td>
|
|
|
2120 |
<td>
|
|
|
2121 |
<pre class="code prettyprint">{ key: 'lastLogin', sortable: true, caseSensitive: true }</pre>
|
|
|
2122 |
|
|
|
2123 |
|
|
|
2124 |
<p>
|
|
|
2125 |
When the instance's <code>caseSensitive</code> attribute is set to
|
|
|
2126 |
"true" the sort order is case sensitive (relevant to string columns only).
|
|
|
2127 |
</p>
|
|
|
2128 |
<p>
|
|
|
2129 |
Case sensitive sort is marginally more efficient and should be considered
|
|
|
2130 |
for large data sets when case insensitive sort is not required.
|
|
|
2131 |
</p>
|
|
|
2132 |
</td>
|
|
|
2133 |
<td><code>datatable-sort</code></td>
|
|
|
2134 |
</tr>
|
|
|
2135 |
<tr>
|
|
|
2136 |
<td>sortFn</td>
|
|
|
2137 |
<td>
|
|
|
2138 |
<pre class="code prettyprint">{
|
|
|
2139 |
label: 'Name',
|
|
|
2140 |
sortFn: function (a, b, desc) {
|
|
|
2141 |
var an = a.get('lname') + b.get('fname'),
|
|
|
2142 |
bn = a.get('lname') + b.get('fname'),
|
|
|
2143 |
order = (an > bn) ? 1 : -(an < bn);
|
|
|
2144 |
|
|
|
2145 |
return desc ? -order : order;
|
|
|
2146 |
},
|
|
|
2147 |
formatter: function (o) {
|
|
|
2148 |
return o.data.lname + ', ' + o.data.fname;
|
|
|
2149 |
}
|
|
|
2150 |
}</pre>
|
|
|
2151 |
|
|
|
2152 |
|
|
|
2153 |
<p>
|
|
|
2154 |
Allows a column to be sorted using a custom algorithm. The
|
|
|
2155 |
function receives three parameters, the first two being the
|
|
|
2156 |
two record Models to compare, and the third being a boolean
|
|
|
2157 |
<code>true</code> if the sort order should be descending.
|
|
|
2158 |
</p>
|
|
|
2159 |
<p>
|
|
|
2160 |
The function should return <code>-1</code> to sort <code>a</code> above <code>b</code>, <code>-1</code>
|
|
|
2161 |
to sort <code>a</code> below <code>b</code>, and <code>0</code> if they are equal. Keep in
|
|
|
2162 |
mind that the order should be reversed when <code>desc</code> is
|
|
|
2163 |
<code>true</code>.
|
|
|
2164 |
</p>
|
|
|
2165 |
<p>
|
|
|
2166 |
The <code>desc</code> parameter is provided to allow <code>sortFn</code>s to
|
|
|
2167 |
always sort certain values above or below others, such as
|
|
|
2168 |
always sorting <code>null</code>s on top.
|
|
|
2169 |
</p>
|
|
|
2170 |
</td>
|
|
|
2171 |
<td><code>datatable-sort</code></td>
|
|
|
2172 |
</tr>
|
|
|
2173 |
<tr>
|
|
|
2174 |
<td>sortDir</td>
|
|
|
2175 |
<td>
|
|
|
2176 |
<p>
|
|
|
2177 |
(<strong>read-only</strong>) If a column is sorted, this
|
|
|
2178 |
will be set to <code>1</code> for ascending order or <code>-1</code> for
|
|
|
2179 |
descending. This configuration is public for inspection,
|
|
|
2180 |
but can't be used during DataTable instantiation to set the
|
|
|
2181 |
sort direction of the column. Use the table's
|
|
|
2182 |
<a href="http://yuilibrary.com/yui/docs/api/classes/DataTable.html#attr_sortBy">sortBy</a>
|
|
|
2183 |
attribute for that.
|
|
|
2184 |
</p>
|
|
|
2185 |
</td>
|
|
|
2186 |
<td><code>datatable-sort</code></td>
|
|
|
2187 |
</tr>
|
|
|
2188 |
<tr>
|
|
|
2189 |
<td>_yuid</td>
|
|
|
2190 |
<td>
|
|
|
2191 |
<p>
|
|
|
2192 |
(<strong>read-only</strong>) The unique identifier assigned
|
|
|
2193 |
to each column. This is used for the <code>id</code> if not set, and
|
|
|
2194 |
the <code>_id</code> if none of <code>name</code>, 'field<code>, </code>key<code>, or </code>id` are
|
|
|
2195 |
set.
|
|
|
2196 |
</p>
|
|
|
2197 |
</td>
|
|
|
2198 |
<td><code>datatable-base</code></td>
|
|
|
2199 |
</tr>
|
|
|
2200 |
<tr>
|
|
|
2201 |
<td>_id</td>
|
|
|
2202 |
<td>
|
|
|
2203 |
<p>
|
|
|
2204 |
(<strong>read-only</strong>) A unique-to-this-instance name
|
|
|
2205 |
used extensively in the rendering process. It is also used
|
|
|
2206 |
to create the column's classname, as the input name
|
|
|
2207 |
<code>table.getColumn(HERE)</code>, and in the column header's
|
|
|
2208 |
<code><th data-yui3-col-id="HERE"></code>.
|
|
|
2209 |
</p>
|
|
|
2210 |
<p>
|
|
|
2211 |
The value is populated by the first of <code>name</code>, <code>field</code>,
|
|
|
2212 |
<code>key</code>, <code>id</code>, or <code>_yuid</code> to have a value. If that value
|
|
|
2213 |
has already been used (such as when multiple columns have
|
|
|
2214 |
the same <code>key</code>), an incrementer is added to the end. For
|
|
|
2215 |
example, two columns with <code>key: "id"</code> will have <code>_id</code>s of
|
|
|
2216 |
"id" and "id2". <code>table.getColumn("id")</code> will return the
|
|
|
2217 |
first column, and <code>table.getColumn("id2")</code> will return the
|
|
|
2218 |
second.
|
|
|
2219 |
</p>
|
|
|
2220 |
</td>
|
|
|
2221 |
<td><code>datatable-base</code></td>
|
|
|
2222 |
</tr>
|
|
|
2223 |
<tr>
|
|
|
2224 |
<td>_colspan</td>
|
|
|
2225 |
<td>
|
|
|
2226 |
<p>
|
|
|
2227 |
(<strong>read-only</strong>) Used by
|
|
|
2228 |
<code>Y.DataTable.HeaderView</code> when building stacked column
|
|
|
2229 |
headers.
|
|
|
2230 |
</p>
|
|
|
2231 |
</td>
|
|
|
2232 |
<td><code>datatable-base</code></td>
|
|
|
2233 |
</tr>
|
|
|
2234 |
<tr>
|
|
|
2235 |
<td>_rowspan</td>
|
|
|
2236 |
<td>
|
|
|
2237 |
<p>
|
|
|
2238 |
(<strong>read-only</strong>) Used by
|
|
|
2239 |
<code>Y.DataTable.HeaderView</code> when building stacked column
|
|
|
2240 |
headers.
|
|
|
2241 |
</p>
|
|
|
2242 |
</td>
|
|
|
2243 |
<td><code>datatable-base</code></td>
|
|
|
2244 |
</tr>
|
|
|
2245 |
<tr>
|
|
|
2246 |
<td>_parent</td>
|
|
|
2247 |
<td>
|
|
|
2248 |
<p>
|
|
|
2249 |
(<strong>read-only</strong>) Assigned to all columns in a
|
|
|
2250 |
column's <code>children</code> collection. References the parent
|
|
|
2251 |
column object.
|
|
|
2252 |
</p>
|
|
|
2253 |
</td>
|
|
|
2254 |
<td><code>datatable-base</code></td>
|
|
|
2255 |
</tr>
|
|
|
2256 |
<tr>
|
|
|
2257 |
<td>_headers</td>
|
|
|
2258 |
<td>
|
|
|
2259 |
<p>
|
|
|
2260 |
(<strong>read-only</strong>) Array of the <code>id</code>s of the
|
|
|
2261 |
column and all parent columns. Used by
|
|
|
2262 |
<code>Y.DataTable.BodyView</code> to populate <code><td headers="THIS"></code>
|
|
|
2263 |
when a cell references more than one header.
|
|
|
2264 |
</p>
|
|
|
2265 |
</td>
|
|
|
2266 |
<td><code>datatable-base</code></td>
|
|
|
2267 |
</tr>
|
|
|
2268 |
</tbody>
|
|
|
2269 |
</table>
|
|
|
2270 |
</div>
|
|
|
2271 |
|
|
|
2272 |
<h2 id="formatter-props">Appendix B: Formatter Argument Properties</h2>
|
|
|
2273 |
|
|
|
2274 |
<p>
|
|
|
2275 |
The properties below are found on the object passed to <code>formatter</code>
|
|
|
2276 |
functions defined in a column configuration. See
|
|
|
2277 |
<a href="#nodeformatter-props">Appendix C</a> for the object properties
|
|
|
2278 |
passed to <code>nodeFormatter</code>s.
|
|
|
2279 |
</p>
|
|
|
2280 |
|
|
|
2281 |
<div id="formatter-props-table" class="yui3-skin-sam">
|
|
|
2282 |
<table>
|
|
|
2283 |
<thead>
|
|
|
2284 |
<tr>
|
|
|
2285 |
<th scope="col">Property</th>
|
|
|
2286 |
<th scope="col">Description</th>
|
|
|
2287 |
</tr>
|
|
|
2288 |
</thead>
|
|
|
2289 |
<tbody>
|
|
|
2290 |
<tr>
|
|
|
2291 |
<td><code>value</code></td>
|
|
|
2292 |
<td>
|
|
|
2293 |
<pre class="code prettyprint">formatter: function (o) {
|
|
|
2294 |
// assumes a numeric value for this column
|
|
|
2295 |
return '$' + o.value.toFixed(2);
|
|
|
2296 |
}</pre>
|
|
|
2297 |
|
|
|
2298 |
|
|
|
2299 |
<p>
|
|
|
2300 |
The raw value from the record Model to populate this cell.
|
|
|
2301 |
Equivalent to <code>o.record.get(o.column.key)</code> or
|
|
|
2302 |
<code>o.data[o.column.key]</code>.
|
|
|
2303 |
</p>
|
|
|
2304 |
</td>
|
|
|
2305 |
</tr>
|
|
|
2306 |
<tr>
|
|
|
2307 |
<td><code>data</code></td>
|
|
|
2308 |
<td>
|
|
|
2309 |
<pre class="code prettyprint">formatter: function (o) {
|
|
|
2310 |
return o.data.lname + ', ' + o.data.fname;
|
|
|
2311 |
}</pre>
|
|
|
2312 |
|
|
|
2313 |
|
|
|
2314 |
<p>
|
|
|
2315 |
The Model data for this row in simple object format.
|
|
|
2316 |
</p>
|
|
|
2317 |
</td>
|
|
|
2318 |
</tr>
|
|
|
2319 |
<tr>
|
|
|
2320 |
<td><code>record</code></td>
|
|
|
2321 |
<td>
|
|
|
2322 |
<pre class="code prettyprint">formatter: function (o) {
|
|
|
2323 |
return '<a href="/service/' + o.record.get('id') + '">' +
|
|
|
2324 |
o.value + '</a>';
|
|
|
2325 |
}</pre>
|
|
|
2326 |
|
|
|
2327 |
|
|
|
2328 |
<p>
|
|
|
2329 |
The Model for this row.
|
|
|
2330 |
</p>
|
|
|
2331 |
</td>
|
|
|
2332 |
</tr>
|
|
|
2333 |
<tr>
|
|
|
2334 |
<td><code>column</code></td>
|
|
|
2335 |
<td>
|
|
|
2336 |
<pre class="code prettyprint">formatter: function (o) {
|
|
|
2337 |
// Use a custom column property
|
|
|
2338 |
var format = o.column.dateFormat || '%D';
|
|
|
2339 |
|
|
|
2340 |
return Y.DataType.Data.format(o.value, format);
|
|
|
2341 |
}</pre>
|
|
|
2342 |
|
|
|
2343 |
|
|
|
2344 |
<p>
|
|
|
2345 |
The column configuration object.
|
|
|
2346 |
</p>
|
|
|
2347 |
</td>
|
|
|
2348 |
</tr>
|
|
|
2349 |
<tr>
|
|
|
2350 |
<td><code>className</code></td>
|
|
|
2351 |
<td>
|
|
|
2352 |
<pre class="code prettyprint">formatter: function (o) {
|
|
|
2353 |
if (o.value < 0) {
|
|
|
2354 |
o.className += 'loss';
|
|
|
2355 |
}
|
|
|
2356 |
}</pre>
|
|
|
2357 |
|
|
|
2358 |
|
|
|
2359 |
<p>
|
|
|
2360 |
A string of class names to add <code><td class="HERE"></code> in
|
|
|
2361 |
addition to the column class and any classes in the
|
|
|
2362 |
column's <code>className</code> configuration.
|
|
|
2363 |
</p>
|
|
|
2364 |
</td>
|
|
|
2365 |
</tr>
|
|
|
2366 |
<tr>
|
|
|
2367 |
<td><code>rowIndex</code></td>
|
|
|
2368 |
<td>
|
|
|
2369 |
<pre class="code prettyprint">formatter: function (o) {
|
|
|
2370 |
return (o.rowIndex + 1) + ' - ' + o.value;
|
|
|
2371 |
}</pre>
|
|
|
2372 |
|
|
|
2373 |
|
|
|
2374 |
<p>
|
|
|
2375 |
The index of the current Model in the ModelList.
|
|
|
2376 |
<em>Typically</em> correlates to the row index as well.
|
|
|
2377 |
</p>
|
|
|
2378 |
</td>
|
|
|
2379 |
</tr>
|
|
|
2380 |
<tr>
|
|
|
2381 |
<td><code>rowClass</code></td>
|
|
|
2382 |
<td>
|
|
|
2383 |
<pre class="code prettyprint">formatter: function (o) {
|
|
|
2384 |
if (o.value < 0) {
|
|
|
2385 |
o.rowClass += 'loss';
|
|
|
2386 |
}
|
|
|
2387 |
}</pre>
|
|
|
2388 |
|
|
|
2389 |
|
|
|
2390 |
<p>
|
|
|
2391 |
A string of css classes to add <code><tr class="HERE"><td...</code>.
|
|
|
2392 |
</p>
|
|
|
2393 |
|
|
|
2394 |
<p>
|
|
|
2395 |
This is useful to avoid the need for <code>nodeFormatter</code>s to add
|
|
|
2396 |
classes to the containing row.
|
|
|
2397 |
</p>
|
|
|
2398 |
</td>
|
|
|
2399 |
</tr>
|
|
|
2400 |
</tbody>
|
|
|
2401 |
</table>
|
|
|
2402 |
</div>
|
|
|
2403 |
|
|
|
2404 |
<h2 id="nodeformatter-props">Appendix C: nodeFormatter Argument Properties</h2>
|
|
|
2405 |
|
|
|
2406 |
<p>
|
|
|
2407 |
The properties below are found on the object passed to <code>nodeFormatter</code>
|
|
|
2408 |
functions defined in a column configuration. See
|
|
|
2409 |
<a href="#formatter-props">Appendix B</a> for the object properties
|
|
|
2410 |
passed to <code>formatter</code>s.
|
|
|
2411 |
</p>
|
|
|
2412 |
|
|
|
2413 |
<pre class="code prettyprint">// Reference nodeFormatter
|
|
|
2414 |
nodeFormatter: function (o) {
|
|
|
2415 |
if (o.value < o.data.quota) {
|
|
|
2416 |
o.td.setAttribute('rowspan', 2);
|
|
|
2417 |
o.td.setAttribute('data-term-id', this.record.get('id'));
|
|
|
2418 |
|
|
|
2419 |
o.td.ancestor().insert(
|
|
|
2420 |
'<tr><td colspan"3">' +
|
|
|
2421 |
'<button class="term">terminate</button>' +
|
|
|
2422 |
'</td></tr>',
|
|
|
2423 |
'after');
|
|
|
2424 |
}
|
|
|
2425 |
|
|
|
2426 |
o.cell.setHTML(o.value);
|
|
|
2427 |
}</pre>
|
|
|
2428 |
|
|
|
2429 |
|
|
|
2430 |
<div id="nodeformatter-props-table" class="yui3-skin-sam">
|
|
|
2431 |
<table>
|
|
|
2432 |
<thead>
|
|
|
2433 |
<tr>
|
|
|
2434 |
<th scope="col">Property</th>
|
|
|
2435 |
<th scope="col">Description</th>
|
|
|
2436 |
</tr>
|
|
|
2437 |
</thead>
|
|
|
2438 |
<tbody>
|
|
|
2439 |
<tr>
|
|
|
2440 |
<td><code>td</code></td>
|
|
|
2441 |
<td>The <code><td></code> Node for this cell.</td>
|
|
|
2442 |
</tr>
|
|
|
2443 |
<tr>
|
|
|
2444 |
<td><code>cell</code></td>
|
|
|
2445 |
<td>
|
|
|
2446 |
<p>
|
|
|
2447 |
If the cell <code><td></code> contains an element with class
|
|
|
2448 |
"yui3-datatable-liner", this will refer to that Node.
|
|
|
2449 |
Otherwise, it is equivalent to <code>o.td</code> (default behavior).
|
|
|
2450 |
</p>
|
|
|
2451 |
|
|
|
2452 |
<p>
|
|
|
2453 |
By default, liner elements aren't rendered into cells, but
|
|
|
2454 |
to implement absolute column widths, some cell liner
|
|
|
2455 |
element with <code>width</code> and <code>overflow</code> style is required
|
|
|
2456 |
(barring a table style of <code>table-layout: fixed</code>). This may
|
|
|
2457 |
be applied to the columns <code>cellTemplate</code> configuration or
|
|
|
2458 |
to the <code>bodyView</code> instance's <code>CELL_TEMPLATE</code> for all
|
|
|
2459 |
columns.
|
|
|
2460 |
</p>
|
|
|
2461 |
|
|
|
2462 |
<p>
|
|
|
2463 |
Generally, the liner, if present, corresponds to where the
|
|
|
2464 |
content should go, so use <code>o.cell</code> to add content and
|
|
|
2465 |
<code>o.td</code> to specifically work with the <code><td></code> Node.
|
|
|
2466 |
</p>
|
|
|
2467 |
</td>
|
|
|
2468 |
</tr>
|
|
|
2469 |
<tr>
|
|
|
2470 |
<td><code>value</code></td>
|
|
|
2471 |
<td>
|
|
|
2472 |
The raw value from the record Model to populate this cell.
|
|
|
2473 |
Equivalent to <code>o.record.get(o.column.key)</code> or
|
|
|
2474 |
<code>o.data[o.column.key]</code>.
|
|
|
2475 |
</td>
|
|
|
2476 |
</tr>
|
|
|
2477 |
<tr>
|
|
|
2478 |
<td><code>data</code></td>
|
|
|
2479 |
<td>The Model data for this row in simple object format.</td>
|
|
|
2480 |
</tr>
|
|
|
2481 |
<tr>
|
|
|
2482 |
<td><code>record</code></td>
|
|
|
2483 |
<td>The Model for this row.</td>
|
|
|
2484 |
</tr>
|
|
|
2485 |
<tr>
|
|
|
2486 |
<td><code>column</code></td>
|
|
|
2487 |
<td>The column configuration object.</td>
|
|
|
2488 |
</tr>
|
|
|
2489 |
<tr>
|
|
|
2490 |
<td><code>rowIndex</code></td>
|
|
|
2491 |
<td>
|
|
|
2492 |
The index of the current Model in the ModelList.
|
|
|
2493 |
<em>Typically</em> correlates to the row index as well.
|
|
|
2494 |
</td>
|
|
|
2495 |
</tr>
|
|
|
2496 |
</tbody>
|
|
|
2497 |
</table>
|
|
|
2498 |
</div>
|
|
|
2499 |
<script>
|
|
|
2500 |
YUI.add('datatable-node', function (Y) {
|
|
|
2501 |
Y.Plugin.DataTable = Y.Base.create('datatable', Y.DataTable, [], {
|
|
|
2502 |
initializer: function (config) {
|
|
|
2503 |
var columns = config.host.all('thead th').get('text'),
|
|
|
2504 |
count = columns.length,
|
|
|
2505 |
data = [],
|
|
|
2506 |
i;
|
|
|
2507 |
|
|
|
2508 |
config.host.all('tbody td').each(function (node, i) {
|
|
|
2509 |
var record = (i % count) ?
|
|
|
2510 |
data[data.length - 1] :
|
|
|
2511 |
(data[data.length] = {});
|
|
|
2512 |
record[columns[i % count]] = node.getHTML();
|
|
|
2513 |
});
|
|
|
2514 |
|
|
|
2515 |
for (i = columns.length - 1; i >= 0; --i) {
|
|
|
2516 |
columns[i] = { key: columns[i], allowHTML: true }
|
|
|
2517 |
}
|
|
|
2518 |
|
|
|
2519 |
this.setAttrs({
|
|
|
2520 |
columns : columns,
|
|
|
2521 |
data : data
|
|
|
2522 |
});
|
|
|
2523 |
|
|
|
2524 |
this.render();
|
|
|
2525 |
|
|
|
2526 |
config.host.replace(this.get('boundingBox'));
|
|
|
2527 |
}
|
|
|
2528 |
}, {
|
|
|
2529 |
NS: 'table'
|
|
|
2530 |
});
|
|
|
2531 |
|
|
|
2532 |
Y.Node.ATTRS.datatable = {
|
|
|
2533 |
setter: function (val) {
|
|
|
2534 |
if (val === true) {
|
|
|
2535 |
val = {};
|
|
|
2536 |
}
|
|
|
2537 |
|
|
|
2538 |
this.plug(Y.Plugin.DataTable, val);
|
|
|
2539 |
}
|
|
|
2540 |
};
|
|
|
2541 |
}, '0.1', { requires: ['datatable-base', 'node-pluginhost'] });
|
|
|
2542 |
YUI({ filter: 'raw' }).use('datatable-node', 'datatable-sort', function (Y) {
|
|
|
2543 |
Y.one('#column-config-table table').set('datatable', {
|
|
|
2544 |
sortable: ['Configuration', 'Module']
|
|
|
2545 |
});
|
|
|
2546 |
Y.one('#formatter-props-table table').set('datatable', true);
|
|
|
2547 |
Y.one('#nodeformatter-props-table table').set('datatable', true);
|
|
|
2548 |
});
|
|
|
2549 |
</script>
|
|
|
2550 |
</div>
|
|
|
2551 |
</div>
|
|
|
2552 |
</div>
|
|
|
2553 |
|
|
|
2554 |
<div class="yui3-u-1-4">
|
|
|
2555 |
<div class="sidebar">
|
|
|
2556 |
|
|
|
2557 |
<div id="toc" class="sidebox">
|
|
|
2558 |
<div class="hd">
|
|
|
2559 |
<h2 class="no-toc">Table of Contents</h2>
|
|
|
2560 |
</div>
|
|
|
2561 |
|
|
|
2562 |
<div class="bd">
|
|
|
2563 |
<ul class="toc">
|
|
|
2564 |
<li>
|
|
|
2565 |
<a href="#getting-started">Getting Started</a>
|
|
|
2566 |
</li>
|
|
|
2567 |
<li>
|
|
|
2568 |
<a href="#migration-intro">Upgrading from version 3.4.1 or older?</a>
|
|
|
2569 |
</li>
|
|
|
2570 |
<li>
|
|
|
2571 |
<a href="#using">DataTable Basics</a>
|
|
|
2572 |
</li>
|
|
|
2573 |
<li>
|
|
|
2574 |
<a href="#columns">Column Configuration</a>
|
|
|
2575 |
<ul class="toc">
|
|
|
2576 |
<li>
|
|
|
2577 |
<a href="#nested">Stacked Column Headers</a>
|
|
|
2578 |
</li>
|
|
|
2579 |
<li>
|
|
|
2580 |
<a href="#formatters">Formatting Cell Data</a>
|
|
|
2581 |
<ul class="toc">
|
|
|
2582 |
<li>
|
|
|
2583 |
<a href="#formatter-function">Setting content with <code>formatter</code> functions</a>
|
|
|
2584 |
</li>
|
|
|
2585 |
<li>
|
|
|
2586 |
<a href="#nodeformatters">Setting content with <code>nodeFormatter</code> functions</a>
|
|
|
2587 |
</li>
|
|
|
2588 |
<li>
|
|
|
2589 |
<a href="#formatter-vs-nodeformatter">Why <code>formatter</code> and <code>nodeFormatter</code>?</a>
|
|
|
2590 |
</li>
|
|
|
2591 |
<li>
|
|
|
2592 |
<a href="#formatters-vs-empty">Formatters vs. <code>emptyCellValue</code></a>
|
|
|
2593 |
</li>
|
|
|
2594 |
</ul>
|
|
|
2595 |
</li>
|
|
|
2596 |
</ul>
|
|
|
2597 |
</li>
|
|
|
2598 |
<li>
|
|
|
2599 |
<a href="#data">Table Data Configuration</a>
|
|
|
2600 |
<ul class="toc">
|
|
|
2601 |
<li>
|
|
|
2602 |
<a href="#recordtype">Specifying the Record Model</a>
|
|
|
2603 |
</li>
|
|
|
2604 |
<li>
|
|
|
2605 |
<a href="#modellist">The <code>data</code> ModelList</a>
|
|
|
2606 |
</li>
|
|
|
2607 |
<li>
|
|
|
2608 |
<a href="#getting-data">Getting Remote Table Data</a>
|
|
|
2609 |
</li>
|
|
|
2610 |
</ul>
|
|
|
2611 |
</li>
|
|
|
2612 |
<li>
|
|
|
2613 |
<a href="#features">DataTable Modules and Features</a>
|
|
|
2614 |
<ul class="toc">
|
|
|
2615 |
<li>
|
|
|
2616 |
<a href="#base">Features in <code>DataTable.Base</code></a>
|
|
|
2617 |
</li>
|
|
|
2618 |
<li>
|
|
|
2619 |
<a href="#datatable-message">Table Messages</a>
|
|
|
2620 |
</li>
|
|
|
2621 |
<li>
|
|
|
2622 |
<a href="#colwidths">Column Width Configuration</a>
|
|
|
2623 |
</li>
|
|
|
2624 |
<li>
|
|
|
2625 |
<a href="#sorting">Column sorting</a>
|
|
|
2626 |
<ul class="toc">
|
|
|
2627 |
<li>
|
|
|
2628 |
<a href="#customsort">Custom Sorting</a>
|
|
|
2629 |
</li>
|
|
|
2630 |
<li>
|
|
|
2631 |
<a href="#sortapi">Sorting Methods</a>
|
|
|
2632 |
</li>
|
|
|
2633 |
<li>
|
|
|
2634 |
<a href="#sortby">The <code>sortBy</code> Attribute</a>
|
|
|
2635 |
</li>
|
|
|
2636 |
<li>
|
|
|
2637 |
<a href="#sortevent">The <code>sort</code> Event</a>
|
|
|
2638 |
</li>
|
|
|
2639 |
</ul>
|
|
|
2640 |
</li>
|
|
|
2641 |
<li>
|
|
|
2642 |
<a href="#mutation">Table Mutation APIs (<code>addRow</code>, etc)</a>
|
|
|
2643 |
<ul class="toc">
|
|
|
2644 |
<li>
|
|
|
2645 |
<a href="#column-mutation">Column Mutation Methods</a>
|
|
|
2646 |
</li>
|
|
|
2647 |
<li>
|
|
|
2648 |
<a href="#row-mutation">Row Mutation Methods</a>
|
|
|
2649 |
</li>
|
|
|
2650 |
</ul>
|
|
|
2651 |
</li>
|
|
|
2652 |
<li>
|
|
|
2653 |
<a href="#scrolling">Scrolling</a>
|
|
|
2654 |
</li>
|
|
|
2655 |
</ul>
|
|
|
2656 |
</li>
|
|
|
2657 |
<li>
|
|
|
2658 |
<a href="#events">DataTable Events</a>
|
|
|
2659 |
</li>
|
|
|
2660 |
<li>
|
|
|
2661 |
<a href="#knownissues">Known Issues</a>
|
|
|
2662 |
</li>
|
|
|
2663 |
<li>
|
|
|
2664 |
<a href="#column-config">Appendix A: Column Configurations</a>
|
|
|
2665 |
</li>
|
|
|
2666 |
<li>
|
|
|
2667 |
<a href="#formatter-props">Appendix B: Formatter Argument Properties</a>
|
|
|
2668 |
</li>
|
|
|
2669 |
<li>
|
|
|
2670 |
<a href="#nodeformatter-props">Appendix C: nodeFormatter Argument Properties</a>
|
|
|
2671 |
</li>
|
|
|
2672 |
</ul>
|
|
|
2673 |
</div>
|
|
|
2674 |
</div>
|
|
|
2675 |
|
|
|
2676 |
|
|
|
2677 |
|
|
|
2678 |
<div class="sidebox">
|
|
|
2679 |
<div class="hd">
|
|
|
2680 |
<h2 class="no-toc">Examples</h2>
|
|
|
2681 |
</div>
|
|
|
2682 |
|
|
|
2683 |
<div class="bd">
|
|
|
2684 |
<ul class="examples">
|
|
|
2685 |
|
|
|
2686 |
|
|
|
2687 |
<li data-description="This example illustrates simple DataTable use cases.">
|
|
|
2688 |
<a href="datatable-basic.html">Basic DataTable</a>
|
|
|
2689 |
</li>
|
|
|
2690 |
|
|
|
2691 |
|
|
|
2692 |
|
|
|
2693 |
<li data-description="DataTable loaded with JSON data from a remote webservice via DataSource.Get">
|
|
|
2694 |
<a href="datatable-dsget.html">DataTable + DataSource.Get + JSON Data</a>
|
|
|
2695 |
</li>
|
|
|
2696 |
|
|
|
2697 |
|
|
|
2698 |
|
|
|
2699 |
<li data-description="DataTable loaded with XML data from a remote webservice via DataSource.IO.">
|
|
|
2700 |
<a href="datatable-dsio.html">DataTable + DataSource.IO + XML Data</a>
|
|
|
2701 |
</li>
|
|
|
2702 |
|
|
|
2703 |
|
|
|
2704 |
|
|
|
2705 |
<li data-description="Custom format data for display.">
|
|
|
2706 |
<a href="datatable-formatting.html">Formatting Row Data for Display</a>
|
|
|
2707 |
</li>
|
|
|
2708 |
|
|
|
2709 |
|
|
|
2710 |
|
|
|
2711 |
<li data-description="DataTable with nested column headers.">
|
|
|
2712 |
<a href="datatable-nestedcols.html">Nested Column Headers</a>
|
|
|
2713 |
</li>
|
|
|
2714 |
|
|
|
2715 |
|
|
|
2716 |
|
|
|
2717 |
<li data-description="DataTable with column sorting.">
|
|
|
2718 |
<a href="datatable-sort.html">Column Sorting</a>
|
|
|
2719 |
</li>
|
|
|
2720 |
|
|
|
2721 |
|
|
|
2722 |
|
|
|
2723 |
<li data-description="DataTable with vertical and/or horizontal scrolling rows.">
|
|
|
2724 |
<a href="datatable-scroll.html">Scrolling DataTable</a>
|
|
|
2725 |
</li>
|
|
|
2726 |
|
|
|
2727 |
|
|
|
2728 |
|
|
|
2729 |
<li data-description="Using DataTable's recordType attribute to create calculated, sortable columns.">
|
|
|
2730 |
<a href="datatable-recordtype.html">Sortable generated columns</a>
|
|
|
2731 |
</li>
|
|
|
2732 |
|
|
|
2733 |
|
|
|
2734 |
|
|
|
2735 |
<li data-description="Populating one DataTable from details in the data of another.">
|
|
|
2736 |
<a href="datatable-masterdetail.html">Master and detail tables</a>
|
|
|
2737 |
</li>
|
|
|
2738 |
|
|
|
2739 |
|
|
|
2740 |
|
|
|
2741 |
<li data-description="Checkbox column that retains checked state when sorting.">
|
|
|
2742 |
<a href="datatable-chkboxselect.html">Checkbox select column</a>
|
|
|
2743 |
</li>
|
|
|
2744 |
|
|
|
2745 |
|
|
|
2746 |
|
|
|
2747 |
|
|
|
2748 |
</ul>
|
|
|
2749 |
</div>
|
|
|
2750 |
</div>
|
|
|
2751 |
|
|
|
2752 |
|
|
|
2753 |
|
|
|
2754 |
<div class="sidebox">
|
|
|
2755 |
<div class="hd">
|
|
|
2756 |
<h2 class="no-toc">Examples That Use This Component</h2>
|
|
|
2757 |
</div>
|
|
|
2758 |
|
|
|
2759 |
<div class="bd">
|
|
|
2760 |
<ul class="examples">
|
|
|
2761 |
|
|
|
2762 |
|
|
|
2763 |
|
|
|
2764 |
|
|
|
2765 |
|
|
|
2766 |
|
|
|
2767 |
|
|
|
2768 |
|
|
|
2769 |
|
|
|
2770 |
|
|
|
2771 |
|
|
|
2772 |
|
|
|
2773 |
|
|
|
2774 |
|
|
|
2775 |
|
|
|
2776 |
|
|
|
2777 |
|
|
|
2778 |
|
|
|
2779 |
|
|
|
2780 |
|
|
|
2781 |
|
|
|
2782 |
|
|
|
2783 |
<li data-description="Shows how to instantiate multiple Panel instances, and use nested modality to interact with a Datatable.">
|
|
|
2784 |
<a href="../panel/panel-form.html">Creating a Modal Form</a>
|
|
|
2785 |
</li>
|
|
|
2786 |
|
|
|
2787 |
|
|
|
2788 |
</ul>
|
|
|
2789 |
</div>
|
|
|
2790 |
</div>
|
|
|
2791 |
|
|
|
2792 |
</div>
|
|
|
2793 |
</div>
|
|
|
2794 |
</div>
|
|
|
2795 |
</div>
|
|
|
2796 |
|
|
|
2797 |
<script src="../assets/vendor/prettify/prettify-min.js"></script>
|
|
|
2798 |
<script>prettyPrint();</script>
|
|
|
2799 |
|
|
|
2800 |
<script>
|
|
|
2801 |
YUI.Env.Tests = {
|
|
|
2802 |
examples: [],
|
|
|
2803 |
project: '../assets',
|
|
|
2804 |
assets: '../assets/datatable',
|
|
|
2805 |
name: 'datatable',
|
|
|
2806 |
title: 'DataTable',
|
|
|
2807 |
newWindow: '',
|
|
|
2808 |
auto: false
|
|
|
2809 |
};
|
|
|
2810 |
YUI.Env.Tests.examples.push('datatable-basic');
|
|
|
2811 |
YUI.Env.Tests.examples.push('datatable-dsget');
|
|
|
2812 |
YUI.Env.Tests.examples.push('datatable-dsio');
|
|
|
2813 |
YUI.Env.Tests.examples.push('datatable-formatting');
|
|
|
2814 |
YUI.Env.Tests.examples.push('datatable-nestedcols');
|
|
|
2815 |
YUI.Env.Tests.examples.push('datatable-sort');
|
|
|
2816 |
YUI.Env.Tests.examples.push('datatable-scroll');
|
|
|
2817 |
YUI.Env.Tests.examples.push('datatable-recordtype');
|
|
|
2818 |
YUI.Env.Tests.examples.push('datatable-masterdetail');
|
|
|
2819 |
YUI.Env.Tests.examples.push('datatable-chkboxselect');
|
|
|
2820 |
YUI.Env.Tests.examples.push('panel-form');
|
|
|
2821 |
|
|
|
2822 |
</script>
|
|
|
2823 |
<script src="../assets/yui/test-runner.js"></script>
|
|
|
2824 |
|
|
|
2825 |
|
|
|
2826 |
|
|
|
2827 |
</body>
|
|
|
2828 |
</html>
|