1608N/A<style scoped>

1608N/A/* custom styles for this example */

1608N/A.dt-example {margin:1em;}

1608N/A

1608N/A/* css to counter global site css */

1608N/A.dt-example th {text-transform:none;}

1608N/A.dt-example table {width:auto;}

1608N/A.dt-example caption {display:table-caption;}

1608N/A</style>

1608N/A

1608N/A<div class="intro">

1608N/A <p>Custom format row data for display with string templates or custom functions.</p>

1608N/A</div>

1608N/A

1608N/A<div class="example yui3-skin-sam">

1608N/A {{>datatable-formatting-source}}

1608N/A</div>

1608N/A

1608N/A<h2>Formatting Row Data for Display</h2>

1608N/A

1608N/A<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".

1608N/A

1608N/A<p>Simple formatting can be defined with a string template on the column definition.</p>

1608N/A

1608N/A```

1608N/AYUI().use("datatable-base", function(Y) {

1608N/A var cols = ["id","name", {key:"price", formatter:"\${value}"}],

1608N/A data = [

1608N/A {id:"ga-3475", name:"gadget", price:6.99},

1608N/A {id:"sp-9980", name:"sprocket", price:3.75},

1608N/A {id:"wi-0650", name:"widget", price:4.25}

1608N/A ],

1608N/A table = new Y.DataTable.Base({

1608N/A columnset: cols,

1608N/A recordset: data,

1608N/A caption: "Data formatting with string template"

1608N/A }).render("#template");

1608N/A```

1608N/A

1608N/A<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>

1608N/A

1608N/A```

1608N/A// The custom formatter function recieves an object with the properties:

1608N/A// {tbody, tr, td, classnames, headers, rowindex, record, column, data, value}

1608N/Avar calculate = function (o){

1608N/A var record = o.record;

1608N/A return "$"+(record.getValue("price") - record.getValue("cost"));

1608N/A},

1608N/Acols = ["id", "name", {key:"profit", formatter:calculate}],

1608N/Adata = [

1608N/A {id:"ga-3475", name:"gadget", price:6.99, cost:4.99},

1608N/A {id:"sp-9980", name:"sprocket", price:3.75, cost:2.75},

1608N/A {id:"wi-0650", name:"widget", price:4.25, cost:3.25}

1608N/A],

1608N/Adt = new Y.DataTable.Base({

1608N/A columnset: cols,

1608N/A recordset: data,

1608N/A caption: "Data formatting with custom function"

1608N/A}).render("#function");

1608N/A```

1608N/A

1608N/A<p>The DataType utility can be used to help format date objects.</p>

1608N/A

1608N/A```

1608N/AYUI().use("datatype-date", "datatable-base", function (Y) {

1608N/A // The custom formatter function recieves an object with the properties:

1608N/A // {tbody, tr, td, classnames, headers, rowindex, record, column, data, value}

1608N/A var formatDates = function (o){

1608N/A return Y.DataType.Date.format(o.value, { format: "%m/%d/%Y" });

1608N/A },

1608N/A cols = ["id", "name", { key: "date", formatter: formatDates }],

1608N/A data = [

1608N/A {id:"ga-3475", name:"gadget", date:new Date(2006, 5, 1)},

1608N/A {id:"sp-9980", name:"sprocket", date:new Date(2004, 8, 16)},

1608N/A {id:"wi-0650", name:"widget", date:new Date(2005, 4, 23)}

1608N/A ],

1608N/A dt = new Y.DataTable.Base({

1608N/A columnset: cols,

1608N/A recordset: data,

1608N/A caption: "Data formatting with DataType.Date"

1608N/A }).render("#dates");

1608N/A```

1608N/A