migration.mustache revision a9d49e77274be440ba8447c626f31bbda9734091
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews.yui3-skin-sam table {
1fa26403d7679235a30fbf6289f68fed5872df30Mark Andrews width: auto;
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews.yui3-skin-sam td,
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews.yui3-skin-sam th {
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews border: 0 none;
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews.demo { width: 40%; }
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington.details { width: 60%; }
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews.before, .after { width: 47%; }
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews margin-left: 5%;
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews color: #b00;
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews<div class="intro">
91216cff91b34c9ff6e846dc23f248219cafe660Andreas Gustafsson In version 3.5.0, DataTable and supporting modules underwent a major
91216cff91b34c9ff6e846dc23f248219cafe660Andreas Gustafsson refactoring. The new architecture <strong>does not support full backward
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews compatibility</strong> with versions 3.4.1 and prior. This guide should
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews help answer questions that may come up when upgrading to the lastest
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews<h2 id="overview">Overview of API changes from 3.4.1</h2>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews The architectural change resulted in the deprecation, replacement, or
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews removal of nearly all attributes and properties from the version 3.4.1
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews implementation. We'll go into details below, but here are the high points:
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <li>`Y.DataTable` is now the preferred class for instantiation.</li>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <li>The `recordset` attribute is deprecated. Use `data`.</li>
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews <li>The `columnset` attribute is deprecated. Use `columns`.</li>
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews Cell formatters have changed a little, template attributes and
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews properties a lot.
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews <li>Table markup has changed.</li>
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews <li>Table sorting is now via configuration, not plugin.</li>
91216cff91b34c9ff6e846dc23f248219cafe660Andreas Gustafsson <li>Table scrolling is now via configuration, not plugin.</li>
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews<h2 id="before-and-after">Before And After</h2>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews Below are some common DataTable setups, each showing what changes you'll
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews need to make for 3.5.0+
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews<h3 id="quick-basic">Basic Table</h3>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews<div class="yui3-g" dir="rtl">
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <div class="details yui3-u" dir="ltr">
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <h4 class="no-toc">What changed</h4>
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews <li>`Y.DataTable.Base` → `Y.DataTable`</li>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <li>`columnset` → `columns`</li>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <li>`recordset` → `data`</li>
91216cff91b34c9ff6e846dc23f248219cafe660Andreas Gustafsson `columnset` and `recordset` attributes are deprecated and pass through
91216cff91b34c9ff6e846dc23f248219cafe660Andreas Gustafsson to their new counterpart attributes. <strong>Note</strong>:
91216cff91b34c9ff6e846dc23f248219cafe660Andreas Gustafsson `table.get("recordset")` will NOT return an instance of `Y.Recordset`
91216cff91b34c9ff6e846dc23f248219cafe660Andreas Gustafsson and `table.get("columnset")` will NOT return an instance of
91216cff91b34c9ff6e846dc23f248219cafe660Andreas Gustafsson `Y.Columnset`. Table data is now stored in a
91216cff91b34c9ff6e846dc23f248219cafe660Andreas Gustafsson <a href="../model-list/index.html">`Y.ModelList`</a>, and column data
91216cff91b34c9ff6e846dc23f248219cafe660Andreas Gustafsson is maintained as a simple array of objects.
91216cff91b34c9ff6e846dc23f248219cafe660Andreas Gustafsson These changes are applicable to all examples below as well.
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews <div class="demo yui3-u yui3-skin-sam" dir="ltr">
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <div id="basic-demo"></div>
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews YUI().use('datatable', function (Y) {
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews var table = new Y.DataTable({
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews columns: ["id", "name", "price"],
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 1, name: "Bread", price: 3.45 },
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 2, name: "Milk", price: 4.99 },
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 3, name: "Eggs", price: 2.75 }
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews caption: "Price List"
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews }).render('#basic-demo');
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews<div class="yui3-g">
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <div class="yui3-u before">
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <h4 class="no-toc">Before</h4>
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrewsvar table = new Y.DataTable.Base({
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews columnset: ["id", "name", "price"],
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews recordset: [
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 1, name: "Bread", price: 3.45 },
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 2, name: "Milk", price: 4.99 },
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews { id: 3, name: "Eggs", price: 2.75 }
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews caption: "Price List"
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews}).render('#basic-demo');
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <div class="yui3-u after">
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews <h4 class="no-toc">After</h4>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrewsvar table = new Y.DataTable({
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews columns: ["id", "name", "price"],
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 1, name: "Bread", price: 3.45 },
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 2, name: "Milk", price: 4.99 },
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 3, name: "Eggs", price: 2.75 }
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews caption: "Price List"
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews}).render('#basic-demo');
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews<h3 id="quick-remote">Table With Remote Data</h3>
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews<div class="yui3-g" dir="rtl">
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews <div class="details yui3-u" dir="ltr">
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <h4 class="no-toc">What Changed</h4>
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington <li>`Y.DataTable.Base` → `Y.DataTable`</li>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <li>`columnset` → `columns`</li>
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews <li>`recordset` → `data`</li>
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews Nothing beyond changing the DataTable class and attributes as noted
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews <div class="demo yui3-u yui3-skin-sam" dir="ltr">
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews <div id="remote-demo"></div>
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington YUI().use('datatable', 'datatable-datasource', function (Y) {
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews var table = new Y.DataTable({
09344332cf7840e7e219215128fd52ea4c3d6942Mark Andrews columns: ["id", "name", "price"],
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews caption: "Price List"
91216cff91b34c9ff6e846dc23f248219cafe660Andreas Gustafsson // Just pretend this is remote. It works the same anyway
91216cff91b34c9ff6e846dc23f248219cafe660Andreas Gustafsson var source = new Y.DataSource.Local({
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington { id: 1, name: "Bread", price: 3.45 },
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews { id: 2, name: "Milk", price: 4.99 },
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 3, name: "Eggs", price: 2.75 }
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews // (optional) Add DataSource plugins
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews datasource: source
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews table.render('#remote-demo');
91216cff91b34c9ff6e846dc23f248219cafe660Andreas Gustafsson<div class="yui3-g">
91216cff91b34c9ff6e846dc23f248219cafe660Andreas Gustafsson <div class="yui3-u before">
91216cff91b34c9ff6e846dc23f248219cafe660Andreas Gustafsson <h4 class="no-toc">Before</h4>
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews columnset: ["id", "name", "price"],
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington caption: "Price List"
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrewsvar source = new Y.DataSource.IO({
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews}).plug(Y.Plugin.DataSourceJSONSchema, { ... });
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews datasource: source
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellingtontable.render('#remote-demo');
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington <div class="yui3-u after">
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington <h4 class="no-toc">After</h4>
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian WellingtonYUI().use('datatable', 'datatable-datasource', function (Y) {
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington var table = new Y.DataTable({
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington columns: ["id", "name", "price"],
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington caption: "Price List"
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington // Everything else is the same as before...
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington<h3 id="quick-formatter">Formatted Columns</h3>
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington<div class="yui3-g" dir="rtl">
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington <div class="details yui3-u" dir="ltr">
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington <h4 class="no-toc">What Changed</h4>
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington <li>`o.classnames` → `o.className`</li>
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington <li>`this.createCell(o)` → `o.cell` in `nodeFormatter`s</li>
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington `formatter` no longer supports accessing the `<td>`, `<tr>`, or
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington `<tbody>` Nodes from the object passed to the formatter. This
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington functionality has been moved to `nodeFormatter`s. See the <a
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington href="index.html#formatters">Formatting Cell Data</a> section in
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington the user guide for more details.
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington <div class="demo yui3-u yui3-skin-sam" dir="ltr">
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington <div id="formatter-demo"></div>
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington YUI().use('datatable', function (Y) {
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington var table = new Y.DataTable({
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington { key: "price", formatter: "${value}" },
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington { key: "price",
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington formatter: function (o) {
d4ef65050feac78554addf6e16a06c6e2e0bd331Brian Wellington return '$' + o.value.toFixed(2);
d4ef65050feac78554addf6e16a06c6e2e0bd331Brian Wellington { key: "price",
d4ef65050feac78554addf6e16a06c6e2e0bd331Brian Wellington nodeFormatter: function (o) {
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington return false;
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington { id: 1, name: "Bread", price: 3.45 },
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 2, name: "Milk", price: 4.99 },
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 3, name: "Eggs", price: 2.75 }
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews caption: "Price List"
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews }).render('#formatter-demo');
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews<div class="yui3-g">
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <div class="yui3-u before">
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <h4 class="no-toc">Before</h4>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrewsvar table = new Y.DataTable.Base({
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews columnset: [
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington { key: "price", formatter: "\\${value}" },
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington { key: "price",
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington formatter: function (o) {
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington return '$' + o.value.toFixed(2);
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington { key: "price",
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington formatter: function (o) {
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 1, name: "Bread", price: 3.45 },
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 2, name: "Milk", price: 4.99 },
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington { id: 3, name: "Eggs", price: 2.75 }
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews caption: "Price List"
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews}).render('#formatter-demo');
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington <div class="yui3-u after">
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews <h4 class="no-toc">After</h4>
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellingtonvar table = new Y.DataTable({
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington { key: "price", formatter: "${value}" },
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington { key: "price",
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington formatter: function (o) {
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington return '$' + o.value.toFixed(2);
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington { key: "price",
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington nodeFormatter: function (o) {
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington return false;
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington { id: 1, name: "Bread", price: 3.45 },
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington { id: 2, name: "Milk", price: 4.99 },
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington { id: 3, name: "Eggs", price: 2.75 }
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington caption: "Price List"
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington}).render('#formatter-demo');
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews<h3 id="quick-sort">Sortable Table</h3>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews<div class="yui3-g" dir="rtl">
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <div class="details yui3-u" dir="ltr">
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <h4 class="no-toc">What Changed</h4>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <li>Column `sortable: true` is now optional</li>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <li>Table attribute `sortable` added</li>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <li><del>`plug(Y.Plugin.DataTableSort)`</del></li>
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington Table sorting has been moved from a plugin to a class extension.
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington The module to include is still `datatable-sort`, but now column
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington sorting is enabled by default for those columns declared with
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington `sortable: true`. It is unnecessary to call
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington `table.plug(Y.Plugin.DataTableSort)` — and doesn't do anything
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington The `sortable` attribute of DataTable instances (note, <em>not</em>
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington the column declarations) now controls a tables ability to be sorted
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington by column header clicks. The default value for `sortable` is
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington "auto", which tells the DataTable to look at your column
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington definitions for the same `sortable: true` configuration used in 3.4.1
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington See the "After" snippet below or the
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington <a href="index.html#sorting">Column Sorting</a> section in the main
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington use guide for details about other `sortable` options.
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews <div class="demo yui3-u yui3-skin-sam" dir="ltr">
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <div id="sort-demo"></div>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews YUI().use('datatable', function (Y) {
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews var table = new Y.DataTable({
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { key: "id" },
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington { key: "name", sortable: true },
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews { key: "price", sortable: true }
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington { id: 1, name: "Bread", price: 3.45 },
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 2, name: "Milk", price: 4.99 },
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 3, name: "Eggs", price: 2.75 },
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 4, name: "Apples", price: 0.79 },
d4ef65050feac78554addf6e16a06c6e2e0bd331Brian Wellington { id: 5, name: "Daikon", price: 1.22 },
d4ef65050feac78554addf6e16a06c6e2e0bd331Brian Wellington { id: 6, name: "Onions", price: 0.86 },
d4ef65050feac78554addf6e16a06c6e2e0bd331Brian Wellington { id: 7, name: "Garlic", price: 0.13 },
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 8, name: "Sugar", price: 5.99 },
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews { id: 9, name: "Beets", price: 0.93 }
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews caption: "Price List"
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews table.render('#sort-demo');
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews<div class="yui3-g">
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews <div class="yui3-u before">
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews <h4 class="no-toc">Before</h4>
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrewsvar table = new Y.DataTable.Base({
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews columnset: [
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { key: "id" },
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { key: "name", sortable: true },
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { key: "price", sortable: true }
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 1, name: "Bread", price: 3.45 },
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews { id: 2, name: "Milk", price: 4.99 },
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 3, name: "Eggs", price: 2.75 },
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews caption: "Price List"
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <div class="yui3-u after">
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <h4 class="no-toc">After</h4>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrewsvar table = new Y.DataTable({
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington { key: "id" },
ca9a8f6d0b0f2a400a96f868193471510364336fMark Andrews { key: "name", sortable: true },
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews { key: "price", sortable: true }
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews { id: 1, name: "Bread", price: 3.45 },
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews { id: 2, name: "Milk", price: 4.99 },
854b0d831e45a90211917e3a49f40d10c4a2ee79Mark Andrews { id: 3, name: "Eggs", price: 2.75 },
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews caption: "Price List"
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrewsvar table = new Y.DataTable({
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews columns: [ "id", "name", "price" ],
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews sortable: [ "name", "price" ],
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington data: [ ... ],
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrewsvar table = new Y.DataTable({
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews columns: [ "id", "name", "price" ],
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews sortable: true, // makes all columns sortable
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews data: [ ... ],
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews<h3 id="quick-scroll">Scrolling Table</h3>
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews<div class="yui3-g" dir="rtl">
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <div class="details yui3-u" dir="ltr">
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington <h4 class="no-toc">What Changed"</h4>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <div class="demo yui3-u yui3-skin-sam" dir="ltr">
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington <div id="scroll-demo"></div>
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington YUI().use('datatable-scroll', function (Y) {
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews var table = new Y.DataTable({
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews columns: ["id", "name", "price"],
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 1, name: "Bread", price: 3.45 },
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 2, name: "Milk", price: 4.99 },
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 3, name: "Eggs", price: 2.75 },
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 4, name: "Apples", price: 0.79 },
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 5, name: "Daikon", price: 1.22 },
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington { id: 6, name: "Onions", price: 0.86 },
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington { id: 7, name: "Garlic", price: 0.13 },
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews { id: 8, name: "Sugar", price: 5.99 },
7a6ad11e0185a73984410f3252f3c49c3a301dbdBrian Wellington { id: 9, name: "Beets", price: 0.93 }
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews scrollable: "y",
7a6ad11e0185a73984410f3252f3c49c3a301dbdBrian Wellington height: "175px",
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews caption: "Price List"
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews }).render('#scroll-demo');
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington<div class="yui3-g">
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington <div class="yui3-u before">
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington <h4 class="no-toc">Before</h4>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <li>`plug(Y.Plugin.DataTableScroll, ...)`</li>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <li>`height` configured in plugin</li>
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington <li>No table configs</li>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrewsvar table = new Y.DataTable.Base({
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews columnset: ["id", "name", "price"],
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 1, name: "Bread", price: 3.45 },
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 2, name: "Milk", price: 4.99 },
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 3, name: "Eggs", price: 2.75 },
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews caption: "Price List"
e076d0c88be69de7c190ab924d095e69d2e11f7aAndreas Gustafsson height: "175px"
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <div class="yui3-u after">
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <h4 class="no-toc">After</h4>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <li><del>`plug(Y.Plugin.DataTableScroll, ...)`</del></li>
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington <li>`height` configured in table</li>
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews <li>`scrollable: "y"` configured in table</li>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrewsvar table = new Y.DataTable({
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews columns: ["id", "name", "price"],
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews { id: 1, name: "Bread", price: 3.45 },
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington { id: 2, name: "Milk", price: 4.99 },
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews { id: 3, name: "Eggs", price: 2.75 },
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington scrollable: "y",
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews height: "175px",
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington caption: "Price List"
d4ef65050feac78554addf6e16a06c6e2e0bd331Brian Wellington}).render('#scroll-demo');
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington<h3 id="quick-mutable">Adding/Removing/Modifying Table Rows</h3>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews<div class="demo yui3-skin-sam">
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <div id="mutable-demo"></div>
068a66979695c77359e7a9181bb3f831c965b21cMark AndrewsYUI().use('datatable', function (Y) {
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington var table = new Y.DataTable({
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews columns: ["id", "name", "price"],
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington { id: 1, name: "Bread", price: 3.45 },
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 2, name: "Milk", price: 4.99 },
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 3, name: "Eggs", price: 2.75 }
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews caption: "Price List"
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews }).render('#mutable-demo');
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews table.addRow({ id: 4, name: "Cheese", price: 24.97 });
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington table.modifyRow(1, { name: "Artisan bread" });
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews<div class="yui3-g">
53aed64e0f8553762fc0c380ee41cb42f514c7d5Brian Wellington <div class="yui3-u before">
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <h4 class="no-toc">Before</h4>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <li>`columnset`</li>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <li>`recordset`</li>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrewsvar table = new Y.DataTable.Base({
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews columnset: ["id", "name", "price"],
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 1, name: "Bread", price: 3.45 },
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews { id: 2, name: "Milk", price: 4.99 },
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 3, name: "Eggs", price: 2.75 }
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews caption: "Price List"
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews}).render('#basic-demo');
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <div class="yui3-u after">
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington <h4 class="no-toc">After</h4>
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington <li>`columns`</li>
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews <li>`data`</li>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrewsvar table = new Y.DataTable({
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews columns: ["id", "name", "price"],
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews { id: 1, name: "Bread", price: 3.45 },
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington { id: 2, name: "Milk", price: 4.99 },
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington { id: 3, name: "Eggs", price: 2.75 }
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews caption: "Price List"
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews}).render('#basic-demo');
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews<h2 id="classes">Class Structure Changes</h2>
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews `Y.DataTable.Base` should only be used as a base class for creating custom
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews DataTable subclasses.
73eb75dc212911e4da58a3ce0a4672d3910193ebBrian Wellington<h2 id="columns">Column Configuration Changes</h2>
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews `columnset` will
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews be maintained as a relay to `columns` in 3.5.0, but will be removed in
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews future versions. <strong>`table.get("columnset")` will not return a
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews `Y.Columnset` instance</strong>.
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews<h2 id="columns">Data Storage Changes</h2>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews `recordset` will
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews be maintained as a relay to `data` in 3.5.0, but will be removed in
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews future versions. <strong>`table.get("recordset")` will return a
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews `Y.ModelList` instance, not a `Y.Recordset` instance</strong>.
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington<h2 id="columns">Cell Formatting Changes</h2>
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews Attributes `tdValueTemplate`, `thValueTemplate`, `trTemplate`, and
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews properties `tdTemplate` and `thTemplate` have been removed.
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews Modifications to the templates used to generate the markup should be
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews done on the `Y.DataTable.HeaderView` and `Y.DataTable.BodyView` class
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews templates, such as `Y.DataTable.BodyView.prototype.CELL_TEMPLATE` or
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews decorated with column `formatter`s.
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews Column `formatters` no longer have access to the cell Node. This
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews functionality has been moved to `nodeFormatter`s. See
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington <a href="index.html#formatters">Formatting Cell Data</a> for details.
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington including the addition of a new
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington column configuration property: `nodeFormatter`.
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews<h2 id="columns">Table Sorting Changes</h2>
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews `Y.Plugin.DataTableSort` has been deprecated. Sorting can be
9e3a7b0faf417a10f5f689edf288807b2d5eedc5Brian Wellington <a href="#sort">enabled by attribute configuration</a> on `Y.DataTable`
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews instance directly when using `datatable-sort`.
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews Column sorting `trigger` has been removed. If you need a different
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews trigger that the `click` event, override the table's `_bindSortUI`
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews method prior to calling `render()`.
75216e007570b8ea36b3ac9cca096bf70c0ca6f6Mark Andrews<h2 id="columns">Scrolling Table Changes</h2>
8227257b1c0224a7991e04bb79dc5059d5062dfbAndreas Gustafsson `Y.Plugin.DataTableScroll` has been deprecated. Scrolling can be
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews <a href="index.html#scroll">enabled by attribute configuration</a> on `Y.DataTable`
068a66979695c77359e7a9181bb3f831c965b21cMark Andrews instance directly when using `datatable-scroll`.