Example: DataTable - Custom Formatting (YUI Library)

# DataTable Widget :: Custom Formatting

### Sample Code

Data:

YAHOO.example.Data.emails = { account:"jenny@yahoo.com", currStorage: 10, maxStorage: 200, messages: [ {XID: "9897",Date:new Date(1981, 2, 24),To:"Joe",From:"Jenny",Unread:false,Subject:"Check out my new pictures"}, {XID: "7899",Date:new Date(1980, 1, 11),To:"Jane",From:"Jenny",Unread:false,Subject:"Let's have lunch"}, {XID: "6789",Date:new Date(1978, 11, 12),To:"Ann",From:"Jenny",Unread:false,Subject:"Here's the info you requested"}, {XID: "4996",Date:new Date(1974, 1, 11),To:"Bob",From:"Jenny",Unread:true,Subject:"RE: Let's have lunch"}, {XID: "4544",Date:new Date(1974, 1, 10),To:"Charlie",From:"Jenny",Unread:false,Subject:"Birthday party Saturday"} ] };

CSS:

/* custom css*/ #formatting {margin:1em;} #formatting table {border-collapse:collapse;} #formatting th, #formatting td {border:1px solid #000;padding:.25em;} #formatting th {background-color:#696969;color:#fff;}/*dark gray*/ #formatting .yui-dt-odd {background-color:#eee;} /*light gray*/ #formatting .unread {font-weight:bold;}

Markup:

<div id="formatting"></div>

JavaScript:

// Define a custom formatter for the "New" column var myFormatter = function(elCell, oRecord, oColumn, oData) { if(oRecord["Unread"]) { elCell.innerHTML = "X"; // show an "X" in the column YAHOO.util.Dom.addClass(elCell.parentNode, "unread"); // style the row } }; // Override the built-in link formatter YAHOO.widget.Column.formatLink = function(elCell, oRecord, oColumn, oData) { var user = oData; elCell.innerHTML = "<a href=\"mailto:" + user + "@foo.com\">" + user + "</a>"; }; var myColumnHeaders = [ {text:"New",formatter:myFormatter}, // use a custom formatter {key:"Date",type:"date"}, // use a built-in formatter {key:"To", type:"link"}, // override the built-in formatter {key:"Subject"} ]; var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders); var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.emails); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; myDataSource.responseSchema = { resultsList: ["messages"], fields: ["Date","To","From","Subject","XID","Date","Unread"] }; var myDataTable = new YAHOO.widget.DataTable("formatting",myColumnSet,myDataSource,{caption:"Example: Custom Formatting"});