YUI Library Examples: DataTable Control (beta): Custom Cell Formatting

Sample Code for this Example

Data:

YAHOO.example.Data = {
    formatting: {
        items: [
            {field1: "001", field2:new Date(2007, 1, 1), field3:111, field4:"23.4", field5:"bob", field6:"http://www.yahoo.com"},
            {field1: undefined, field2:new Date(2006, 1, 1), field3:12.3, field4:"35.12", field5:"ann", field6:"http://www.yahoo.com"},
            {field1: 001, field2:new Date(2007, 11, 1), field3:1, field4:34.12, field5:"charlie", field6:"http://www.yahoo.com"},
            {field1: "aaab", field2:new Date(2007, 1, 11), field3:1112, field4:"03", field5:"diane", field6:"http://www.yahoo.com"},
            {field1: "1", field2:new Date(1999, 1, 11), field3:124, field4:03, field5:"edgar", field6:"http://www.yahoo.com"},
            {field1: new Date(1999, 1, 11), field2:"January 10, 2005", field3:"12", field4:"34", field5:"francine", field6:"http://www.yahoo.com"},
            {field1: "11", field2:"January 1, 2005", field3:"19.1", field4:"234.5", field5:"george", field6:"http://www.yahoo.com"},
            {field1: null, field2:"1/11/05", field3:"10.02", field4:"345.654", field5:"hannah", field6:"http://www.yahoo.com"},
            {field1: 110, field2:"1/11/2005", field3:"109", field4:23.456, field5:"igor", field6:"http://www.yahoo.com"},
            {field1: [1,2,3], field2:"November 1, 2005", field3:"11111", field4:23.0123, field5:"julie", field6:"http://www.yahoo.com"}
        ]
    }
}

CSS:

Markup:

JavaScript:

abc
YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.CustomFormatting = new function() {
        // Define a custom formatter for the Column labeled "flag"
        // draws an up icon if value of field3 is greater than 100,
        // otherwise renders a down icon
        this.myCustomFormatter = function(elCell, oRecord, oColumn, oData) {
            YAHOO.util.Dom.addClass(elCell, "flag");
            if(oRecord.getData("field3") > 100) {
                elCell.innerHTML = ' <img src="assets/img/arrow_up.gif">';
            }
            else {
                elCell.innerHTML = ' <img src="assets/img/arrow_dn.gif">';
            }
        };

// Override the built-in formatter
        YAHOO.widget.Column.formatEmail = function(elCell, oRecord, oColumn, oData) {
            var user = oData;
            elCell.innerHTML = "<a href=\"mailto:" + user + "@mycompany.com\">" + user + "</a>";
        };

var myColumnDefs = [
            {label:"flag", formatter:this.myCustomFormatter}, // use custom formatter
            {label:"radio", formatter:YAHOO.widget.DataTable.formatRadio}, // use the built-in radio formatter
            {label:"check", formatter:YAHOO.widget.DataTable.formatCheckbox}, // use the built-in checkbox formatter
            {label:"button", formatter:YAHOO.widget.DataTable.formatButton}, // use the built-in button formatter
            {key:"field1", sortable:true},
            {key:"field2", sortable:true, formatter:YAHOO.widget.DataTable.formatDate}, // use the built-in date formatter
            {key:"field3", sortable:true},
            {key:"field4", sortable:true, formatter:YAHOO.widget.DataTable.formatCurrency}, // use the built-in currency formatter
            {key:"field5", sortable:true, formatter:YAHOO.widget.DataTable.formatEmail}, // use the overridden email formatter
            {key:"field6", sortable:true, formatter:YAHOO.widget.DataTable.formatLink} // use the built-in link formatter
        ];

this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.formatting);
        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
        this.myDataSource.responseSchema = {
            resultsList: ["items"],
            // Use the parse methods to populate the RecordSet with the right data types
            fields: [
                {key:"field1", parser:YAHOO.util.DataSource.parseString}, // point to the string parser
                {key:"field2", parser:YAHOO.util.DataSource.parseDate}, // point to the date parser
                {key:"field3", parser:YAHOO.util.DataSource.parseNumber}, // point to the number parser
                {key:"field4", parser:YAHOO.util.DataSource.parseNumber}, // point to the number parser
                {key:"field5"}, // this is already string data so no parser needed
                {key:"field6"} // this is already string data so no parser needed
            ]
        };

this.myDataTable = new YAHOO.widget.DataTable("formatting", myColumnDefs,
                this.myDataSource, {caption:"Example: Custom Formatting"});

this.myDataTable.subscribe("radioClickEvent", function(oArgs){//debugger;
            var elRadio = oArgs.target;
            var elRecord = this.getRecord(elRadio);
            var name = elRecord.getData("field5");
            alert("The radio button for " + name + " was selected");
        });

this.myDataTable.subscribe("checkboxClickEvent", function(oArgs){
            var elCheckbox = oArgs.target;
            var elRecord = this.getRecord(elCheckbox);
            var name = elRecord.getData("field5");
            alert("Checkbox was " + (elCheckbox.checked ? "" : "un") + "checked for " + name);
        });

this.myDataTable.subscribe("buttonClickEvent", function(oArgs){
            var oRecord = this.getRecord(oArgs.target);
            alert(YAHOO.lang.dump(oRecord.getData()));
        });
    };
});

YUI Library Examples: DataTable Control (beta): Custom Cell Formatting

Sample Code for this Example

DataTable Control (beta) Examples:

More DataTable Control (beta) Resources: