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.

Data formatting with string template
id
name
price
ga-3475
gadget
$6.99
sp-9980
sprocket
$3.75
wi-0650
widget
$4.25
Data formatting with custom function
id
name
profit
ga-3475
gadget
$2
sp-9980
sprocket
$1
wi-0650
widget
$1
Data formatting with DataType.Date
id
name
date
ga-3475
gadget
06/01/2006
sp-9980
sprocket
09/16/2004
wi-0650
widget
05/23/2005

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