Version 3.17.2

Example: Formatting Row Data for Display

Jump to Table of Contents

This example shows a few ways to configure your columns to populate cells with formatted values.

Formatting with Template Strings

Note: be sure to add the yui3-skin-sam classname to the page's <body> element or to a parent element of the widget in order to apply the default CSS skin. See Understanding Skinning. 

<body class="yui3-skin-sam"> <!-- You need this skin class -->

Data can be stored in one format but displayed in a different format. For instance, prices can be stored as numbers but displayed as "$2.99", and birthdays can be stored as Date objects but displayed as "12/9/2009".

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

YUI().use("datatable", function (Y) {

    var table = new Y.DataTable({
        columns: ["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 }
        ],
        caption:"Data formatting with string template"
    }).render('#template');

});

Formatting with Functions

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 properties listed in Appendix B in the DataTable user guide. Also see the section on setting content with formatter functions. 

YUI().use("datatype-date", "datatable", function (Y) {

    function calculate(o) {
        return "$" + (o.data.price - o.data.cost).toFixed(2);
    }

    var table = new Y.DataTable({
        columns: ["id", "name", { label: "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 }
        ],
        caption:"Data formatting with custom function"
    }).render("#function");

});

Populating Cells with HTML

By default, DataTable will HTML escape cell values (regardless of formatters). If you want HTML to be preserved, include allowHTML: true in the column configuration. 

YUI().use('datatable', function (Y) {

    var table = new Y.DataTable({
        columns: [
            { key: "id",
              formatter: '<input type="checkbox" name="item" value="{value}">',
              label: '<input type="checkbox" id="id-all" value="all">',
              allowHTML: true
            },
            "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 }
        ],
        caption: "Allowing HTML content in cells"
    }).render("#allowhtml");

    // Delegated because the table header might be re-rendered
    table.delegate('click', function (e) {
        this.get('contentBox').all('input[name]')
            .set('checked', e.currentTarget.get('checked'));
    }, '#id-all', table);

    table.delegate('click', function (e) {
        Y.one('#id-all').set('checked', false);
    }, '.yui3-datatable-data input', table);

});

Using emptyCellValue for Missing Data

Use the emptyCellValue column configuration to supply a custom cell value in the case of missing data. If the emptyCellValue includes HTML formatting, be sure to also set allowHTML: true for the column. Note, the DataType utility is also used by the formatter in this example. 

YUI().use("datatype-date", "datatable-base", function (Y) {

    function formatDates(o) {
        return o.value &&
            Y.DataType.Date.format(o.value, { format: "%m/%d/%Y" });
    }

    var table = new Y.DataTable({
        columns: [
            "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, uses emptyCellValue
        ],
        caption: "Data formatting with DataType.Date"
    }).render("#dates");

});