datatable-formatting.mustache revision cf6c1ae1ed15095f8dc269bb9d7a373a1b87990e
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<style scoped>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly/* custom styles for this example */
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly.dt-example {margin:1em;}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly/* css to counter global site css */
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly.dt-example th {text-transform:none;}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly.dt-example table {width:auto;}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly.dt-example caption {display:table-caption;}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<div class="intro">
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly <p>Custom format row data for display with string templates or custom functions.</p>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<div class="example">
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {{>datatable-formatting-source}}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<h2>Formatting Row Data for Display</h2>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<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".
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<p>Simple formatting can be defined with a string template on the column definition.</p>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny DonnellyYUI().use("datatable-base", function(Y) {
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly var cols = ["id","name", {key:"price", formatter:"\${value}"}],
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {id:"ga-3475", name:"gadget", price:6.99},
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {id:"sp-9980", name:"sprocket", price:3.75},
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {id:"wi-0650", name:"widget", price:4.25}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly columnset: cols,
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly recordset: data,
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly caption: "Data formatting with string template"
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly }).render("#template");
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<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>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly// The custom formatter function recieves an object with the properties:
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly// {tbody, tr, td, classnames, headers, rowindex, record, column, data, value}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnellyvar calculate = function (o){
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly return "$"+(record.getValue("price") - record.getValue("cost"));
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnellycols = ["id", "name", {key:"profit", formatter:calculate}],
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {id:"ga-3475", name:"gadget", price:6.99, cost:4.99},
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {id:"sp-9980", name:"sprocket", price:3.75, cost:2.75},
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {id:"wi-0650", name:"widget", price:4.25, cost:3.25}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly columnset: cols,
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly recordset: data,
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly caption: "Data formatting with custom function"
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly}).render("#function");
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<p>The DataType utility can be used to help format date objects.</p>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny DonnellyYUI().use("datatype-date", "datatable-base", function (Y) {
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly // The custom formatter function recieves an object with the properties:
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly // {tbody, tr, td, classnames, headers, rowindex, record, column, data, value}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly var formatDates = function (o){
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly return Y.DataType.Date.format(o.value, { format: "%m/%d/%Y" });
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly cols = ["id", "name", { key: "date", formatter: formatDates }],
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {id:"ga-3475", name:"gadget", date:new Date(2006, 5, 1)},
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {id:"sp-9980", name:"sprocket", date:new Date(2004, 8, 16)},
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {id:"wi-0650", name:"widget", date:new Date(2005, 4, 23)}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly columnset: cols,
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly recordset: data,
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly caption: "Data formatting with DataType.Date"
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly }).render("#dates");