cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<style scoped>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly/* custom styles for this example */
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith.example .yui3-datatable {
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith margin-bottom: 1em;
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly/* css to counter global site css */
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith.example table {
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith width: auto;
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith.example caption {
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith display: table-caption;
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith.example td {
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith text-transform: none;
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith border: 0 none;
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<div class="intro">
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly <p>Custom format row data for display with string templates or custom functions.</p>
819e90d415ed17d59af3a247b2ad9d6feb0c21b5Luke Smith<div class="example yui3-skin-sam">
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>
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke SmithYUI().use("datatable", function(Y) {
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith var table = new Y.DataTable({
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith columns: [ "id", "name", { key: "price", formatter: "${value}" } ],
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith { id: "ga-3475", name: "gadget", price: 6.99 },
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith { id: "sp-9980", name: "sprocket", price: 3.75 },
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith { id: "wi-0650", name: "widget", price: 4.25 }
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly caption: "Data formatting with string template"
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly }).render("#template");
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith When a calculation is needed, define a custom function that generates
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith markup for the data cell. The custom formatter function receives an object
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith with the properties listed in <a href="index.html#formatter-props">Appendix
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith B</a> in the DataTable user guide.
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith// See the DataTable user guide for a list of properties on o.
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smithfunction calculate(o) {
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith return "$" + (o.data.price - o.data.cost).toFixed(2);
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smithvar table = new Y.DataTable({
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith columns: [ "id", "name", { key: "profit", formatter: calculate } ],
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith { id: "ga-3475", name: "gadget", price: 6.99, cost: 4.99 },
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith { id: "sp-9980", name: "sprocket", price: 3.75, cost: 2.75 },
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith { id: "wi-0650", name: "widget", price: 4.25, cost: 3.25 }
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly caption: "Data formatting with custom function"
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly}).render("#function");
ef820a2b98579b004dc187276f739fd5774a791fLuke Smith<p>The DataType utility can be used to help format date objects. This example
ef820a2b98579b004dc187276f739fd5774a791fLuke Smithalso uses the `emptyCellValue` column configuration to supply a custom cell
ef820a2b98579b004dc187276f739fd5774a791fLuke Smithvalue in the case of missing data.</p>
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke SmithYUI().use("datatype-date", "datatable", function (Y) {
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith function formatDates(o) {
ef820a2b98579b004dc187276f739fd5774a791fLuke Smith Y.DataType.Date.format(o.value, { format: "%m/%d/%Y" });
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith { key: "date", formatter: formatDates, emptyCellValue: "(unknown)" }
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith { id: "ga-3475", name: "gadget", date: new Date(2006, 5, 1) },
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith { id: "sp-9980", name: "sprocket", date: new Date(2004, 8, 16) },
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith { id: "wi-0650", name: "widget"} // no date for this record
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly caption: "Data formatting with DataType.Date"
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly }).render("#dates");