15153N/A<style scoped>

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

10017N/A.example .yui3-datatable {

15153N/A margin-bottom: 1em;

10017N/A}

10017N/A

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

10017N/A.example table {

10017N/A width: auto;

15153N/A}

12605N/A.example caption {

10017N/A display: table-caption;

10017N/A}

10017N/A.example th,

10017N/A.example td {

10017N/A text-transform: none;

10017N/A border: 0 none;

10017N/A}

15153N/A</style>

15153N/A

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

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

10017N/A</div>

10017N/A

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

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

10017N/A</div>

10017N/A

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

15153N/A

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

15153N/A

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

15153N/A

15153N/A```

15153N/AYUI().use("datatable", function(Y) {

15153N/A

10017N/A var table = new Y.DataTable({

15153N/A columns: [ "id", "name", { key: "price", formatter: "${value}" } ],

10017N/A data : [

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

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

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

15153N/A ],

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

10017N/A

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

10017N/A```

15153N/A

10017N/A<p>

10017N/A When a calculation is needed, define a custom function that generates

10017N/A markup for the data cell. The custom formatter function receives an object

10017N/A with the properties listed in <a href="index.html#formatter-props">Appendix

15153N/A B</a> in the DataTable user guide.

10017N/A</p>

10017N/A

10017N/A```

15153N/A// See the DataTable user guide for a list of properties on o.

15153N/Afunction calculate(o) {

15153N/A return "$" + (o.data.price - o.data.cost).toFixed(2);

15153N/A}

15153N/A

15153N/Avar table = new Y.DataTable({

15153N/A columns: [ "id", "name", { key: "profit", formatter: calculate } ],

15153N/A data : [

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

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

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

15153N/A ],

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

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

15153N/A```

15153N/A

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

15153N/Aalso uses the `emptyCellValue` column configuration to supply a custom cell

15153N/Avalue in the case of missing data.</p>

15153N/A

15153N/A```

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

15153N/A function formatDates(o) {

15153N/A return o.value &&

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

15153N/A }

15153N/A

15153N/A dt = new Y.DataTable({

15153N/A columns: [

15153N/A "id",

15153N/A "name",

15153N/A { key: "date", formatter: formatDates, emptyCellValue: "(unknown)" }

15153N/A ],

15153N/A data : [

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

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

10017N/A { id: "wi-0650", name: "widget"} // no date for this record

15153N/A ],

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

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

15153N/A```

10017N/A