YUI3 Datatable : How to apply separate css class for Table headers and Table data - yui3

Question

I am trying to apply different css classes to the datatable header and the datatable data. But the className attribute in the columns field of the yui3 datatable only applies it to the data. I tried the headerTemplate attribute but it doesn't display the column label. Here is my code in jsfiddle http://jsfiddle.net/anandp504/hJsMk/1/ and the javascript code for the datatable. The column with key "day" is where I am trying to apply a css class for the column header
YUI().use("datatable", "datatype", function (Y) {
/*------------------------------------*/
function formatDate(cell) {
return Y.DataType.Date.format(cell.value, { format: cell.record.get('date_format') });
}
/*------------------------------------*/
function formatCurrency(cell) {
//console.log("column key : " + cell.column.key);
if(cell.column.key == "imps"){
console.log(JSON.stringify(cell));
}
format = {
prefix: "$",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 2
};
cell.record.set(Number(cell.value));
return Y.DataType.Number.format(Number(cell.value), format);
}
/*------------------------------------*/
/*-- create datatable --*/
var datatable = new Y.DataTable({
columns: [
{key: "day", label: "Day", headerTemplate: '<th id="{id}" title="Day" class="datatable-header" {_id}>●</th>', formatter: formatDate, sortable: true, allowHTML: true},
{key: "campaign",label: " Campaign Name", sortable: true},
{key: "imps",label: " Impressions", formatter: formatCurrency, sortable: true, className: "number"},
{key: "clicks",label: "clicks", className: "number", sortable: true},
{key: "totalConvs",label: "Total Conversions", className: "number", sortable: true},
{key: "costEcpm",label: "Cost Ecpm", formatter: formatCurrency, sortable: true, className: "number"},
{key: "revenueEcpm",label: "Revenue Ecpm", formatter: formatCurrency, className: "number", sortable: true},
{key: "profitEcpm",label: "Profit Ecpm", formatter: formatCurrency, className: "number", sortable: true}
],
/*-- Data Set for the DataTable --*/
data : [
{"day": Y.DataType.Date.parse("Sun Aug 15 00:00:00 GMT+05:30 2013"), "date_format": "%d-%b-%Y", "campaign": "**Academy Bus 2013 Charter Geo ron DC FBX rt 1x1 cm.fbx/academydc (1601412)","imps": "24393","clicks": Number("3"),"totalConvs": Number("0"),"costEcpm": Number("0.191327675972615094494000"),"revenueEcpm": Number("3.950000000000000000000000"),"profitEcpm": Number("3.758672324027384905506000") },
{"day": new Date("Sun Aug 02 00:00:00 GMT+05:30 2013"), "date_format": "%d-%b-%Y", "campaign": "**Academy Bus 2013 Charter Geo ron Boston rt FBX 1x1 cm.fbx/academybos (1601410)","imps": "22067","clicks": Number("6"), "totalConvs": Number("0"),"costEcpm": Number("0.186746318031449675987000"),"revenueEcpm": Number("3.950000000000000000000000"),"profitEcpm": Number("3.763253681968550324013000") },
{"day": new Date("Sun Aug 09 00:00:00 GMT+05:30 2013"), "date_format": "%d-%b-%Y", "campaign": "**Academy Bus 2013 Charter Geo DC BOOM 300 App_cm.AcademyBus_WashingtonDC (1505444)","imps": "10157","clicks": Number("0"),"totalConvs": Number("0"),"costEcpm": Number("1.133644899187481191694000"),"revenueEcpm": Number("1.909000000000000000000000"),"profitEcpm": Number("0.775355100812518808306000") },
{"day": new Date("Sat Aug 06 00:00:00 GMT+05:30 2013"), "date_format": "%d-%b-%Y", "campaign": "**Academy Bus 2013 Charter Geo ron Boston rt FBX 1x1 cm.fbx/academybos (1601410)","imps": "1048","clicks": Number("5"),"totalConvs": Number("0"),"costEcpm": Number("0.193939241407362212731000"),"revenueEcpm": Number("3.950000000000000000000000"),"profitEcpm": Number("3.756060758592637787269000") }
],
summary: "Price sheet for inventory parts",
caption: "Network Advertiser Analytics"
});
datatable.render("#datatable-example");
});

Answer 1

The assumption is that you would use the th or td selector along the className in your CSS style definition so you can tell them apart. In your case, th.yui3-datatable-col-day for the header cell and td.yui3-datatable-col-day for the data cells. Likewise, you could use thead .yui3-datatable-col-day.
In recent versions, the formatters you use are built into datatable. You just need to add the datatable-formatters module to your dependencies. See the API Docs.

Answer 2

I had to create css classes as below and assign them under className attribute for columns:
.yui3-datatable th.datatable-header {
text-align: center; font-weight:bold ; color: #00000; font-family: Arial, Helvetica, sans-serif; font-size: 12px;
}
.yui3-datatable td.datatable-data {
color: #00000; font-family: Arial, Helvetica, sans-serif; font-size: 10px;
}
The column attribute will look like below:
columns: [
{key: "day", label: "Day", formatter: formatDate, sortable: true, allowHTML: true, className: "datatable-header datatable-data"},
{key: "campaign",label: " Campaign Name", sortable: true, className: "datatable-header datatable-data"},
{key: "imps",label: " Impressions", formatter: formatCurrency, sortable: true, className: "datatable-header datatable-data number"},
{key: "clicks",label: "clicks", className: "number", sortable: true, className: "datatable-header datatable-data number"}
]