YUI 3.x Home -

YUI Library Examples: DataTable: Formatting Row Data for Display

DataTable: Formatting Row Data for Display

Custom format row data for display with string templates or custom functions.

View example in new window.

Formatting Row Data for Display

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".

Simple formatting can be defined with a string template on the column definition.

  1. YUI().use("datatable-base", function(Y) {
  2.     var cols = ["id","name", {key:"price", formatter:"${value}"}],
  3.     data = [
  4.         {id:"ga-3475", name:"gadget", price:6.99},
  5.         {id:"sp-9980", name:"sprocket", price:3.75},
  6.         {id:"wi-0650", name:"widget", price:4.25}
  7.     ],
  8.     table = new Y.DataTable.Base({
  9.         columnset: cols,
  10.         recordset: data,
  11.         caption: "Data formatting with string template"
  12.     }).render("#template");
  13.  
YUI().use("datatable-base", function(Y) {
    var cols = ["id","name", {key:"price", formatter:"${value}"}],
    data = [
        {id:"ga-3475", name:"gadget", price:6.99},
        {id:"sp-9980", name:"sprocket", price:3.75},
        {id:"wi-0650", name:"widget", price:4.25}
    ],
    table = new Y.DataTable.Base({
        columnset: cols,
        recordset: data,
        caption: "Data formatting with string template"
    }).render("#template");
 

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}.

  1. // The custom formatter function recieves an object with the properties:
  2. // {tbody, tr, td, classnames, headers, rowindex, record, column, data, value}
  3. var calculate = function (o){
  4.     var record = o.record;
  5.     return "$"+(record.getValue("price") - record.getValue("cost"));
  6. },
  7. cols = ["id", "name", {key:"profit", formatter:calculate}],
  8. data = [
  9.     {id:"ga-3475", name:"gadget", price:6.99, cost:4.99},
  10.     {id:"sp-9980", name:"sprocket", price:3.75, cost:2.75},
  11.     {id:"wi-0650", name:"widget", price:4.25, cost:3.25}
  12. ],
  13. dt = new Y.DataTable.Base({
  14.     columnset: cols,
  15.     recordset: data,
  16.     caption: "Data formatting with custom function"
  17. }).render("#function");
  18.  
// The custom formatter function recieves an object with the properties:
// {tbody, tr, td, classnames, headers, rowindex, record, column, data, value}
var calculate = function (o){
    var record = o.record;
    return "$"+(record.getValue("price") - record.getValue("cost"));
},
cols = ["id", "name", {key:"profit", formatter:calculate}],
data = [
    {id:"ga-3475", name:"gadget", price:6.99, cost:4.99},
    {id:"sp-9980", name:"sprocket", price:3.75, cost:2.75},
    {id:"wi-0650", name:"widget", price:4.25, cost:3.25}
],
dt = new Y.DataTable.Base({
    columnset: cols,
    recordset: data,
    caption: "Data formatting with custom function"
}).render("#function");
 

The DataType utility can be used to help format date objects.

  1. YUI().use("datatype-date", "datatable-base", function (Y) {
  2.     // The custom formatter function recieves an object with the properties:
  3.     // {tbody, tr, td, classnames, headers, rowindex, record, column, data, value}
  4.     var formatDates = function (o){
  5.         return Y.DataType.Date.format(o.value, { format: "%m/%d/%Y" });
  6.     },
  7.     cols = ["id", "name", { key: "date", formatter: formatDates }],
  8.     data = [
  9.         {id:"ga-3475", name:"gadget", date:new Date(2006, 5, 1)},
  10.         {id:"sp-9980", name:"sprocket", date:new Date(2004, 8, 16)},
  11.         {id:"wi-0650", name:"widget", date:new Date(2005, 4, 23)}
  12.     ],
  13.     dt = new Y.DataTable.Base({
  14.         columnset: cols,
  15.         recordset: data,
  16.         caption: "Data formatting with DataType.Date"
  17.     }).render("#dates");
YUI().use("datatype-date", "datatable-base", function (Y) {
    // The custom formatter function recieves an object with the properties:
    // {tbody, tr, td, classnames, headers, rowindex, record, column, data, value}
    var formatDates = function (o){
        return Y.DataType.Date.format(o.value, { format: "%m/%d/%Y" });
    },
    cols = ["id", "name", { key: "date", formatter: formatDates }],
    data = [
        {id:"ga-3475", name:"gadget", date:new Date(2006, 5, 1)},
        {id:"sp-9980", name:"sprocket", date:new Date(2004, 8, 16)},
        {id:"wi-0650", name:"widget", date:new Date(2005, 4, 23)}
    ],
    dt = new Y.DataTable.Base({
        columnset: cols,
        recordset: data,
        caption: "Data formatting with DataType.Date"
    }).render("#dates");

More DataTable Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings