05 – YUI 3.5 Javascript DataTable

How to sort columns and the DataTable’s recordType attribute.

I’m currently rendering the video, will upload asap.

[crayon language="javascript"]
YUI({ lang: “en-US” }).use(‘datatable’, ‘datatype’, function (Y) {

var data = [
{ number: "1", issued: new Date(2012, 5, 1), amount: 898.32, vatp: 0 },
{ number: "2", issued: new Date("May 7, 2012 UTC"), amount: 94.43, vatp: 17.5 },
{ number: "3", issued: new Date("June 1, 2012"), amount: 1987.33, vatp: 17.5 }
];

function formatDate(cell) {
return Y.DataType.Date.format(cell.value, { format: “%d %b %Y” });
}

function thousandsSeparator() {
if (Y.config.lang.substring(0, 2) == “it”) {
return “.”;
}
return “,”;
}

function decimalSeparator() {
if (Y.config.lang.substring(0, 2) == “it”) {
return “,”;
}
return “.”;
}

function formatCurrencyCell(cell) {
return formatCurrency(cell.value);
}

function formatCurrency(number) {
format = {
suffix: ” €”,
thousandsSeparator: thousandsSeparator(),
decimalSeparator: decimalSeparator(),
decimalPlaces: 2
};
return Y.DataType.Number.format(number, format);
}

var table = new Y.DataTable({
data: data,
columns: [
{ key: "number", label: "Number" },
{ key: "issued", label: "Issue Date", formatter: formatDate },
{ key: "amount", label: "Amount", formatter: formatCurrencyCell, className: "number" },
{ key: "vat", label: "VAT", formatter: formatCurrencyCell,
className: "number" },
{ key: "total", label: "Total", formatter: formatCurrencyCell, className: "number" }
],
recordType: {
vat: {
getter : function () {
return this.get(‘amount’) * this.get(‘vatp’) / 100;
}
},
total: {
getter: function() {
return this.get(‘amount’) + this.get(‘vat’);
}
}
},
sortable: true,
caption: “Invoice List”
});

table.render(“#invoices”);

});
[/crayon]