199767f8919635c4928607450d9e0abb932109ceToomas Soome<style>

199767f8919635c4928607450d9e0abb932109ceToomas Soome.yui3-skin-sam table {

199767f8919635c4928607450d9e0abb932109ceToomas Soome width: auto;

199767f8919635c4928607450d9e0abb932109ceToomas Soome}

199767f8919635c4928607450d9e0abb932109ceToomas Soome.yui3-skin-sam td,

199767f8919635c4928607450d9e0abb932109ceToomas Soome.yui3-skin-sam th {

199767f8919635c4928607450d9e0abb932109ceToomas Soome border: 0 none;

199767f8919635c4928607450d9e0abb932109ceToomas Soome}

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome.before, .after {

199767f8919635c4928607450d9e0abb932109ceToomas Soome width: 47%;

199767f8919635c4928607450d9e0abb932109ceToomas Soome}

199767f8919635c4928607450d9e0abb932109ceToomas Soome.after {

199767f8919635c4928607450d9e0abb932109ceToomas Soome margin-left: 5%;

199767f8919635c4928607450d9e0abb932109ceToomas Soome}

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome.spendy {

199767f8919635c4928607450d9e0abb932109ceToomas Soome color: #b00;

199767f8919635c4928607450d9e0abb932109ceToomas Soome}

199767f8919635c4928607450d9e0abb932109ceToomas Soome</style>

199767f8919635c4928607450d9e0abb932109ceToomas Soome<div class="intro">

199767f8919635c4928607450d9e0abb932109ceToomas Soome <p>

199767f8919635c4928607450d9e0abb932109ceToomas Soome In version 3.5.0, DataTable and supporting modules underwent a major

199767f8919635c4928607450d9e0abb932109ceToomas Soome refactoring. The new architecture <strong>does not support full backward

199767f8919635c4928607450d9e0abb932109ceToomas Soome compatibility</strong> with versions 3.4.1 and prior. This guide should

199767f8919635c4928607450d9e0abb932109ceToomas Soome help answer questions that may come up when upgrading to the lastest

199767f8919635c4928607450d9e0abb932109ceToomas Soome version.

199767f8919635c4928607450d9e0abb932109ceToomas Soome </p>

199767f8919635c4928607450d9e0abb932109ceToomas Soome</div>

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome<h2 id="overview">Overview of API changes from 3.4.1</h2>

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome<p>

199767f8919635c4928607450d9e0abb932109ceToomas Soome The architectural change resulted in the deprecation, replacement, or

199767f8919635c4928607450d9e0abb932109ceToomas Soome removal of nearly all attributes and properties from the version 3.4.1

199767f8919635c4928607450d9e0abb932109ceToomas Soome implementation. We'll go into details below, but here are the high points:

199767f8919635c4928607450d9e0abb932109ceToomas Soome</p>

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome<ol>

199767f8919635c4928607450d9e0abb932109ceToomas Soome <li>`Y.DataTable` is now the preferred class for instantiation.</li>

199767f8919635c4928607450d9e0abb932109ceToomas Soome <li>The `recordset` attribute is deprecated. Use `data`.</li>

199767f8919635c4928607450d9e0abb932109ceToomas Soome <li>The `columnset` attribute is deprecated. Use `columns`.</li>

199767f8919635c4928607450d9e0abb932109ceToomas Soome <li>

199767f8919635c4928607450d9e0abb932109ceToomas Soome Cell formatters have changed a little, template attributes and

199767f8919635c4928607450d9e0abb932109ceToomas Soome properties a lot.

199767f8919635c4928607450d9e0abb932109ceToomas Soome </li>

199767f8919635c4928607450d9e0abb932109ceToomas Soome <li>Table markup has changed.</li>

199767f8919635c4928607450d9e0abb932109ceToomas Soome <li>Table sorting is now via configuration, not plugin.</li>

199767f8919635c4928607450d9e0abb932109ceToomas Soome <li>Table scrolling is now via configuration, not plugin.</li>

199767f8919635c4928607450d9e0abb932109ceToomas Soome</ol>

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome<h2 id="before-after">A Quick Before-And-After</h2>

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome<p>

199767f8919635c4928607450d9e0abb932109ceToomas Soome Unless you were really digging into the guts of DataTable, just changing

199767f8919635c4928607450d9e0abb932109ceToomas Soome `DataTable.Base` to `DataTable`, `columnset` to `columns`, and `recordset`

199767f8919635c4928607450d9e0abb932109ceToomas Soome to `data` should get you most of the way there.

199767f8919635c4928607450d9e0abb932109ceToomas Soome</p>

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome<h3 id="quick-basic">Basic Table</h3>

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome<div class="demo yui3-skin-sam">

199767f8919635c4928607450d9e0abb932109ceToomas Soome <div id="basic-demo"></div>

199767f8919635c4928607450d9e0abb932109ceToomas Soome</div>

199767f8919635c4928607450d9e0abb932109ceToomas Soome<script>

199767f8919635c4928607450d9e0abb932109ceToomas SoomeYUI().use('datatable', function (Y) {

199767f8919635c4928607450d9e0abb932109ceToomas Soome new Y.DataTable({

199767f8919635c4928607450d9e0abb932109ceToomas Soome columns: ["id", "name", "price"],

199767f8919635c4928607450d9e0abb932109ceToomas Soome data: [

199767f8919635c4928607450d9e0abb932109ceToomas Soome { id: 1, name: "Bread", price: 3.45 },

199767f8919635c4928607450d9e0abb932109ceToomas Soome { id: 2, name: "Milk", price: 4.99 },

199767f8919635c4928607450d9e0abb932109ceToomas Soome { id: 3, name: "Eggs", price: 2.75 }

199767f8919635c4928607450d9e0abb932109ceToomas Soome ],

199767f8919635c4928607450d9e0abb932109ceToomas Soome caption: "Price List"

199767f8919635c4928607450d9e0abb932109ceToomas Soome }).render('#basic-demo');

199767f8919635c4928607450d9e0abb932109ceToomas Soome});

199767f8919635c4928607450d9e0abb932109ceToomas Soome</script>

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome<div class="yui3-g">

199767f8919635c4928607450d9e0abb932109ceToomas Soome <div class="yui3-u before">

199767f8919635c4928607450d9e0abb932109ceToomas Soome <h4>Before</h4>

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome <ul>

199767f8919635c4928607450d9e0abb932109ceToomas Soome <li>`Y.DataTable.Base`</li>

199767f8919635c4928607450d9e0abb932109ceToomas Soome <li>`columnset`</li>

199767f8919635c4928607450d9e0abb932109ceToomas Soome <li>`recordset`</li>

199767f8919635c4928607450d9e0abb932109ceToomas Soome </ul>

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome ```

199767f8919635c4928607450d9e0abb932109ceToomas Soomevar table = new Y.DataTable.Base({

199767f8919635c4928607450d9e0abb932109ceToomas Soome columnset: ["id", "name", "price"],

199767f8919635c4928607450d9e0abb932109ceToomas Soome recordset: [

199767f8919635c4928607450d9e0abb932109ceToomas Soome { id: 1, name: "Bread", price: 3.45 },

199767f8919635c4928607450d9e0abb932109ceToomas Soome { id: 2, name: "Milk", price: 4.99 },

199767f8919635c4928607450d9e0abb932109ceToomas Soome { id: 3, name: "Eggs", price: 2.75 }

199767f8919635c4928607450d9e0abb932109ceToomas Soome ],

199767f8919635c4928607450d9e0abb932109ceToomas Soome caption: "Price List"

199767f8919635c4928607450d9e0abb932109ceToomas Soome}).render('#basic-demo');

199767f8919635c4928607450d9e0abb932109ceToomas Soome ```

199767f8919635c4928607450d9e0abb932109ceToomas Soome </div>

199767f8919635c4928607450d9e0abb932109ceToomas Soome <div class="yui3-u after">

199767f8919635c4928607450d9e0abb932109ceToomas Soome <h4>After</h4>

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome <ul>

199767f8919635c4928607450d9e0abb932109ceToomas Soome <li>`Y.DataTable`</li>

199767f8919635c4928607450d9e0abb932109ceToomas Soome <li>`columns`</li>

199767f8919635c4928607450d9e0abb932109ceToomas Soome <li>`data`</li>

199767f8919635c4928607450d9e0abb932109ceToomas Soome </ul>

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome ```

199767f8919635c4928607450d9e0abb932109ceToomas Soomevar table = new Y.DataTable({

199767f8919635c4928607450d9e0abb932109ceToomas Soome columns: ["id", "name", "price"],

199767f8919635c4928607450d9e0abb932109ceToomas Soome data: [

199767f8919635c4928607450d9e0abb932109ceToomas Soome { id: 1, name: "Bread", price: 3.45 },

199767f8919635c4928607450d9e0abb932109ceToomas Soome { id: 2, name: "Milk", price: 4.99 },

199767f8919635c4928607450d9e0abb932109ceToomas Soome { id: 3, name: "Eggs", price: 2.75 }

199767f8919635c4928607450d9e0abb932109ceToomas Soome ],

199767f8919635c4928607450d9e0abb932109ceToomas Soome caption: "Price List"

199767f8919635c4928607450d9e0abb932109ceToomas Soome}).render('#basic-demo');

199767f8919635c4928607450d9e0abb932109ceToomas Soome ```

199767f8919635c4928607450d9e0abb932109ceToomas Soome </div>

199767f8919635c4928607450d9e0abb932109ceToomas Soome</div>

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome<h3 id="quick-remote">Table With Remote Data</h3>

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome<div class="demo yui3-skin-sam">

199767f8919635c4928607450d9e0abb932109ceToomas Soome <div id="remote-demo"></div>

199767f8919635c4928607450d9e0abb932109ceToomas Soome</div>

199767f8919635c4928607450d9e0abb932109ceToomas Soome<script>

199767f8919635c4928607450d9e0abb932109ceToomas SoomeYUI().use('datatable', 'datatable-datasource', function (Y) {

199767f8919635c4928607450d9e0abb932109ceToomas Soome var table = new Y.DataTable({

199767f8919635c4928607450d9e0abb932109ceToomas Soome columns: ["id", "name", "price"],

199767f8919635c4928607450d9e0abb932109ceToomas Soome caption: "Price List"

199767f8919635c4928607450d9e0abb932109ceToomas Soome });

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome // Just pretend this is remote. It works the same anyway

199767f8919635c4928607450d9e0abb932109ceToomas Soome var source = new Y.DataSource.Local({

199767f8919635c4928607450d9e0abb932109ceToomas Soome source: [

199767f8919635c4928607450d9e0abb932109ceToomas Soome { id: 1, name: "Bread", price: 3.45 },

199767f8919635c4928607450d9e0abb932109ceToomas Soome { id: 2, name: "Milk", price: 4.99 },

199767f8919635c4928607450d9e0abb932109ceToomas Soome { id: 3, name: "Eggs", price: 2.75 }

199767f8919635c4928607450d9e0abb932109ceToomas Soome ]

199767f8919635c4928607450d9e0abb932109ceToomas Soome });

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome // (optional) Add DataSource plugins

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome table.plug(Y.Plugin.DataTableDataSource, {

199767f8919635c4928607450d9e0abb932109ceToomas Soome datasource: source

199767f8919635c4928607450d9e0abb932109ceToomas Soome });

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome table.render('#remote-demo');

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome table.datasource.load();

199767f8919635c4928607450d9e0abb932109ceToomas Soome});

199767f8919635c4928607450d9e0abb932109ceToomas Soome</script>

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome<div class="yui3-g">

199767f8919635c4928607450d9e0abb932109ceToomas Soome <div class="yui3-u before">

199767f8919635c4928607450d9e0abb932109ceToomas Soome <h4>Before</h4>

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome <ul>

199767f8919635c4928607450d9e0abb932109ceToomas Soome <li>`Y.DataTable.Base`</li>

199767f8919635c4928607450d9e0abb932109ceToomas Soome <li>`columnset`</li>

199767f8919635c4928607450d9e0abb932109ceToomas Soome <li>`recordset`</li>

199767f8919635c4928607450d9e0abb932109ceToomas Soome </ul>

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome ```

199767f8919635c4928607450d9e0abb932109ceToomas Soomevar table = new Y.DataTable.Base({

199767f8919635c4928607450d9e0abb932109ceToomas Soome columnset: ["id", "name", "price"],

199767f8919635c4928607450d9e0abb932109ceToomas Soome caption: "Price List"

199767f8919635c4928607450d9e0abb932109ceToomas Soome});

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soomevar source = new Y.DataSource.IO({

199767f8919635c4928607450d9e0abb932109ceToomas Soome source: "/api/v2.1/data?"

199767f8919635c4928607450d9e0abb932109ceToomas Soome}).plug(Y.Plugin.DataSourceJSONSchema, { ... });

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soometable.plug(Y.Plugin.DataTableDataSource, {

199767f8919635c4928607450d9e0abb932109ceToomas Soome datasource: source

199767f8919635c4928607450d9e0abb932109ceToomas Soome});

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soometable.render('#remote-demo');

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soometable.datasource.load();

199767f8919635c4928607450d9e0abb932109ceToomas Soome ```

199767f8919635c4928607450d9e0abb932109ceToomas Soome </div>

199767f8919635c4928607450d9e0abb932109ceToomas Soome <div class="yui3-u after">

199767f8919635c4928607450d9e0abb932109ceToomas Soome <h4>After</h4>

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome <ul>

199767f8919635c4928607450d9e0abb932109ceToomas Soome <li>`Y.DataTable`</li>

199767f8919635c4928607450d9e0abb932109ceToomas Soome <li>`columns`</li>

199767f8919635c4928607450d9e0abb932109ceToomas Soome <li>`data`</li>

199767f8919635c4928607450d9e0abb932109ceToomas Soome </ul>

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome ```

199767f8919635c4928607450d9e0abb932109ceToomas SoomeYUI().use('datatable', 'datatable-datasource', function (Y) {

199767f8919635c4928607450d9e0abb932109ceToomas Soome var table = new Y.DataTable({

199767f8919635c4928607450d9e0abb932109ceToomas Soome columns: ["id", "name", "price"],

199767f8919635c4928607450d9e0abb932109ceToomas Soome caption: "Price List"

199767f8919635c4928607450d9e0abb932109ceToomas Soome });

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome // Everything else is the same as before...

199767f8919635c4928607450d9e0abb932109ceToomas Soome});

199767f8919635c4928607450d9e0abb932109ceToomas Soome ```

199767f8919635c4928607450d9e0abb932109ceToomas Soome </div>

199767f8919635c4928607450d9e0abb932109ceToomas Soome</div>

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome<h3 id="quick-formatter">Formatted Columns</h3>

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome<div class="demo yui3-skin-sam">

199767f8919635c4928607450d9e0abb932109ceToomas Soome <div id="formatter-demo"></div>

199767f8919635c4928607450d9e0abb932109ceToomas Soome</div>

199767f8919635c4928607450d9e0abb932109ceToomas Soome<script>

199767f8919635c4928607450d9e0abb932109ceToomas SoomeYUI().use('datatable', function (Y) {

199767f8919635c4928607450d9e0abb932109ceToomas Soome new Y.DataTable({

199767f8919635c4928607450d9e0abb932109ceToomas Soome columns: [

199767f8919635c4928607450d9e0abb932109ceToomas Soome "id",

199767f8919635c4928607450d9e0abb932109ceToomas Soome "name",

199767f8919635c4928607450d9e0abb932109ceToomas Soome { key: "price", formatter: "${value}" },

199767f8919635c4928607450d9e0abb932109ceToomas Soome { key: "price",

199767f8919635c4928607450d9e0abb932109ceToomas Soome formatter: function (o) {

199767f8919635c4928607450d9e0abb932109ceToomas Soome if (o.value > 4) {

199767f8919635c4928607450d9e0abb932109ceToomas Soome o.className += "spendy";

199767f8919635c4928607450d9e0abb932109ceToomas Soome }

199767f8919635c4928607450d9e0abb932109ceToomas Soome return '$' + o.value.toFixed(2);

199767f8919635c4928607450d9e0abb932109ceToomas Soome }

199767f8919635c4928607450d9e0abb932109ceToomas Soome },

199767f8919635c4928607450d9e0abb932109ceToomas Soome { key: "price",

199767f8919635c4928607450d9e0abb932109ceToomas Soome nodeFormatter: function (o) {

199767f8919635c4928607450d9e0abb932109ceToomas Soome if (o.value > 4) {

199767f8919635c4928607450d9e0abb932109ceToomas Soome o.cell.addClass('spendy');

199767f8919635c4928607450d9e0abb932109ceToomas Soome }

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome o.cell.setContent('$' + o.value);

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome return false;

199767f8919635c4928607450d9e0abb932109ceToomas Soome }

199767f8919635c4928607450d9e0abb932109ceToomas Soome }

199767f8919635c4928607450d9e0abb932109ceToomas Soome ],

199767f8919635c4928607450d9e0abb932109ceToomas Soome data: [

199767f8919635c4928607450d9e0abb932109ceToomas Soome { id: 1, name: "Bread", price: 3.45 },

199767f8919635c4928607450d9e0abb932109ceToomas Soome { id: 2, name: "Milk", price: 4.99 },

199767f8919635c4928607450d9e0abb932109ceToomas Soome { id: 3, name: "Eggs", price: 2.75 }

199767f8919635c4928607450d9e0abb932109ceToomas Soome ],

199767f8919635c4928607450d9e0abb932109ceToomas Soome caption: "Price List"

199767f8919635c4928607450d9e0abb932109ceToomas Soome }).render('#formatter-demo');

199767f8919635c4928607450d9e0abb932109ceToomas Soome});

199767f8919635c4928607450d9e0abb932109ceToomas Soome</script>

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome<div class="yui3-g">

199767f8919635c4928607450d9e0abb932109ceToomas Soome <div class="yui3-u before">

199767f8919635c4928607450d9e0abb932109ceToomas Soome <h4>Before</h4>

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome <ul>

199767f8919635c4928607450d9e0abb932109ceToomas Soome <li>`formatter: "\\${value}"`</li>

199767f8919635c4928607450d9e0abb932109ceToomas Soome <li>`o.classnames`</li>

199767f8919635c4928607450d9e0abb932109ceToomas Soome <li>`formatter`</li>

199767f8919635c4928607450d9e0abb932109ceToomas Soome <li>`this.createCell(o)`</li>

199767f8919635c4928607450d9e0abb932109ceToomas Soome </ul>

199767f8919635c4928607450d9e0abb932109ceToomas Soome

199767f8919635c4928607450d9e0abb932109ceToomas Soome ```

199767f8919635c4928607450d9e0abb932109ceToomas Soomevar table = new Y.DataTable.Base({

199767f8919635c4928607450d9e0abb932109ceToomas Soome columnset: [

199767f8919635c4928607450d9e0abb932109ceToomas Soome "id",

199767f8919635c4928607450d9e0abb932109ceToomas Soome "name",

199767f8919635c4928607450d9e0abb932109ceToomas Soome { key: "price", formatter: "\\${value}" },

199767f8919635c4928607450d9e0abb932109ceToomas Soome { key: "price",

199767f8919635c4928607450d9e0abb932109ceToomas Soome formatter: function (o) {

199767f8919635c4928607450d9e0abb932109ceToomas Soome if (o.value > 4) {

199767f8919635c4928607450d9e0abb932109ceToomas Soome o.classnames += "spendy";

199767f8919635c4928607450d9e0abb932109ceToomas Soome }

199767f8919635c4928607450d9e0abb932109ceToomas Soome return '$' + o.value.toFixed(2);

}

},

{ key: "price",

formatter: function (o) {

var cell = this.createCell(o);

if (o.value > 4) {

cell.addClass('spendy');

}

cell.setContent('$' + o.value);

}

}

],

data: [

{ id: 1, name: "Bread", price: 3.45 },

{ id: 2, name: "Milk", price: 4.99 },

{ id: 3, name: "Eggs", price: 2.75 }

],

caption: "Price List"

}).render('#formatter-demo');

```

</div>

<div class="yui3-u after">

<h4>After</h4>

<ul>

<li>`formatter: "${value}"`</li>

<li>`o.className`</li>

<li>`nodeFormatter`</li>

<li>`o.cell`</li>

</ul>

```

var table = new Y.DataTable({

columns: [

"id",

"name",

{ key: "price", formatter: "${value}" },

{ key: "price",

formatter: function (o) {

if (o.value > 4) {

o.className += "spendy";

}

return '$' + o.value.toFixed(2);

}

},

{ key: "price",

nodeFormatter: function (o) {

if (o.value > 4) {

o.cell.addClass('spendy');

}

o.cell.setContent('$' + o.value);

return false;

}

}

],

data: [

{ id: 1, name: "Bread", price: 3.45 },

{ id: 2, name: "Milk", price: 4.99 },

{ id: 3, name: "Eggs", price: 2.75 }

],

caption: "Price List"

}).render('#formatter-demo');

```

</div>

</div>

<h3 id="quick-sort">Sortable Table</h3>

<div class="demo yui3-skin-sam">

<div id="sort-demo"></div>

</div>

<script>

YUI().use('datatable', function (Y) {

var table = new Y.DataTable({

columns: [

{ key: "id" },

{ key: "name", sortable: true },

{ key: "price", sortable: true }

],

data: [

{ id: 1, name: "Bread", price: 3.45 },

{ id: 2, name: "Milk", price: 4.99 },

{ id: 3, name: "Eggs", price: 2.75 }

],

caption: "Price List"

});

table.plug(Y.Plugin.DataTableSort);

table.render('#sort-demo');

});

</script>

<div class="yui3-g">

<div class="yui3-u before">

<h4>Before</h4>

<ul>

<li>Column `sortable: true`</li>

<li>`plug(Y.Plugin.DataTableSort)`</li>

</ul>

```

var table = new Y.DataTable.Base({

columnset: [

{ key: "id" },

{ key: "name", sortable: true },

{ key: "price", sortable: true }

],

recordset: [

{ id: 1, name: "Bread", price: 3.45 },

{ id: 2, name: "Milk", price: 4.99 },

{ id: 3, name: "Eggs", price: 2.75 }

],

caption: "Price List"

});

table.plug(Y.Plugin.DataTableSort);

table.render('#sort-demo');

```

</div>

<div class="yui3-u after">

<h4>After</h4>

<ul>

<li>Column `sortable: true` OR other options</li>

<li><del>`plug(Y.Plugin.DataTableSort)`</del></li>

</ul>

```

var table = new Y.DataTable({

columns: [

{ key: "id" },

{ key: "name", sortable: true },

{ key: "price", sortable: true }

],

data: [

{ id: 1, name: "Bread", price: 3.45 },

{ id: 2, name: "Milk", price: 4.99 },

{ id: 3, name: "Eggs", price: 2.75 }

],

caption: "Price List"

});

// OR

var table = new Y.DataTable({

columns: [ "id", "name", "price" ],

sortable: [ "name", "price" ],

data: [ ... ],

...

});

// OR

var table = new Y.DataTable({

columns: [ "id", "name", "price" ],

sortable: true, // makes all columns sortable

data: [ ... ],

...

});

table.render('#sort-demo');

```

</div>

</div>

<h3 id="quick-scroll">Scrolling Table</h3>

<div class="demo yui3-skin-sam">

<div id="scroll-demo"></div>

</div>

<script>

YUI().use('datatable-scroll', function (Y) {

var table = new Y.DataTable({

columns: ["id", "name", "price"],

data: [

{ id: 1, name: "Bread", price: 3.45 },

{ id: 2, name: "Milk", price: 4.99 },

{ id: 3, name: "Eggs", price: 2.75 },

{ id: 4, name: "Apples", price: 0.79 },

{ id: 5, name: "Daikon", price: 1.22 },

{ id: 6, name: "Onions", price: 0.86 },

{ id: 7, name: "Garlic", price: 0.13 },

{ id: 8, name: "Sugar", price: 5.99 },

{ id: 9, name: "Beets", price: 0.93 }

],

scrollable: "y",

height: "175px",

caption: "Price List"

}).render('#scroll-demo');

});

</script>

<div class="yui3-g">

<div class="yui3-u before">

<h4>Before</h4>

<ul>

<li>`plug(Y.Plugin.DataTableScroll, ...)`</li>

<li>`height` configured in plugin</li>

<li>No table configs</li>

</ul>

```

var table = new Y.DataTable.Base({

columnset: ["id", "name", "price"],

recordset: [

{ id: 1, name: "Bread", price: 3.45 },

{ id: 2, name: "Milk", price: 4.99 },

{ id: 3, name: "Eggs", price: 2.75 },

...

],

caption: "Price List"

});

table.plug(Y.Plugin.DataTableScroll, {

height: "175px"

});

table.render('#scroll-demo');

```

</div>

<div class="yui3-u after">

<h4>After</h4>

<ul>

<li><del>`plug(Y.Plugin.DataTableScroll, ...)`</del></li>

<li>`height` configured in table</li>

<li>`scrollable: "y"` configured in table</li>

</ul>

```

var table = new Y.DataTable({

columns: ["id", "name", "price"],

data: [

{ id: 1, name: "Bread", price: 3.45 },

{ id: 2, name: "Milk", price: 4.99 },

{ id: 3, name: "Eggs", price: 2.75 },

...

],

scrollable: "y",

height: "175px",

caption: "Price List"

}).render('#scroll-demo');

```

</div>

</div>

<h3 id="quick-mutable">Adding/Removing/Modifying Table Rows</h3>

<div class="demo yui3-skin-sam">

<div id="mutable-demo"></div>

</div>

<script>

YUI().use('datatable', function (Y) {

var table = new Y.DataTable({

columns: ["id", "name", "price"],

data: [

{ id: 1, name: "Bread", price: 3.45 },

{ id: 2, name: "Milk", price: 4.99 },

{ id: 3, name: "Eggs", price: 2.75 }

],

caption: "Price List"

}).render('#mutable-demo');

table.addRow({ id: 4, name: "Cheese", price: 24.97 });

table.modifyRow(1, { name: "Artisan bread" });

table.removeRow(2);

});

</script>

<div class="yui3-g">

<div class="yui3-u before">

<h4>Before</h4>

<ul>

<li>`Y.DataTable.Base`</li>

<li>`columnset`</li>

<li>`recordset`</li>

</ul>

```

var table = new Y.DataTable.Base({

columnset: ["id", "name", "price"],

recordset: [

{ id: 1, name: "Bread", price: 3.45 },

{ id: 2, name: "Milk", price: 4.99 },

{ id: 3, name: "Eggs", price: 2.75 }

],

caption: "Price List"

}).render('#basic-demo');

```

</div>

<div class="yui3-u after">

<h4>After</h4>

<ul>

<li>`Y.DataTable`</li>

<li>`columns`</li>

<li>`data`</li>

</ul>

```

var table = new Y.DataTable({

columns: ["id", "name", "price"],

data: [

{ id: 1, name: "Bread", price: 3.45 },

{ id: 2, name: "Milk", price: 4.99 },

{ id: 3, name: "Eggs", price: 2.75 }

],

caption: "Price List"

}).render('#basic-demo');

```

</div>

</div>

<h2 id="classes">Class Structure Changes</h2>

`Y.DataTable.Base` should only be used as a base class for creating custom

DataTable subclasses.

<h2 id="columns">Column Configuration Changes</h2>

`columnset` will

be maintained as a relay to `columns` in 3.5.0, but will be removed in

future versions. <strong>`table.get("columnset")` will not return a

`Y.Columnset` instance</strong>.

<h2 id="columns">Data Storage Changes</h2>

`recordset` will

be maintained as a relay to `data` in 3.5.0, but will be removed in

future versions. <strong>`table.get("recordset")` will return a

`Y.ModelList` instance, not a `Y.Recordset` instance</strong>.

<h2 id="columns">Cell Formatting Changes</h2>

<li>

Attributes `tdValueTemplate`, `thValueTemplate`, `trTemplate`, and

properties `tdTemplate` and `thTemplate` have been removed.

Modifications to the templates used to generate the markup should be

done on the `Y.DataTable.HeaderView` and `Y.DataTable.BodyView` class

templates, such as `Y.DataTable.BodyView.prototype.CELL_TEMPLATE` or

decorated with column `formatter`s.

</li>

Column `formatters` no longer have access to the cell Node. This

functionality has been moved to `nodeFormatter`s. See

<a href="index.html#formatters">Formatting Cell Data</a> for details.

including the addition of a new

column configuration property: `nodeFormatter`.

<h2 id="columns">Table Sorting Changes</h2>

`Y.Plugin.DataTableSort` has been deprecated. Sorting can be

<a href="#sort">enabled by attribute configuration</a> on `Y.DataTable`

instance directly when using `datatable-sort`.

<li>

Column sorting `trigger` has been removed. If you need a different

trigger that the `click` event, override the table's `_bindSortUI`

method prior to calling `render()`.

</li>

<h2 id="columns">Scrolling Table Changes</h2>

<li>

`Y.Plugin.DataTableScroll` has been deprecated. Scrolling can be

<a href="index.html#scroll">enabled by attribute configuration</a> on `Y.DataTable`

instance directly when using `datatable-scroll`.

</li>