← Back to branch summary

~smagoun/whoopsie/whoopsie-lp1017637

« back to all changes in this revision

Viewing changes to backend/stats/static/js/yui/docs/datatable-deprecated/index.html

  • Committer: Evan Dandrea
  • Date: 2012-05-09 05:53:45 UTC
  • Revision ID: evan.dandrea@canonical.com-20120509055345-z2j41tmcbf4as5uf
The backend now lives in lp:daisy and the website (errors.ubuntu.com) now lives in lp:errors.

Show diffs side-by-side

added added

removed removed

Lines of Context:
backend/stats/static/js/yui/docs/datatable-deprecated/index.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>DataTable (deprecated version)</title>
6
 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Maven+Pro:400,700">
7
 
    <link rel="stylesheet" href="../../build/cssgrids/grids-min.css">
8
 
    <link rel="stylesheet" href="../assets/css/main.css">
9
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
10
 
    <script src="../../build/yui/yui-min.js"></script>
11
 
</head>
12
 
<body>
13
 
 
14
 
<div id="doc">
15
 
    <h1>DataTable (deprecated version)</h1>
16
 
 
17
 
    
18
 
        <a href="#toc" class="jump">Jump to Table of Contents</a>
19
 
    
20
 
 
21
 
    <div class="yui3-g">
22
 
        <div class="yui3-u-3-4">
23
 
            <div id="main">
24
 
                <div class="content"><style scoped>
25
 
.notice {
26
 
    background: #faf3d1;
27
 
    border: 1px solid #eac9a9;
28
 
    -moz-border-radius: 3px;
29
 
    -webkit-border-radius: 3px;
30
 
    border-radius: px;
31
 
    padding: 0 1em;
32
 
    -moz-box-shadow: 0 0 5px #ccc8b3;
33
 
    -webkit-box-shadow: 0 0 5px #ccc8b3;
34
 
    box-shadow: 0 0 5px #ccc8b3;
35
 
    margin-bottom: 1em;
36
 
}
37
 
</style>
38
 
<div class="intro component">
39
 
    <p>
40
 
        The DataTable widget is responsible for rendering columnar data into a
41
 
        highly customizable and fully accessible HTML table.  The core
42
 
        functionality of DataTable is to visualize structured data as a table.
43
 
        A variety of Plugins can then be used to add features to the table such
44
 
        as sorting and scrolling.
45
 
    </p>
46
 
</div>
47
 
                                
48
 
<div class="notice">
49
 
    <p>
50
 
        <strong>NOTICE</strong>: This component is <strong>deprecated</strong>
51
 
        and will be removed in future versions.  Use
52
 
        <a href="../datatable/index.html">the latest supported version of
53
 
        DataTable</a>.
54
 
    </p>
55
 
 
56
 
    <p>
57
 
        This component will be temporarily supported for implementations that
58
 
        have unresolvable issues preventing them from upgrading to the new
59
 
        APIs.  If you find issues while updating to the latest version, please
60
 
        <a href="../../../projects/yui3/newticket/">file a ticket</a>.
61
 
    </p>
62
 
 
63
 
    <p>
64
 
        This module is <strong>incompatible</strong> with
65
 
        <a href="../datatable/index.html">the new <code>datatable</code> component
66
 
        suite</a>.  Both use the <code>Y.DataTable</code> namespace.
67
 
    </p>
68
 
 
69
 
    <p>
70
 
        Read the <a href="../datatable/migration.html">Migration Guide</a>
71
 
        for help upgrading from version 3.4.1 or prior.
72
 
    </p>
73
 
</div>
74
 
 
75
 
<h2 id="getting-started">Getting Started</h2>
76
 
 
77
 
<p>
78
 
To include the source files for DataTable (deprecated version) and its dependencies, first load
79
 
the YUI seed file if you haven't already loaded it.
80
 
</p>
81
 
 
82
 
<pre class="code prettyprint">&lt;script src=&quot;http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.5.0&#x2F;build&#x2F;yui&#x2F;yui-min.js&quot;&gt;&lt;&#x2F;script&gt;</pre>
83
 
 
84
 
 
85
 
<p>
86
 
Next, create a new YUI instance for your application and populate it with the
87
 
modules you need by specifying them as arguments to the <code>YUI().use()</code> method.
88
 
YUI will automatically load any dependencies required by the modules you
89
 
specify.
90
 
</p>
91
 
 
92
 
<pre class="code prettyprint">&lt;script&gt;
93
 
&#x2F;&#x2F; Create a new YUI instance and populate it with the required modules.
94
 
YUI().use(&#x27;datatable-deprecated&#x27;, function (Y) {
95
 
    &#x2F;&#x2F; DataTable (deprecated version) is available and ready for use. Add implementation
96
 
    &#x2F;&#x2F; code here.
97
 
});
98
 
&lt;&#x2F;script&gt;</pre>
99
 
 
100
 
 
101
 
<p>
102
 
For more information on creating YUI instances and on the
103
 
<a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_use"><code>use()</code> method</a>, see the
104
 
documentation for the <a href="../yui/index.html">YUI Global Object</a>.
105
 
</p>
106
 
 
107
 
                                
108
 
<h2 id="using">Using DataTables</h2>
109
 
 
110
 
<h3 id="basics">DataTable basics</h3>
111
 
 
112
 
<p>
113
 
    A basic DataTable is comprised of columns and rows. Define the columns you
114
 
    want to display in your DataTable with the <code>columnset</code>
115
 
    attribute. Rows are created for you based on the data you define using the
116
 
    <code>recordset</code> attribute. Under the hood, the DataTable class uses
117
 
    a Columnset instance and a Recordset instance to manage column and row data
118
 
    properties.
119
 
</p>
120
 
                
121
 
<h3 id="columns">Working with columns</h3>
122
 
 
123
 
<p>
124
 
    A <code>columnset</code> can be defined with a simple array of
125
 
    <code>keys</code>. As long as these keys exist in your data, DataTable will
126
 
    display these columns of data in the table. Note that your data may contain
127
 
    other columns that are not displayed if they are not defined in the
128
 
    <code>columnset</code> array. A Columnset will be created containing a
129
 
    Column instance for each item in your array, with the <code>key</code>
130
 
    values you provided.
131
 
</p>
132
 
                
133
 
<pre class="code prettyprint">&#x2F;&#x2F; Creates a Columnset with 3 Columns. &quot;cost&quot; is not rendered.
134
 
var cols = [&quot;id&quot;,&quot;name&quot;,&quot;price&quot;];
135
 
 
136
 
&#x2F;&#x2F; Columns must match data parameter names
137
 
var data = [
138
 
    {id:&quot;ga-3475&quot;, name:&quot;gadget&quot;, price:&quot;$6.99&quot;, cost:&quot;$5.99&quot;},
139
 
    {id:&quot;sp-9980&quot;, name:&quot;sprocket&quot;, price:&quot;$3.75&quot;, cost:&quot;$3.25&quot;},
140
 
    {id:&quot;wi-0650&quot;, name:&quot;widget&quot;, price:&quot;$4.25&quot;, cost:&quot;$3.75&quot;}
141
 
];
142
 
 
143
 
&#x2F;&#x2F; Creates a DataTable with 3 columns and 3 rows
144
 
var table = new Y.DataTable.Base({
145
 
    columnset: cols,
146
 
    recordset: data
147
 
}).render(&quot;#example&quot;);</pre>
148
 
 
149
 
 
150
 
<p>
151
 
    For greater flexibility, the <code>columnset</code> array accepts
152
 
    configuration objects as well as simple column name strings.  When
153
 
    identifying a column with a configuration object, use the <code>key</code>
154
 
    property to reference the column name string.  Below are a few other
155
 
    available column configurations.
156
 
</p>
157
 
 
158
 
<p>
159
 
    Use the <code>label</code> attribute to customize the rendered column
160
 
    header:
161
 
</p>
162
 
 
163
 
<pre class="code prettyprint">&#x2F;&#x2F; The label is the text that will be rendered in the table head
164
 
var cols = [
165
 
    { key: &quot;id&quot;, label: &quot;ID&quot; },
166
 
    { key: &quot;name&quot;, label: &quot;Name&quot; },
167
 
    { key: &quot;price&quot;, label: &quot;Price&quot; }
168
 
];</pre>
169
 
 
170
 
 
171
 
<p>
172
 
    Use the <code>emptyCellValue</code> attribute to provide custom cell content when
173
 
    there is no data for that cell in the <code>Recordset</code> or a <code>formatter</code> returns
174
 
    <code>undefined</code>.  The default <code>emptyCellValue</code> is the empty string <code>&quot;&quot;</code>.
175
 
</p>
176
 
 
177
 
<pre class="code prettyprint">&#x2F;&#x2F; The label is the text that will be rendered in the table head
178
 
var cols = [
179
 
    { key: &quot;id&quot;, label: &quot;ID&quot; },
180
 
    { key: &quot;name&quot;, label: &quot;Name&quot; },
181
 
    { key: &quot;price&quot;, label: &quot;Price&quot;, emptyCellValue: &quot;&lt;em&gt;FREE!!!&lt;&#x2F;em&gt;&quot; }
182
 
];</pre>
183
 
 
184
 
 
185
 
<p>
186
 
    Use the <code>abbr</code> attribute to set the screen-reader friendly
187
 
    "abbr" on each TH element:
188
 
</p>
189
 
 
190
 
<pre class="code prettyprint">&#x2F;&#x2F; The abbr attribute enhances the screen-reader experience
191
 
var cols = [
192
 
    {
193
 
        key: &quot;mfr-parts-database-id&quot;,
194
 
        label: &quot;Mfr Part ID&quot;,
195
 
        abbr: &quot;ID&quot;
196
 
    },
197
 
    {
198
 
        key: &quot;mfr-parts-database-name&quot;,
199
 
        label: &quot;Mfr Part Name&quot;,
200
 
        abbr: &quot;Name&quot;
201
 
    },
202
 
    {
203
 
        key: &quot;mfr-parts-database-price&quot;,
204
 
        label: &quot;Wholesale Price&quot;,
205
 
        abbr: &quot;Price&quot;
206
 
    }
207
 
];</pre>
208
 
 
209
 
 
210
 
<p>
211
 
    Use the <code>children</code> attribute to created nested column headers.
212
 
    Parent columns are for display purposes only, not associated with any data,
213
 
    and should not have a <code>key</code> attribute of their own.
214
 
</p>
215
 
 
216
 
<pre class="code prettyprint">var nestedCols = [
217
 
    {
218
 
        label: &quot;Train Schedule&quot;,
219
 
        children: [ &#x2F;&#x2F; Use children to define nested relationships
220
 
            { key: &quot;track&quot; },
221
 
            {
222
 
                label: &quot;Route&quot;,
223
 
                children: [
224
 
                    { key: &quot;from&quot; },
225
 
                    { key: &quot;to&quot; }
226
 
                ]
227
 
            }
228
 
        ]
229
 
    }
230
 
];
231
 
 
232
 
var data = [
233
 
    { track: &quot;1&quot;, from: &quot;Paris&quot;, to: &quot;Amsterdam&quot; },
234
 
    { track: &quot;2&quot;, from: &quot;Paris&quot;, to: &quot;London&quot; },
235
 
    { track: &quot;3&quot;, from: &quot;Paris&quot;, to: &quot;Zurich&quot; }
236
 
];
237
 
 
238
 
var table = new Y.DataTable.Base({
239
 
    columnset: nestedCols,
240
 
    recordset: data,
241
 
    summary: &quot;Train schedule&quot;,
242
 
    caption: &quot;Table with nested column headers&quot;
243
 
}).render(&quot;#nested&quot;);</pre>
244
 
 
245
 
 
246
 
<h3 id="data">Working with row data</h3>
247
 
                                
248
 
<p>
249
 
    Pass an array of data to the <code>recordset</code> attribute, and
250
 
    DataTable will create a <code>Recordset</code> of <code>Record</code>
251
 
    instances to populate the table. Note that you should only define columns
252
 
    for data you want to display -- all other data is not displayed.
253
 
</p>
254
 
 
255
 
<pre class="code prettyprint">&#x2F;&#x2F; Creates a Recordset with 3 records
256
 
var data = [
257
 
    { id: &quot;ga-3475&quot;, name: &quot;gadget&quot;, price: &quot;$6.99&quot;, cost: &quot;$5.99&quot;},
258
 
    { id: &quot;sp-9980&quot;, name: &quot;sprocket&quot;, price: &quot;$3.75&quot;, cost: &quot;$3.25&quot;},
259
 
    { id: &quot;wi-0650&quot;, name: &quot;widget&quot;, price: &quot;$4.25&quot;, cost: &quot;$3.75&quot;}
260
 
];
261
 
 
262
 
&#x2F;&#x2F; Creates a DataTable with 3 columns and 3 rows (&quot;cost&quot; is not displayed)
263
 
var table = new Y.DataTable.Base({
264
 
    columnset: [ &quot;id&quot;, &quot;name&quot;, &quot;price&quot; ],
265
 
    recordset: data
266
 
}).render(&quot;#example&quot;);</pre>
267
 
 
268
 
 
269
 
<p>
270
 
    Data can be stored in one format but be displayed in a different format.
271
 
    For instance, prices can be stored as numbers but be displayed as "$2.99",
272
 
    and birthdays can be stored as date objects but be displayed as
273
 
    "12/9/2009". Simple formatting can be defined with a string template on the
274
 
    column definition.
275
 
</p>
276
 
 
277
 
<pre class="code prettyprint">var cols = [ &quot;id&quot;, &quot;name&quot;, { key: &quot;price&quot;, formatter: &quot;\${value}&quot; } ];
278
 
 
279
 
var data = [
280
 
    { id: &quot;ga-3475&quot;, name: &quot;gadget&quot;, price: 6.99 },
281
 
    { id: &quot;sp-9980&quot;, name: &quot;sprocket&quot;, price: 3.75 },
282
 
    { id: &quot;wi-0650&quot;, name: &quot;widget&quot;, price: 4.25 }
283
 
];
284
 
 
285
 
var table = new Y.DataTable.Base({
286
 
    columnset: cols,
287
 
    recordset: data,
288
 
    caption: &quot;Data formatting with string template&quot;
289
 
}).render(&quot;#template&quot;);</pre>
290
 
 
291
 
 
292
 
<p>
293
 
    When a calculation is needed, define a custom function that generates
294
 
    markup for the cell. The custom formatter function receives an object with
295
 
    the following properties:
296
 
</p>
297
 
 
298
 
<table>
299
 
<thead>
300
 
    <tr>
301
 
        <th>Property</th>
302
 
        <th>Value</th>
303
 
    </tr>
304
 
</thead>
305
 
<tbody>
306
 
    <tr>
307
 
        <td><code>tbody</code></td>
308
 
        <td>The <code>&lt;tbody&gt;</code> node containing the cell.</td>
309
 
    </tr>
310
 
    <tr>
311
 
        <td><code>tr</code></td>
312
 
        <td>The <code>&lt;tr&gt;</code> node containing the cell.</td>
313
 
    </tr>
314
 
    <tr>
315
 
        <td><code>td</code></td>
316
 
        <td>The cell <code>&lt;td&gt;</code> node.  As of 3.4.1, this property
317
 
        is <strong>not provided by default</strong>, but can be generated by the
318
 
        <a href="http://yuilibrary.com/yui/docs/api/classes/DataTable.html#methods_createCell">createCell</a>
319
 
        method.</td>
320
 
    </tr>
321
 
    <tr>
322
 
        <td><code>value</code></td>
323
 
        <td>Usually the value stored in the <code>Record</code> for the column.  This is the default content that will be displayed.</td>
324
 
    </tr>
325
 
    <tr>
326
 
        <td><code>record</code></td>
327
 
        <td>The <code>Record</code> instance containing the data for all cells in the row.</td>
328
 
    </tr>
329
 
    <tr>
330
 
        <td><code>data</code></td>
331
 
        <td>The raw data collection from the <code>Record</code> instance.</td>
332
 
    </tr>
333
 
    <tr>
334
 
        <td><code>rowindex</code></td>
335
 
        <td>The row number of the <code>&lt;tr&gt;</code> node containing the cell (zero based).</td>
336
 
    </tr>
337
 
    <tr>
338
 
        <td><code>column</code></td>
339
 
        <td>The <code>Column</code> instance for the cell's column.</td>
340
 
    </tr>
341
 
    <tr>
342
 
        <td><code>classnames</code></td>
343
 
        <td>The classname corresponding to the ID of the cell's column.</td>
344
 
    </tr>
345
 
    <tr>
346
 
        <td><code>headers</code></td>
347
 
        <td>The Array of IDs from all <code>&lt;th&gt;</code>s corresponding to the cell (mostly relevant to nested headers).</td>
348
 
    </tr>
349
 
</tbody>
350
 
</table>
351
 
 
352
 
<pre class="code prettyprint">&#x2F;&#x2F; The custom formatter function recieves an object
353
 
var calculate = function (o) {
354
 
    var cost  = o.record.getValue(&quot;cost&quot;),
355
 
        price = o.record.getValue(&quot;price&quot;);
356
 
 
357
 
    return &quot;$&quot; + (price - cost).toFixed(2);
358
 
};
359
 
 
360
 
&#x2F;&#x2F; Assign the custom formatter in the column definition
361
 
var cols = [ &quot;id&quot;, &quot;name&quot;, { key: &quot;profit&quot;, formatter: calculate } ];
362
 
 
363
 
var data = [
364
 
    { id: &quot;ga-3475&quot;, name: &quot;gadget&quot;, price: 6.99, cost: 4.99 },
365
 
    { id: &quot;sp-9980&quot;, name: &quot;sprocket&quot;, price: 3.75, cost: 2.75 },
366
 
    { id: &quot;wi-0650&quot;, name: &quot;widget&quot;, price: 4.25, cost: 3.25 }
367
 
];
368
 
 
369
 
var table = new Y.DataTable.Base({
370
 
    columnset: cols,
371
 
    recordset: data,
372
 
    caption: &quot;Data formatting with custom function&quot;
373
 
}).render(&quot;#function&quot;);</pre>
374
 
 
375
 
 
376
 
<p>
377
 
    Integrate with the <a href="../datasource/">DataSource</a> data abstraction
378
 
    utility to easily load data from remote sources and implement features such
379
 
    as caching and polling.
380
 
</p>
381
 
 
382
 
<pre class="code prettyprint">var cols = [
383
 
    &quot;Title&quot;,
384
 
    &quot;Phone&quot;,
385
 
    { key: &quot;Rating.AverageRating&quot;, label: &quot;Rating&quot; }
386
 
];
387
 
 
388
 
var myDataSource = new Y.DataSource.Get({
389
 
    source: &quot;http:&#x2F;&#x2F;query.yahooapis.com&#x2F;v1&#x2F;public&#x2F;yql?&amp;format=json&amp;env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&quot;
390
 
});
391
 
 
392
 
myDataSource.plug(Y.Plugin.DataSourceJSONSchema, {
393
 
    schema: {
394
 
        resultListLocator: &quot;query.results.Result&quot;,
395
 
        resultFields: [ &quot;Title&quot;, &quot;Phone&quot;, &quot;Rating.AverageRating&quot; ]
396
 
    }
397
 
}),
398
 
 
399
 
var table = new Y.DataTable.Base({
400
 
    columnset: cols,
401
 
    summary: &quot;Pizza places near 98089&quot;
402
 
});
403
 
 
404
 
table.plug(Y.Plugin.DataTableDataSource, {
405
 
    datasource: myDataSource
406
 
})
407
 
 
408
 
table.render(&quot;#pizza&quot;);
409
 
 
410
 
&#x2F;&#x2F; Load the data into the table
411
 
table.datasource.load({
412
 
    request: &quot;&amp;q=select%20*%20from%20local.search%20where%20zip%3D%2794089%27%20and%20query%3D%27pizza%27&quot;
413
 
});
414
 
 
415
 
&#x2F;&#x2F; Make another request later
416
 
table.datasource.load({
417
 
    request: &quot;&amp;q=select%20*%20from%20local.search%20where%20zip%3D%2794089%27%20and%20query%3D%27chinese%27&quot;
418
 
});</pre>
419
 
 
420
 
 
421
 
<p>
422
 
    Enable DataSource caching.
423
 
</p>
424
 
 
425
 
<pre class="code prettyprint">var cols = [
426
 
    &quot;Title&quot;,
427
 
    &quot;Phone&quot;,
428
 
    { key: &quot;Rating.AverageRating&quot;, label: &quot;Rating&quot; }
429
 
];
430
 
 
431
 
var myDataSource = new Y.DataSource.Get({
432
 
    source: &quot;http:&#x2F;&#x2F;query.yahooapis.com&#x2F;v1&#x2F;public&#x2F;yql?format=json&amp;env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&quot;
433
 
});
434
 
 
435
 
myDataSource
436
 
    .plug(Y.Plugin.DataSourceJSONSchema, {
437
 
        schema: {
438
 
            resultListLocator: &quot;query.results.Result&quot;,
439
 
            resultFields: [&quot;Title&quot;, &quot;Phone&quot;, &quot;Rating.AverageRating&quot;]
440
 
        }
441
 
    })
442
 
    .plug(Y.Plugin.DataSourceCache, {
443
 
        max: 3
444
 
    });
445
 
 
446
 
var table = new Y.DataTable.Base({
447
 
    columnset: cols,
448
 
    summary: &quot;Pizza places near 98089&quot;,
449
 
    caption: &quot;Table with JSON data from YQL&quot;
450
 
});
451
 
 
452
 
table
453
 
    .plug(Y.Plugin.DataTableDataSource, {
454
 
        datasource: myDataSource
455
 
    })
456
 
    .render(&quot;#pizza&quot;);
457
 
 
458
 
table.datasource.load({
459
 
    request: &quot;&amp;q=select%20*%20from%20local.search%20where%20zip%3D%2794089%27%20and%20query%3D%27chinese%27&quot;
460
 
});</pre>
461
 
 
462
 
 
463
 
<p>
464
 
    Enable DataSource polling.
465
 
</p>
466
 
 
467
 
<pre class="code prettyprint">var cols = [&quot;Title&quot;, &quot;Phone&quot;, &quot;Rating&quot;];
468
 
 
469
 
var myDataSource = new Y.DataSource.IO({
470
 
    source: &quot;&#x2F;path&#x2F;to&#x2F;service.php?&quot;
471
 
});
472
 
 
473
 
myDataSource.plug(Y.Plugin.DataSourceXMLSchema, {
474
 
    schema: {
475
 
        resultListLocator: &quot;Result&quot;,
476
 
        resultFields: [
477
 
            { key: &quot;Title&quot;, locator: &quot;*[local-name() =&#x27;Title&#x27;]&quot; },
478
 
            { key: &quot;Phone&quot;, locator: &quot;*[local-name() =&#x27;Phone&#x27;]&quot; },
479
 
            { key: &quot;Rating&quot;, locator: &quot;*[local-name()=&#x27;Rating&#x27;]&#x2F;*[local-name()=&#x27;AverageRating&#x27;]&quot; }
480
 
        ]
481
 
    }
482
 
});
483
 
 
484
 
var table = new Y.DataTable.Base({
485
 
    columnset: cols,
486
 
    summary: &quot;Chinese restaurants near 98089&quot;,
487
 
    caption: &quot;Table with XML data from same-domain script&quot;
488
 
});
489
 
 
490
 
table
491
 
    .plug(Y.Plugin.DataTableDataSource, {
492
 
        datasource: myDataSource,
493
 
        initialRequest: &quot;zip=94089&amp;query=chinese&quot;
494
 
    })
495
 
    .render(&quot;#chinese&quot;);
496
 
 
497
 
myDataSource.setInterval(5000, {
498
 
    request: &quot;zip=94089&amp;query=chinese&quot;,
499
 
    callback: {
500
 
        success: Y.bind(table.datasource.onDataReturnInitializeTable, table.datasource),
501
 
        failure: Y.bind(table.datasource.onDataReturnInitializeTable, table.datasource)
502
 
    }
503
 
});</pre>
504
 
 
505
 
 
506
 
<h3 id="sorting">Column sorting</h3>
507
 
 
508
 
<p>
509
 
    Column sorting functionality for the deprecated version of DataTable can be
510
 
    added with the DataTableSort plugin (provided by the
511
 
    <code>datatable-sort-deprecated</code> module, or in the
512
 
    <code>datatable-deprecated</code> rollup module). Indicate which columns
513
 
    are sortable by setting <code>sortable: true</code> in your column
514
 
    definitions.
515
 
</p>
516
 
 
517
 
<pre class="code prettyprint">var cols = [
518
 
    { key: &quot;Company&quot;, sortable: true },
519
 
    { key: &quot;Phone&quot; },
520
 
    { key: &quot;Contact&quot;, sortable: true }
521
 
];
522
 
 
523
 
var data = [
524
 
    { Company: &quot;Company Bee&quot;, Phone: &quot;415-555-1234&quot;, Contact: &quot;Sally Spencer&quot;},
525
 
    { Company: &quot;Acme Company&quot;, Phone: &quot;650-555-4444&quot;, Contact: &quot;John Jones&quot;},
526
 
    { Company: &quot;Indutrial Industries&quot;, Phone: &quot;408-555-5678&quot;, Contact: &quot;Robin Smith&quot;}
527
 
];
528
 
 
529
 
var table = new Y.DataTable.Base({
530
 
    columnset: cols,
531
 
    recordset: data,
532
 
    summary: &quot;Contacts list&quot;,
533
 
    caption: &quot;Table with simple column sorting&quot;,
534
 
    plugins: [ Y.Plugin.DataTableSort ]
535
 
}).render(&quot;#sort&quot;);</pre>
536
 
 
537
 
 
538
 
<h3 id="scrolling">Scrolling</h3>
539
 
                                
540
 
<p>
541
 
    <strong>Note:</strong> Scrolling is not currently supported on the Android
542
 
    WebKit browser.
543
 
</p>
544
 
 
545
 
<p>
546
 
    Scrolling functionality for the deprecated version of DataTable can be added with the DataTableScroll plugin (provided by the <code>datatable-scroll-deprecated</code> module or in the <code>datatable-deprecated</code> rollup module). Horizontal scrolling is enabled by setting a <code>width</code> attribute value; fixed header vertical scrolling is enabled by setting a <code>height</code> attribute value; and xy-scrolling is enabled by setting both <code>width</code> and <code>height</code> values.
547
 
</p>
548
 
 
549
 
<pre class="code prettyprint">var cols = [
550
 
    { key: &quot;Company&quot; },
551
 
    { key: &quot;Phone&quot; },
552
 
    { key: &quot;Contact&quot; }
553
 
];
554
 
 
555
 
var data = [
556
 
    { Company: &quot;Company Bee&quot;, Phone: &quot;415-555-1234&quot;, Contact: &quot;Sally Spencer&quot;},
557
 
    { Company: &quot;Acme Company&quot;, Phone: &quot;650-555-4444&quot;, Contact: &quot;John Jones&quot;},
558
 
    { Company: &quot;Indutrial Industries&quot;, Phone: &quot;408-555-5678&quot;, Contact: &quot;Robin Smith&quot;}
559
 
];
560
 
 
561
 
var table = new Y.DataTable.Base({
562
 
    columnset: cols,
563
 
    recordset: data,
564
 
});
565
 
 
566
 
table
567
 
    .plug(Y.Plugin.DataTableScroll, {
568
 
        width: &quot;300px&quot;,
569
 
        height: &quot;200px&quot;
570
 
    })
571
 
    .render(&quot;#scroll&quot;);</pre>
572
 
 
573
 
 
574
 
<h2 id="knownissues">Known Issues</h2>
575
 
 
576
 
<ul>
577
 
    <li>
578
 
        Scrolling is
579
 
        <a href="http://yuilibrary.com/projects/yui3/ticket/2529761">not
580
 
        currently supported on Android</a> WebKit browser.
581
 
    </li>
582
 
    <li>Scrolling DataTable does
583
 
        <a href="http://yuilibrary.com/projects/yui3/ticket/2531047">not appear
584
 
        scrollable</a> in iOS and OS X 10.7 in Safari 5.1+ and Chrome 15+.
585
 
    </li>
586
 
</ul>
587
 
 
588
 
</div>
589
 
            </div>
590
 
        </div>
591
 
 
592
 
        <div class="yui3-u-1-4">
593
 
            <div class="sidebar">
594
 
                
595
 
                    <div id="toc" class="sidebox">
596
 
                        <div class="hd">
597
 
                            <h2 class="no-toc">Table of Contents</h2>
598
 
                        </div>
599
 
 
600
 
                        <div class="bd">
601
 
                            <ul class="toc">
602
 
<li>
603
 
<a href="#getting-started">Getting Started</a>
604
 
</li>
605
 
<li>
606
 
<a href="#using">Using DataTables</a>
607
 
<ul class="toc">
608
 
<li>
609
 
<a href="#basics">DataTable basics</a>
610
 
</li>
611
 
<li>
612
 
<a href="#columns">Working with columns</a>
613
 
</li>
614
 
<li>
615
 
<a href="#data">Working with row data</a>
616
 
</li>
617
 
<li>
618
 
<a href="#sorting">Column sorting</a>
619
 
</li>
620
 
<li>
621
 
<a href="#scrolling">Scrolling</a>
622
 
</li>
623
 
</ul>
624
 
</li>
625
 
<li>
626
 
<a href="#knownissues">Known Issues</a>
627
 
</li>
628
 
</ul>
629
 
                        </div>
630
 
                    </div>
631
 
                
632
 
 
633
 
                
634
 
                    <div class="sidebox">
635
 
                        <div class="hd">
636
 
                            <h2 class="no-toc">Examples</h2>
637
 
                        </div>
638
 
 
639
 
                        <div class="bd">
640
 
                            <ul class="examples">
641
 
                                
642
 
                                    
643
 
                                        <li data-description="This example illustrates simple DataTable use cases.">
644
 
                                            <a href="datatable-basic.html">Basic DataTable</a>
645
 
                                        </li>
646
 
                                    
647
 
                                
648
 
                                    
649
 
                                        <li data-description="DataTable loaded with JSON data from a remote webservice via DataSource.Get">
650
 
                                            <a href="datatable-dsget.html">DataTable + DataSource.Get + JSON Data</a>
651
 
                                        </li>
652
 
                                    
653
 
                                
654
 
                                    
655
 
                                        <li data-description="DataTable loaded with XML data from a remote webservice via DataSource.IO.">
656
 
                                            <a href="datatable-dsio.html">DataTable + DataSource.IO + XML Data</a>
657
 
                                        </li>
658
 
                                    
659
 
                                
660
 
                                    
661
 
                                        <li data-description="Custom format data for display.">
662
 
                                            <a href="datatable-formatting.html">Formatting Row Data for Display</a>
663
 
                                        </li>
664
 
                                    
665
 
                                
666
 
                                    
667
 
                                        <li data-description="DataTable with nested column headers.">
668
 
                                            <a href="datatable-nestedcols.html">Nested Column Headers</a>
669
 
                                        </li>
670
 
                                    
671
 
                                
672
 
                                    
673
 
                                        <li data-description="DataTable with column sorting.">
674
 
                                            <a href="datatable-sort.html">Column Sorting</a>
675
 
                                        </li>
676
 
                                    
677
 
                                
678
 
                                    
679
 
                                        <li data-description="DataTable with vertical and/or horizontal scrolling rows.">
680
 
                                            <a href="datatable-scroll.html">Scrolling DataTable</a>
681
 
                                        </li>
682
 
                                    
683
 
                                
684
 
                            </ul>
685
 
                        </div>
686
 
                    </div>
687
 
                
688
 
 
689
 
                
690
 
            </div>
691
 
        </div>
692
 
    </div>
693
 
</div>
694
 
 
695
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
696
 
<script>prettyPrint();</script>
697
 
 
698
 
</body>
699
 
</html>