datatable-formatting.mustache revision 819e90d415ed17d59af3a247b2ad9d6feb0c21b5
d6fa26d0adaec6c910115be34fe7a5a5f402c14fMark Andrews<style scoped>
5a4557e8de2951a2796676b5ec4b6a90caa5be14Mark Andrews/* custom styles for this example */
f0aad5341752aefe5059832f6cf3abc3283c6e16Tinderbox User.dt-example {margin:1em;}
5347c0fcb04eaea19d9f39795646239f487c6207Tinderbox User/* css to counter global site css */
5347c0fcb04eaea19d9f39795646239f487c6207Tinderbox User.dt-example th {text-transform:none;}
5347c0fcb04eaea19d9f39795646239f487c6207Tinderbox User.dt-example table {width:auto;}
5a4557e8de2951a2796676b5ec4b6a90caa5be14Mark Andrews.dt-example caption {display:table-caption;}
5a4557e8de2951a2796676b5ec4b6a90caa5be14Mark Andrews<div class="intro">
5a4557e8de2951a2796676b5ec4b6a90caa5be14Mark Andrews <p>Custom format row data for display with string templates or custom functions.</p>
cd32f419a8a5432fbb139f56ee73cbf68b9350ccTinderbox User<div class="example yui3-skin-sam">
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt {{>datatable-formatting-source}}
5a4557e8de2951a2796676b5ec4b6a90caa5be14Mark Andrews<h2>Formatting Row Data for Display</h2>
5a4557e8de2951a2796676b5ec4b6a90caa5be14Mark Andrews<p>Data can be stored in one format but be displayed in a different format. For instance, prices can be stored as numbers but be displayed as "$2.99", and birthdays can be stored as date objects but be displayed as "12/9/2009".
5a4557e8de2951a2796676b5ec4b6a90caa5be14Mark Andrews<p>Simple formatting can be defined with a string template on the column definition.</p>
5a4557e8de2951a2796676b5ec4b6a90caa5be14Mark AndrewsYUI().use("datatable-base", function(Y) {
9a5087bf58f651bfff841192aba5afd06760d6ceTinderbox User var cols = ["id","name", {key:"price", formatter:"\${value}"}],
5a4557e8de2951a2796676b5ec4b6a90caa5be14Mark Andrews {id:"ga-3475", name:"gadget", price:6.99},
5a4557e8de2951a2796676b5ec4b6a90caa5be14Mark Andrews {id:"sp-9980", name:"sprocket", price:3.75},
5a4557e8de2951a2796676b5ec4b6a90caa5be14Mark Andrews {id:"wi-0650", name:"widget", price:4.25}
5a4557e8de2951a2796676b5ec4b6a90caa5be14Mark Andrews columnset: cols,
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox User recordset: data,
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox User caption: "Data formatting with string template"
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox User }).render("#template");
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox User<p>When a calculation is needed, define a custom function that generates markup for the data cell. The custom formatter function receives an object with the following properties: `{tbody, tr, td, classnames, headers, rowindex, record, column, data, value}`.</p>
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox User// The custom formatter function recieves an object with the properties:
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox User// {tbody, tr, td, classnames, headers, rowindex, record, column, data, value}
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox Uservar calculate = function (o){
5a4557e8de2951a2796676b5ec4b6a90caa5be14Mark Andrews var record = o.record;
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox User return "$"+(record.getValue("price") - record.getValue("cost"));
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox Usercols = ["id", "name", {key:"profit", formatter:calculate}],
5a4557e8de2951a2796676b5ec4b6a90caa5be14Mark Andrews {id:"ga-3475", name:"gadget", price:6.99, cost:4.99},
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox User {id:"sp-9980", name:"sprocket", price:3.75, cost:2.75},
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox User {id:"wi-0650", name:"widget", price:4.25, cost:3.25}
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox User columnset: cols,
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox User recordset: data,
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox User caption: "Data formatting with custom function"
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox User}).render("#function");
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox User<p>The DataType utility can be used to help format date objects.</p>
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox UserYUI().use("datatype-date", "datatable-base", function (Y) {
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox User // The custom formatter function recieves an object with the properties:
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox User // {tbody, tr, td, classnames, headers, rowindex, record, column, data, value}
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox User var formatDates = function (o){
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox User return Y.DataType.Date.format(o.value, { format: "%m/%d/%Y" });
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox User cols = ["id", "name", { key: "date", formatter: formatDates }],
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox User {id:"ga-3475", name:"gadget", date:new Date(2006, 5, 1)},
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox User {id:"sp-9980", name:"sprocket", date:new Date(2004, 8, 16)},
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox User {id:"wi-0650", name:"widget", date:new Date(2005, 4, 23)}
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox User columnset: cols,
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox User recordset: data,
7e71f05d8643aca84914437c900cb716444507e4Tinderbox User caption: "Data formatting with DataType.Date"
7911e6f9de303bca5a3d8b34f4330c8f7cecffaeTinderbox User }).render("#dates");