Example: Formatting Row Data for Display

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.

YUI().use("datatable-base-deprecated", 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, classnames, headers, rowindex, record, column, data, value}.

// 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. This example also uses the emptyCellValue column configuration to supply a custom cell value in the case of missing data.

YUI().use("datatype-date", "datatable-base-deprecated", function (Y) {
    // The custom formatter function recieves an object with the properties:
    // {tbody, tr, classnames, headers, rowindex, record, column, data, value}
    var formatDates = function (o){
        return o.value &&
            Y.DataType.Date.format(o.value, { format: "%m/%d/%Y" });
    },
    cols = [
        "id",
        "name",
        { key: "date", formatter: formatDates, emptyCellValue: "(unknown)" }
    ],
    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"} // no date for this record
    ],
    dt = new Y.DataTable.Base({
        columnset: cols,
        recordset: data,
        caption: "Data formatting with DataType.Date"
    }).render("#dates");