migration.mustache revision e8d16592842bdb884e0e4d938f334b6ac5b7cad0
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;
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith.before, .after {
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith margin-left: 5%;
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith color: #b00;
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<div class="intro">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith In version 3.5.0, DataTable and supporting modules underwent a major
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith refactoring. The new architecture <strong>does not support full backward
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith compatibility</strong> with versions 3.4.1 and prior. This guide should
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith help answer questions that may come up when upgrading to the lastest
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
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith implementation. We'll go into details below, but here are the high points:
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>`Y.DataTable` is now the preferred class for instantiation.</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>The `recordset` attribute is deprecated. Use `data`.</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>The `columnset` attribute is deprecated. Use `columns`.</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith Cell formatters have changed a little, template attributes and
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith properties a lot.
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>Table markup has changed.</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>Table sorting is now via configuration, not plugin.</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>Table scrolling is now via configuration, not plugin.</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<h2 id="before-after">A Quick Before-And-After</h2>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith Unless you were really digging into the guts of DataTable, just changing
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith `DataTable.Base` to `DataTable`, `columnset` to `columns`, and `recordset`
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith to `data` should get you most of the way there.
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<h3 id="quick-basic">Basic Table</h3>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<div class="demo yui3-skin-sam">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <div id="basic-demo"></div>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke SmithYUI().use('datatable', function (Y) {
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith columns: ["id", "name", "price"],
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 1, name: "Bread", price: 3.45 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 2, name: "Milk", price: 4.99 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 3, name: "Eggs", price: 2.75 }
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith caption: "Price List"
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith }).render('#basic-demo');
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<div class="yui3-g">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <div class="yui3-u before">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <h4>Before</h4>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>`columnset`</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>`recordset`</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smithvar table = new Y.DataTable.Base({
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith columnset: ["id", "name", "price"],
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith recordset: [
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 1, name: "Bread", price: 3.45 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 2, name: "Milk", price: 4.99 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 3, name: "Eggs", price: 2.75 }
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith caption: "Price List"
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith}).render('#basic-demo');
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <div class="yui3-u after">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <h4>After</h4>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>`columns`</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>`data`</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smithvar table = new Y.DataTable({
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith columns: ["id", "name", "price"],
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 1, name: "Bread", price: 3.45 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 2, name: "Milk", price: 4.99 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 3, name: "Eggs", price: 2.75 }
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith caption: "Price List"
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith}).render('#basic-demo');
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<h3 id="quick-remote">Table With Remote Data</h3>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<div class="demo yui3-skin-sam">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <div id="remote-demo"></div>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke SmithYUI().use('datatable', 'datatable-datasource', function (Y) {
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith var table = new Y.DataTable({
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith columns: ["id", "name", "price"],
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith caption: "Price List"
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith // Just pretend this is remote. It works the same anyway
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith var source = new Y.DataSource.Local({
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 1, name: "Bread", price: 3.45 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 2, name: "Milk", price: 4.99 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 3, name: "Eggs", price: 2.75 }
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith // (optional) Add DataSource plugins
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith datasource: source
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith table.render('#remote-demo');
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<div class="yui3-g">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <div class="yui3-u before">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <h4>Before</h4>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>`columnset`</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>`recordset`</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smithvar table = new Y.DataTable.Base({
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith columnset: ["id", "name", "price"],
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith caption: "Price List"
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smithvar source = new Y.DataSource.IO({
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith datasource: source
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smithtable.render('#remote-demo');
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <div class="yui3-u after">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <h4>After</h4>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>`columns`</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>`data`</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke SmithYUI().use('datatable', 'datatable-datasource', function (Y) {
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith var table = new Y.DataTable({
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith columns: ["id", "name", "price"],
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith caption: "Price List"
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith // Everything else is the same as before...
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<h3 id="quick-formatter">Formatted Columns</h3>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<div class="demo yui3-skin-sam">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <div id="formatter-demo"></div>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke SmithYUI().use('datatable', function (Y) {
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { key: "price", formatter: "${value}" },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { key: "price",
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith formatter: function (o) {
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith return '$' + o.value.toFixed(2);
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { key: "price",
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith nodeFormatter: function (o) {
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith return false;
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 1, name: "Bread", price: 3.45 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 2, name: "Milk", price: 4.99 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 3, name: "Eggs", price: 2.75 }
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith caption: "Price List"
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith }).render('#formatter-demo');
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<div class="yui3-g">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <div class="yui3-u before">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <h4>Before</h4>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>`formatter: "\\${value}"`</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>`formatter`</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smithvar table = new Y.DataTable.Base({
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith columnset: [
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { key: "price", formatter: "\\${value}" },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { key: "price",
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith formatter: function (o) {
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith return '$' + o.value.toFixed(2);
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { key: "price",
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith formatter: function (o) {
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 1, name: "Bread", price: 3.45 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 2, name: "Milk", price: 4.99 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 3, name: "Eggs", price: 2.75 }
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith caption: "Price List"
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith}).render('#formatter-demo');
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <div class="yui3-u after">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <h4>After</h4>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>`formatter: "${value}"`</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>`nodeFormatter`</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smithvar table = new Y.DataTable({
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { key: "price", formatter: "${value}" },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { key: "price",
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith formatter: function (o) {
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith return '$' + o.value.toFixed(2);
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { key: "price",
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith nodeFormatter: function (o) {
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith return false;
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 1, name: "Bread", price: 3.45 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 2, name: "Milk", price: 4.99 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 3, name: "Eggs", price: 2.75 }
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith caption: "Price List"
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith}).render('#formatter-demo');
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<h3 id="quick-sort">Sortable Table</h3>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<div class="demo yui3-skin-sam">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <div id="sort-demo"></div>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke SmithYUI().use('datatable', function (Y) {
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith var table = new Y.DataTable({
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { key: "id" },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { key: "name", sortable: true },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { key: "price", sortable: true }
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 1, name: "Bread", price: 3.45 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 2, name: "Milk", price: 4.99 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 3, name: "Eggs", price: 2.75 }
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith caption: "Price List"
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith table.render('#sort-demo');
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<div class="yui3-g">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <div class="yui3-u before">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <h4>Before</h4>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>Column `sortable: true`</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>`plug(Y.Plugin.DataTableSort)`</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smithvar table = new Y.DataTable.Base({
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith columnset: [
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { key: "id" },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { key: "name", sortable: true },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { key: "price", sortable: true }
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith recordset: [
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 1, name: "Bread", price: 3.45 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 2, name: "Milk", price: 4.99 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 3, name: "Eggs", price: 2.75 }
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith caption: "Price List"
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <div class="yui3-u after">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <h4>After</h4>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>Column `sortable: true` OR other options</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li><del>`plug(Y.Plugin.DataTableSort)`</del></li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smithvar table = new Y.DataTable({
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { key: "id" },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { key: "name", sortable: true },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { key: "price", sortable: true }
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 1, name: "Bread", price: 3.45 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 2, name: "Milk", price: 4.99 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 3, name: "Eggs", price: 2.75 }
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith caption: "Price List"
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smithvar table = new Y.DataTable({
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith columns: [ "id", "name", "price" ],
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith sortable: [ "name", "price" ],
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith data: [ ... ],
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smithvar table = new Y.DataTable({
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith columns: [ "id", "name", "price" ],
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith sortable: true, // makes all columns sortable
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith data: [ ... ],
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<h3 id="quick-scroll">Scrolling Table</h3>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<div class="demo yui3-skin-sam">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <div id="scroll-demo"></div>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke SmithYUI().use('datatable-scroll', function (Y) {
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith var table = new Y.DataTable({
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith columns: ["id", "name", "price"],
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 1, name: "Bread", price: 3.45 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 2, name: "Milk", price: 4.99 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 3, name: "Eggs", price: 2.75 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 4, name: "Apples", price: 0.79 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 5, name: "Daikon", price: 1.22 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 6, name: "Onions", price: 0.86 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 7, name: "Garlic", price: 0.13 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 8, name: "Sugar", price: 5.99 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 9, name: "Beets", price: 0.93 }
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith scrollable: "y",
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith height: "175px",
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith caption: "Price List"
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith }).render('#scroll-demo');
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<div class="yui3-g">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <div class="yui3-u before">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <h4>Before</h4>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>`plug(Y.Plugin.DataTableScroll, ...)`</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>`height` configured in plugin</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>No table configs</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smithvar table = new Y.DataTable.Base({
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith columnset: ["id", "name", "price"],
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith recordset: [
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 1, name: "Bread", price: 3.45 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 2, name: "Milk", price: 4.99 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 3, name: "Eggs", price: 2.75 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith caption: "Price List"
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith height: "175px"
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smithtable.render('#scroll-demo');
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <div class="yui3-u after">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <h4>After</h4>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li><del>`plug(Y.Plugin.DataTableScroll, ...)`</del></li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>`height` configured in table</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>`scrollable: "y"` configured in table</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smithvar table = new Y.DataTable({
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith columns: ["id", "name", "price"],
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 1, name: "Bread", price: 3.45 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 2, name: "Milk", price: 4.99 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 3, name: "Eggs", price: 2.75 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith scrollable: "y",
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith height: "175px",
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith caption: "Price List"
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith}).render('#scroll-demo');
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<h3 id="quick-mutable">Adding/Removing/Modifying Table Rows</h3>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<div class="demo yui3-skin-sam">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <div id="mutable-demo"></div>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke SmithYUI().use('datatable', function (Y) {
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith var table = new Y.DataTable({
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith columns: ["id", "name", "price"],
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 1, name: "Bread", price: 3.45 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 2, name: "Milk", price: 4.99 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 3, name: "Eggs", price: 2.75 }
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith caption: "Price List"
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith }).render('#mutable-demo');
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith table.addRow({ id: 4, name: "Cheese", price: 24.97 });
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith table.modifyRow(1, { name: "Artisan bread" });
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<div class="yui3-g">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <div class="yui3-u before">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <h4>Before</h4>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>`columnset`</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>`recordset`</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smithvar table = new Y.DataTable.Base({
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith columnset: ["id", "name", "price"],
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith recordset: [
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 1, name: "Bread", price: 3.45 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 2, name: "Milk", price: 4.99 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 3, name: "Eggs", price: 2.75 }
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith caption: "Price List"
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith}).render('#basic-demo');
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <div class="yui3-u after">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <h4>After</h4>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>`columns`</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <li>`data`</li>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smithvar table = new Y.DataTable({
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith columns: ["id", "name", "price"],
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 1, name: "Bread", price: 3.45 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 2, name: "Milk", price: 4.99 },
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith { id: 3, name: "Eggs", price: 2.75 }
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith caption: "Price List"
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith}).render('#basic-demo');
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<h2 id="classes">Class Structure Changes</h2>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith `Y.DataTable.Base` should only be used as a base class for creating custom
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith DataTable subclasses.
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<h2 id="columns">Column Configuration Changes</h2>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith `columnset` will
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith be maintained as a relay to `columns` in 3.5.0, but will be removed in
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith future versions. <strong>`table.get("columnset")` will not return a
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith `Y.Columnset` instance</strong>.
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<h2 id="columns">Data Storage Changes</h2>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith `recordset` will
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith be maintained as a relay to `data` in 3.5.0, but will be removed in
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith future versions. <strong>`table.get("recordset")` will return a
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith `Y.ModelList` instance, not a `Y.Recordset` instance</strong>.
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<h2 id="columns">Cell Formatting Changes</h2>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith Attributes `tdValueTemplate`, `thValueTemplate`, `trTemplate`, and
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith properties `tdTemplate` and `thTemplate` have been removed.
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith Modifications to the templates used to generate the markup should be
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith done on the `Y.DataTable.HeaderView` and `Y.DataTable.BodyView` class
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith templates, such as `Y.DataTable.BodyView.prototype.CELL_TEMPLATE` or
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith decorated with column `formatter`s.
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith Column `formatters` no longer have access to the cell Node. This
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith functionality has been moved to `nodeFormatter`s. See
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <a href="index.html#formatters">Formatting Cell Data</a> for details.
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith including the addition of a new
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith column configuration property: `nodeFormatter`.
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<h2 id="columns">Table Sorting Changes</h2>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith `Y.Plugin.DataTableSort` has been deprecated. Sorting can be
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <a href="#sort">enabled by attribute configuration</a> on `Y.DataTable`
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith instance directly when using `datatable-sort`.
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith Column sorting `trigger` has been removed. If you need a different
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith trigger that the `click` event, override the table's `_bindSortUI`
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith method prior to calling `render()`.
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<h2 id="columns">Scrolling Table Changes</h2>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith `Y.Plugin.DataTableScroll` has been deprecated. Scrolling can be
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <a href="index.html#scroll">enabled by attribute configuration</a> on `Y.DataTable`
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith instance directly when using `datatable-scroll`.