#

Jump to Table of Contents

# Example: Formatting Row Data for Display

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");

    });