YUI Library Home

YUI Library Examples: DataTable Control: Custom Cell Formatting

DataTable Control: Custom Cell Formatting

This example demonstrates a variety of ways to format data in a DataTable, including form elements, dates, currency, email addresses, and links. The first Column displays custom UI that is based on data in another Column and uses classes to highlight its cells green or red.

Implementers who are working with data from third-party sources, user input data, or otherwise untrustworthy sources should be sure to read the Security Considerations section of the DataTable user guide.

Sample Code for this Example

Data:

1YAHOO.example.Data = { 
2    formatting: { 
3        items: [ 
4            {field1: "bananas", field2:new Date(2007, 1, 1), field3:111, field4:"23.4", field5:"bob", field6:"http://www.yahoo.com"}, 
5            {field1: undefined, field2:new Date(2006, 1, 1), field3:12.3, field4:"35.12", field5:"ann", field6:"http://www.yahoo.com"}, 
6            {field1: "apples", field2:new Date(2007, 11, 1), field3:1, field4:34.12, field5:"charlie", field6:"http://www.yahoo.com"}, 
7            {field1: "bananas", field2:new Date(2007, 1, 11), field3:1112, field4:"03", field5:"diane", field6:"http://www.yahoo.com"}, 
8            {field1: "cherries", field2:new Date(1999, 1, 11), field3:124, field4:03, field5:"edgar", field6:"http://www.yahoo.com"}, 
9            {field1: "", field2:"January 10, 2005", field3:"12", field4:"34", field5:"francine", field6:"http://www.yahoo.com"}, 
10            {field1: "unknown", field2:"January 1, 2005", field3:"19.1", field4:"234.5", field5:"george", field6:"http://www.yahoo.com"}, 
11            {field1: null, field2:"1/11/05", field3:"10.02", field4:"345.654", field5:"hannah", field6:"http://www.yahoo.com"}, 
12            {field1: "cherries", field2:"1/11/2005", field3:"109", field4:23.456, field5:"igor", field6:"http://www.yahoo.com"}, 
13            {field1: "bananas", field2:"November 1, 2005", field3:"11111", field4:23.0123, field5:"julie", field6:"http://www.yahoo.com"} 
14        ] 
15    } 
16} 
view plain | print | ?

CSS:

1.yui-skin-sam .yui-dt td.up { 
2    background-color: #efe; 
3} 
4.yui-skin-sam .yui-dt td.down { 
5    background-color: #fee; 
6} 
view plain | print | ?

Markup:

1<div id="formatting"></div> 
view plain | print | ?

JavaScript:

1YAHOO.util.Event.addListener(window, "load", function() { 
2    YAHOO.example.CustomFormatting = new function() { 
3        // Define a custom formatter for the Column labeled "flag" 
4        // draws an up icon and adds class "up" to the cell to affect 
5        // a green background color if value of field3 is greater than 100. 
6        // Otherwise renders a down icon and assigns class "down", setting 
7        // the background color to red. 
8        this.myCustomFormatter = function(elLiner, oRecord, oColumn, oData) { 
9            if(oRecord.getData("field3") > 100) { 
10                YAHOO.util.Dom.replaceClass(elLiner.parentNode, "down", "up"); 
11                elLiner.innerHTML = ' <img src="../../build/datatable/assets/skins/sam/dt-arrow-up.png">'; 
12            } 
13            else { 
14                YAHOO.util.Dom.replaceClass(elLiner.parentNode, "up","down"); 
15                elLiner.innerHTML = ' <img src="../../build/datatable/assets/skins/sam/dt-arrow-dn.png">'; 
16            } 
17        }; 
18         
19        // Add the custom formatter to the shortcuts 
20        YAHOO.widget.DataTable.Formatter.myCustom = this.myCustomFormatter; 
21 
22        // Override the built-in formatter 
23        // Be sure to HTML-escape any untrustworthy data 
24        YAHOO.widget.DataTable.formatEmail = function(elLiner, oRecord, oColumn, oData) { 
25            var user = YAHOO.lang.escapeHTML(oData); 
26            elLiner.innerHTML = "<a href=\"mailto:" + user + "@mycompany.com\">" + user + "</a>"; 
27        }; 
28 
29 
30        var myColumnDefs = [ 
31            {key:"flag", formatter:"myCustom"}, // use custom shortcut 
32            {key:"radio", formatter:"radio"}, // use the built-in radio formatter 
33            {key:"check", formatter:"checkbox"}, // use the built-in checkbox formatter (shortcut) 
34            {key:"button", label:"Show record data", formatter:YAHOO.widget.DataTable.formatButton}, // use the built-in button formatter 
35            {key:"field1", formatter:"dropdown", dropdownOptions:["apples","bananas","cherries"],sortable:true}, 
36            {key:"field2", sortable:true, formatter:"date"}, // use the built-in date formatter 
37            {key:"field3", sortable:true}, 
38            {key:"field4", sortable:true, formatter:"currency"}, // use the built-in currency formatter 
39            {key:"field5", sortable:true, formatter:YAHOO.widget.DataTable.formatEmail}, // use the overridden email formatter 
40            {key:"field6", sortable:true, formatter:YAHOO.widget.DataTable.formatLink} // use the built-in link formatter 
41        ]; 
42 
43        this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.multitypes); 
44        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; 
45        this.myDataSource.responseSchema = { 
46            resultsList: "items", 
47            // Use the parse methods to populate the RecordSet with the right data types 
48            fields: [ 
49                {key:"field1", parser:YAHOO.util.DataSource.parseString}, // point to the string parser 
50                {key:"field2", parser:"date"}, // point to the date parser 
51                {key:"field3", parser:"number"}, // point to the number parser 
52                {key:"field4", parser:"number"}, // point to the number parser 
53                {key:"field5"}, // this is already string data so no parser needed 
54                {key:"field6"} // this is already string data so no parser needed 
55            ] 
56        }; 
57 
58        this.myDataTable = new YAHOO.widget.DataTable("formatting", myColumnDefs, this.myDataSource); 
59 
60        var lastSelectedRadioRecord = null; 
61        this.myDataTable.subscribe("radioClickEvent", function(oArgs){ 
62            if(lastSelectedRadioRecord) { 
63                lastSelectedRadioRecord.setData("radio",false); 
64            } 
65            var elRadio = oArgs.target; 
66            var oRecord = this.getRecord(elRadio); 
67            oRecord.setData("radio",true); 
68            lastSelectedRadioRecord = oRecord; 
69            var name = oRecord.getData("field5"); 
70        }); 
71 
72        this.myDataTable.subscribe("checkboxClickEvent", function(oArgs){ 
73            var elCheckbox = oArgs.target; 
74            var oRecord = this.getRecord(elCheckbox); 
75            oRecord.setData("check",elCheckbox.checked); 
76        }); 
77 
78        this.myDataTable.subscribe("buttonClickEvent", function(oArgs){ 
79            var oRecord = this.getRecord(oArgs.target); 
80            alert(YAHOO.lang.dump(oRecord.getData())); 
81        }); 
82 
83        this.myDataTable.subscribe("dropdownChangeEvent", function(oArgs){ 
84            var elDropdown = oArgs.target; 
85            var oRecord = this.getRecord(elDropdown); 
86            oRecord.setData("field1",elDropdown.options[elDropdown.selectedIndex].value); 
87        }); 
88    }; 
89}); 
view plain | print | ?

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

More DataTable Control Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings