CODEWITHSUNDEEP
yui3
Anand
Anand

Reputation: 1841

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

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}>&#9679;</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");
});

Upvotes: 1

Views: 1717

Answers (2)

Anand
Anand

Reputation: 1841

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"}
]

Upvotes: 1

user32225
user32225

Reputation: 924

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.

Upvotes: 1

Related Questions