8bd9b02c76091e87124abd4afa3d798e637abb3cLuke Smith#docs-main li {
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith margin: 1ex 0;
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith white-space: nowrap;
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith background: #fcfbfa;
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith border: 1px solid #d0d5ec;
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith padding: 0 3px;
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith border-color: #efeeed;
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith.yui3-skin-sam table {
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith width: auto;
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith.yui3-skin-sam td,
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith.yui3-skin-sam th {
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith border: 0 none;
a9d49e77274be440ba8447c626f31bbda9734091Luke Smith.demo { width: 40%; }
a9d49e77274be440ba8447c626f31bbda9734091Luke Smith.details { width: 60%; }
a9d49e77274be440ba8447c626f31bbda9734091Luke Smith.before, .after { width: 47%; }
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith margin-left: 5%;
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith#quickref code em {
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith color: #900;
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith#quickref code strong {
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith color: #090;
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith margin-top: 0;
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith margin-bottom: 0;
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith color: #b00;
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<div class="intro">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith DataTable and supporting modules were rebuilt in version 3.5.0. The
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith new architecture is <strong>not fully backward compatible</strong> with
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith versions 3.4.1 and prior. This guide is to help answer questions that
8bd9b02c76091e87124abd4afa3d798e637abb3cLuke Smith may come up when upgrading to the latest version.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith This guide focuses on 3.4.1 API compatibility. It <strong>does not
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith describe new features added in 3.5.0</strong> (there were a lot).
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith Refer to the updated <a href="index.html">DataTable user guide</a> for
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith If you are unable to upgrade due to unresolvable issues, you can use the
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <a href="../datatable-deprecated/index.html">`datatable-deprecated`</a>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith module suite, which is equivalent to the 3.4.1 implementation. But be
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith aware that these modules will be removed in a future version of YUI.
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<h2 id="overview">Overview of API changes from 3.4.1</h2>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith The architectural change resulted in the deprecation, replacement, or
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith removal of nearly all attributes and properties from the version 3.4.1
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith implementation. Here is a quick list of the changes most likely to affect
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith your upgrade:
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith<ol id="quickref">
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith <code>new <em>Y.DataTable.Base</em>(...)</code> →
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith <code>new <strong>Y.DataTable</strong>({ ... })</code>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <div class="yui3-g">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <div class="yui3-u">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith columnset: [ ... ],
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith recordset: [ ... ]
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <p class="yui3-u" style="line-height: 72px; margin: 0 1em;">→</p>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <div class="yui3-u">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith columns: [ ... ],
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith data : [ ... ]
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith (cells rendered as HTML by default) →
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith <code>columns: [ { key: 'email', <strong>allowHTML: true</strong> }, ... ]</code>
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith <code>table.plug(<em>Y.Plugin.DataTableSort</em>)</code> → <em>(plugin not needed)</em>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <a href="#features">See below</a> or read
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <a href="index.html#sorting">the user guide</a>
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith <code>table.plug(<em>Y.Plugin.DataTableScroll</em>, ...)</code> →
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <em>(plugin not needed)</em>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <a href="#features">See below</a> or read
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <a href="index.html#scrolling">the user guide</a>
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith <code>columnset: [ { <em>formatter: function (o) { ... }</em> } ]</code>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith (formatter changes)
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <a href="#formatters">See below</a> or read
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <a href="index.html#scrolling">the user guide</a>
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith <code>record.<em>getValue(fieldName)</em></code> →
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith <code>record.<strong>get(fieldName)</strong></code>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith<h2 id="instantiation">Instantiation and Instance Configuration Changes</h2>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith As of 3.5.0, `Y.DataTable` is no longer just a namespace, but is now the
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith preferred constructor for DataTable instances.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smithvar table = new Y.DataTable({
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith // Column configuration looks much the same except the attribute name
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { key: 'name', label: 'Name', sortable: true, width: '200px' },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith key: 'birthdate',
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith label: 'Age',
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith sortable: true,
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith formatter: function (o) {
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith var now = new Date(),
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith return years - (o.value < now);
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith // Passing in row data looks much the same except the attribute name
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { name: 'Tom Brokaw', birthdate: new Date(1940, 1, 6) },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { name: 'Peter Jennings', birthdate: new Date(1938, 6, 29) },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { name: 'Katie Couric', birthdate: new Date(1957, 1, 7) },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { name: 'Brian Williams', birthdate: new Date(1958, 4, 5) },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { name: 'Matt Lauer', birthdate: new Date(1957, 11, 30) }
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith}).render('#over-there');
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith The `Y.DataTable.Base` class still exists, but is useful primarily as a
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith superclass for extension. The attributes of `Y.DataTable.Base` are the
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith same as those of `Y.DataTable`, less any attributes added by class
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith extensions (<a href="#features">see below</a>).
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith Configuration attributes that have changed from 3.4.1 are:
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <th>Attribute</th>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <th>Change</th>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <td>`columnset`</td>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <strong>Deprecated</strong>. Use `columns`. `columnset` will
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith behave as an alias for `columns` for a short time, but will be
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith removed in future versions. <a href="#columns">See below</a>.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <td>`recordset`</td>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <strong>Deprecated</strong>. Use `data`. `recordset` will
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith behave as an alias for `data` for a short time, but will be
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith removed in future versions. <a href="#data">See below</a>.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <td>`tdValueTemplate`</td>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <strong>Removed</strong>. Use column `formatter`, `cellTemplate`,
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith or override the `Y.DataTable.BodyView` instance's `CELL_TEMPLATE`.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <td>`thValueTemplate`</td>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <strong>Removed</strong>. Use column `label`, `headerTemplate`,
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith or override the `Y.DataTable.HeaderView` instance's `CELL_TEMPLATE`.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <td>`trTemplate`</td>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <strong>Removed</strong>. Use column `nodeFormatter` or override
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith the `Y.DataTable.BodyView` instance's `ROW_TEMPLATE`.
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith<h2 id="formatters">Table and Cell Formatting Changes</h2>
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith The following changes apply to table and column cell formatting:
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith If cell values include HTML, add `allowHTML: true` to the column
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith configuration. HTML is escaped by default for security.
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith `o.classnames` in the formatter parameter is now `o.className`.
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith `o.column` in the formatter parameter is now <a href="#columns">the
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith plain JavaScript object</a> containing the column configurations rather
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith than a `Y.Column` instance.
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith `o.record` in the formatter parameter is now <a href="#data">a Model
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith instance</a> instead of a `Y.Record` instance.
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith `this.createCell(o)`, `o.td`, `o.tr`, and `o.tbody` no longer exist on
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith the parameter passed to `formatter` functions. Use
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith <a href="index.html#nodeformatter">`nodeFormatter`</a>s.
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith `o.headers` is now at `o.column._headers`, but is read-only for
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith `formatter` functions. If you need to change the cell's headers
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith attribute, add a {placeholder} for them to a custom `cellTemplate` for
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith the column, or use a `nodeFormatter`.
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith The table's `tdValueTemplate`, `thValueTemplate`, and `trTemplate` no
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith longer exist, nor do the DataTable instance properties `tdTemplate` and
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith `thTemplate`. Use `formatter` strings or functions to customize the
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith content of data cells in a column and `label` strings to customize the
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith content of header cells. To modify the `<td>` or `<th>` entirely, set
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith the column configuration `cellTemplate` or `headerTemplate`.
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith<div class="yui3-g">
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith <div class="yui3-u before">
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith <h4 class="no-toc">3.4.1</h4>
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith var table = new Y.DataTable.Base({
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith columnset: [
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith { key: "id",
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith emptyCellValue: "<em>new</em>" },
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith { key: "name" },
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith { key: "price", formatter: "${value}" },
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith { key: "price",
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith formatter: function (o) {
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith return '$' + o.value.toFixed(2);
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith { key: "price",
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith formatter: function (o) {
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith { id: 1, name: "Bread", price: 3.45 },
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith { id: 2, name: "Milk", price: 4.99 },
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith { id: 3, name: "Eggs", price: 2.75 }
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith }).render("#over-there");
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith <div class="yui3-u after">
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith <h4 class="no-toc">3.5.0</h4>
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith var table = new Y.DataTable({
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith { key: "id",
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith emptyCellValue: "<em>new</em>",
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith allowHTML: true },
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith { key: "name" },
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith { key: "price", formatter: "${value}" },
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith { key: "price",
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith formatter: function (o) {
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith return '$' + o.value.toFixed(2);
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith { key: "price",
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith nodeFormatter: function (o) {
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith return false;
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith { id: 1, name: "Bread", price: 3.45 },
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith { id: 2, name: "Milk", price: 4.99 },
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith { id: 3, name: "Eggs", price: 2.75 }
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith }).render("#over-there");
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith Read the <a href="index.html#formatters">Formatting Cell Data</a> section in
2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith the DataTable user guide for more details.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith<h2 id="columns">Column Configuration Changes</h2>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith As of 3.5.0, the `Y.Columnset` and `Y.Column` classes have been deprecated.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith The DataTable configuration attribute `columnset` has been deprecated in
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith favor of the `columns` attribute. The `columnset` attribute has been
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith retained for <em>partial</em> backward compatibility. Columns are now
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith stored as an array of simple JavaScript objects rather than class instances.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smithvar table = new Y.DataTable({
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith columnset: [ 'name', 'age' ],
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith// columnset passes through to columns
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smithvar columns = table.get('columns'); // => Array, not Columnset instance
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smithtable.set('columnset', [ ... (new column configurations) ... ]);
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith// backward compatibility stops here
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smithvar columnset = table.get('columnset'); // => Array, not Columnset instance
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith Strings passed into the column configuration will become objects with those
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith strings as the value of the `key` property.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith See the <a href="index.html#columns">Column configuration</a> section in
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith the user guide for more details.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith<h2 id="data">Row Data Configuration Changes</h2>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith As of 3.5.0, DataTable uses `Y.Model` and `Y.ModelList` to store row data.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith `Y.Recordset` and `Y.Record` haven't been deprecated, but may be in the
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith future. The `recordset` attribute has been retained for <em>partial</em>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith backward compatibility. The `data` ModelList can be assigned to, but
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith retrieving the value of the attribute will return the ModelList, <em>not
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith a `Y.Recordset` instance</em>.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smithvar table = new Y.DataTable({
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith columnset: [ ... ],
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith recordset: [
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { name: 'Tom Brokaw', birthdate: new Date(1940, 1, 6) },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { name: 'Peter Jennings', birthdate: new Date(1938, 6, 29) },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { name: 'Katie Couric', birthdate: new Date(1957, 1, 7) },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith// recordset passes through to data.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smithvar data = table.get('data'); // => ModelList instance
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smithtable.set('recordset', [ ... (new data records) ... ]);
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith// backward compatibility stops here
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smithvar recordset = table.get('recordset'); // => ModelList, not Recordset
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith `Y.Record` stores all values in a single attribute named `data`, where `Y.Model` uses individual attributes for each value.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith<div class="yui3-g">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <div class="yui3-u before">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <h4 class="no-toc">3.4.1</h4>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith var record = oldTable.get('recordset').item(0);
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith record.getValue('birthdate'); // => Date(1940, 1, 6)
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith record.get('data').birthdate; // => same
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <div class="yui3-u after">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <h4 class="no-toc">3.5.0</h4>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith var model = newTable.getRecord(0);
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith model.get('birthdate'); // => Date(1940, 1, 6)
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <strong>This change breaks column/record keys that contain periods</strong>.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith Attribute treats periods as subproperty indicators, so periods are no
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith longer allowed; use an alternate character. In the case of remote data
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith that is parsed by `Y.Plugin.DataSourceJSONSchema`, use the `locator`
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith configuration for fields to extract subproperty values. A benefit to doing
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith this is that you may not need to specify a column `label`.
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<div class="yui3-g">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <div class="yui3-u before">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <h4 class="no-toc">3.4.1</h4>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith var table = new Y.DataTable.Base({
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith columnset: [
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { key: "id" },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { key: "Product.Name", label: "Product" },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { key: "Product.Price", label: "Price" }
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith caption: "Price List"
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith datasource: new Y.DataSource.IO({
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith resultListLocator: "items",
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith resultFields: [
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { key: "id" },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <div class="yui3-u after">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <h4 class="no-toc">3.5.0</h4>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith var table = new Y.DataTable({
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith columns: [ "id", "Product", "Price" ],
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith caption: "Price List"
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith datasource: new Y.DataSource.IO({
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith resultListLocator: "items",
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith resultFields: [
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { key: "id" },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { key: "Product",
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { key: "Price",
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith If you are using any Recordset plugins, your code will need to be modified.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith Some loss of functionality may result.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith This plugin was formerly applied by the `Y.Plugin.DataTableSort` plugin
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith to the DataTable's Recordset instance. Sorting is now enabled
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <a href="#features">through a class extension</a>.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith The default ModelList implementation only supports a `filter(function)`
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith method. If you were relying on this plugin's `grep` or `reject`
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith methods or the `filter(key, value)` functionality, you will need to
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith replace that functionality through custom code.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith The default ModelList implementation does not support multiple custom
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith indexes, though it does maintain an index for `id` (or another,
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith assigned primary key attribute) and `clientId`. See
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <a href="../model/index.html">the Model user guide</a> for more
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith information on customizing the primary index. If multiple custom
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith indexes are required, DataTable supports the use of
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <a href="#recordtype">custom Model subclasses</a> to store the record
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith See the <a href="#data">Data Configuration section</a> of the DataTable
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith user guide for more information.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith<h2 id="features">Feature Configuration Changes</h2>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith The two optional features available for DataTable in 3.4.1 were sorting and
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith scrolling. Both features exist in 3.5.0, but are implemented as class
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith extensions for `Y.DataTable`. Simply including the `datatable-sort` or
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith `datatable-scroll` module in your `use(...)` will enable the feature for
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith all new DataTables.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke SmithYUI().use('datatable-sort', 'datatable-scroll', function (Y) {
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith // Create a DataTable that is sortable by the "name" column, and is
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith // configured to scroll vertically within 300px. Because scrollable is
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith // set to "y", not "x" or "xy", it will not attempt to scroll horizontally.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith // Instead the table width will be set to 100%.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith var table = new Y.DataTable({
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith columns : [ { key: 'name', sortable: true }, ... ],
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith data : [ ... ],
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith scrollable: "y",
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith height : "300px",
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith width : "100%"
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith // No plugins necessary
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith table.render('#over-there');
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith<h3 id="sorting">Column Sorting Changes</h3>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith Configuring sortable columns may be done as it was in 3.4.1, by setting the
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith column configuration property `sortable: true`, but may also be done by
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith setting the DataTable's `sortable` configuration to `true` or an array of
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith column names.
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<div class="yui3-g">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <div class="yui3-u before">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <h4 class="no-toc">3.4.1</h4>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith // Assumes use('datatable-sort') or use('datatable')
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith var table = new Y.DataTable.Base({
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith columnset: [
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { key: "id" },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { key: "name", sortable: true },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { key: "price", sortable: true }
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith recordset: [
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { id: 1, name: "Bread", price: 3.45 },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { id: 2, name: "Milk", price: 4.99 },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { id: 3, name: "Eggs", price: 2.75 },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith caption: "Price List"
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith table.render('#sort-demo');
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith // Sorting API is on the Recordset's plugin
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <div class="yui3-u after">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <h4 class="no-toc">3.5.0</h4>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith // Assumes use('datatable-sort') or use('datatable')
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith var table = new Y.DataTable({
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith columns: [ "id", "name", "price" ],
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { id: 1, name: "Bread", price: 3.45 },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { id: 2, name: "Milk", price: 4.99 },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { id: 3, name: "Eggs", price: 2.75 },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith sortable: [ "name", "price" ]
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith table.render('#sort-demo');
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith // Sort method is on the instance
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith //-------------------------------------------------
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith // Alternate methods
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith //-------------------------------------------------
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith var table = new Y.DataTable({
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith columns: [ "id", "name", "price" ],
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith data: [ ... ],
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith sortable: true // makes all columns sortable
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith // OR the old way works, too
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith var table = new Y.DataTable({
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { key: "id" },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { key: "name", sortable: true },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { key: "price", sortable: true }
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith data: [ ... ]
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith Since there is no plugin, the `sort` method is now on the DataTable instance
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith itself, as are the related attributes. In particular, the `lastSortedBy`
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith attribute from the plugin implementation has been replaced by the `sortBy`
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith attribute added by the class extension.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith As of 3.5.0, DataTables configured with `sortBy` will have their rows
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith sorted automatically upon inserting into the table. You do not need to
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith presort data for the initial render.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <strong>The `trigger` attribute of the sorting plugin was not retained in
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith the 3.5.0 class extension</strong>. If you require an alternate triggering
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith event, detach and replace the table's `_sortHandle` property after
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smithvar table = new Y.DataTable({ ... }).render("#over-there");
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smithtable._sortHandle = table.delegate(["dblclick", "keydown"],
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith table._onUITriggerSort, ".yui3-datatable-sortable-column", table);
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith See the <a href="index.html#sorting">Column Sorting section</a> of the
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith user guide for details about the APIs and attributes.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith<h3 id="scrolling">Scrollable Table Changes</h3>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith Like sorting, the scrolling functionality has been moved to a class
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith extension, making it unnecessary to plug the DataTable instance with the
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith (now deprecated) `Y.Plugin.DataTableScroll` plugin.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <strong>`datatable-scroll` is no longer included in the `datatable`
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith rollup</strong>, and must be explicitly included in your `use()` statement.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith To enable scrolling in 3.5.0, set the table's `scrollable` attribute to "x",
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith "y", or "xy". The configured `height` and `width` for the DataTable are
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith used to bound the overall widget dimesions. Scrolling will only be applied
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith on the axis or axes specified in `scrollable`. However, if `scrollable` is
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith set to "y", but the `height` isn't set, it will not be made scrollable.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith Likewise for "x" and `width`.
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<div class="yui3-g">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <div class="yui3-u before">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <h4 class="no-toc">3.4.1</h4>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith // Assumes use("datatable-scroll") or use("datatable")
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith var table = new Y.DataTable.Base({
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith columnset: ["id", "name", "price"],
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith recordset: [
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { id: 1, name: "Bread", price: 3.45 },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { id: 2, name: "Milk", price: 4.99 },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { id: 3, name: "Eggs", price: 2.75 },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith height: "175px"
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith table.render("#over-there");
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <div class="yui3-u after">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <h4 class="no-toc">3.5.0</h4>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith // Assumes use("datatable-scroll")
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith var table = new Y.DataTable({
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith columns: ["id", "name", "price"],
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { id: 1, name: "Bread", price: 3.45 },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { id: 2, name: "Milk", price: 4.99 },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith { id: 3, name: "Eggs", price: 2.75 },
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith scrollable: "y",
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith height: "175px"
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith }).render("#over-there");
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith<h2 id="markup">Markup and CSS Changes</h2>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith DataTable in 3.5.0 applies more CSS classes to Nodes, stamps fewer nodes
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith with guid ids, and does not render header and cell liner `<div>`s.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith Below are examples of the same table rendered in 3.4.1 and 3.5.0. The 3.5.0
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith table has comments indicating markup added by feature modules.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith<h4 class="no-toc">3.4.1</h4>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith<div id="(guid)" class="yui3-widget yui3-datatable">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <div id="(guid)" class="yui3-datatable-content">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith Example table with simple columns
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <thead class="yui3-datatable-columns">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <tr id="" class="yui3-datatable-first yui3-datatable-last">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <th id="(guid)" rowspan="1" colspan="1" class="yui3-column-id" abbr="">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <div class="yui3-datatable-liner">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <th id="(guid)" rowspan="1" colspan="1" class="yui3-column-name" abbr="">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <div class="yui3-datatable-liner">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <th id="(guid)" rowspan="1" colspan="1" class="yui3-column-price" abbr="">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <div class="yui3-datatable-liner">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <tbody class="yui3-datatable-msg">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <tbody class="yui3-datatable-data" id="(guid)">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <tr id="(guid)" class="yui3-datatable-even">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <td headers="(guid)" class="yui3-column-id">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <div class="yui3-datatable-liner">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <td headers="(guid)" class="yui3-column-name">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <div class="yui3-datatable-liner">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <td headers="(guid)" class="yui3-column-price">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <div class="yui3-datatable-liner">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <tr id="(guid)" class="yui3-datatable-odd">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <td headers="(guid)" class="yui3-column-id">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <div class="yui3-datatable-liner">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <td headers="(guid)" class="yui3-column-name">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <div class="yui3-datatable-liner">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <td headers="(guid)" class="yui3-column-price">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <div class="yui3-datatable-liner">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <tr id="(guid)" class="yui3-datatable-even">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <td headers="(guid)" class="yui3-column-id">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <div class="yui3-datatable-liner">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <td headers="(guid)" class="yui3-column-name">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <div class="yui3-datatable-liner">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <td headers="(guid)" class="yui3-column-price">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <div class="yui3-datatable-liner">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith<h4 class="no-toc">3.5.0</h4>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith<div id="(guid)" class="yui3-widget yui3-datatable">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <div id="(guid)" class="yui3-datatable-content">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <table cellspacing="0" class="yui3-datatable-table" id="(guid)">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <caption class="yui3-datatable-caption">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <!-- colgroup only renders if datatable-column-widths is use()d.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith Note, datatable-column-widths is included in the datatable rollup -->
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <colgroup id="(guid)">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <thead class="yui3-datatable-columns" id="(guid)">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <th id="(guid)" colspan="1" rowspan="1" class="yui3-datatable-header yui3-datatable-first-header yui3-datatable-col-id" scope="col" data-yui3-col-id="id">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <th id="(guid)" colspan="1" rowspan="1" class="yui3-datatable-header yui3-datatable-col-name" scope="col" data-yui3-col-id="name">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <th id="(guid)" colspan="1" rowspan="1" class="yui3-datatable-header yui3-datatable-col-price" scope="col" data-yui3-col-id="price">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <!-- The message tbody only renders if datatable-message is use()d.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith Note, datatable-message is included in the datatable rollup -->
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <tbody class="yui3-datatable-message" id="(guid)">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <td class="yui3-datatable-message-content" colspan="3">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith No data to display
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <tbody class="yui3-datatable-data">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <tr id="(guid)" data-yui3-record="record_1" class="yui3-datatable-even">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <td class="yui3-datatable-col-id yui3-datatable-cell">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <td class="yui3-datatable-col-name yui3-datatable-cell">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <td class="yui3-datatable-col-price yui3-datatable-cell">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <tr id="(guid)" data-yui3-record="record_2" class="yui3-datatable-odd">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <td class="yui3-datatable-col-id yui3-datatable-cell">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <td class="yui3-datatable-col-name yui3-datatable-cell">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <td class="yui3-datatable-col-price yui3-datatable-cell">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <tr id="(guid)" data-yui3-record="record_3" class="yui3-datatable-even">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <td class="yui3-datatable-col-id yui3-datatable-cell">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <td class="yui3-datatable-col-name yui3-datatable-cell">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <td class="yui3-datatable-col-price yui3-datatable-cell">
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith<h2 id="help-me">What Did I Miss?</h2>
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith Obviously, there were a lot of changes to DataTable from 3.4.1 to 3.5.0.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith It's entirely likely that I have missed something here. If you experience
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith trouble with your upgrade and find this migration guide is missing
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith something important, please <a href="/projects/yui3/newticket">file a
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith ticket</a> and I'll update it as soon as possible.
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith Additional resources to help with the upgrade include the
4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith <a href="/forum">forums</a>, and the #yui IRC channel on freenode.net.