04 – YUI 3.5 Javascript Datatable

How to Format dates, currency and how to calculate columns from other columns.

js/datatable.js

[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);
}

function computeAndFormatVat(cell) {
return formatCurrency(cell.data.amount * cell.data.vatp / 100);
}

function computeAndFormatTotal(cell) {
return formatCurrency(cell.data.amount * (100 + cell.data.vatp) / 100);
}

var table = new Y.DataTable({
data: data,
columns: [ "number",
{ key: "issued", label: "Issue Date", formatter: formatDate },
{ key: "amount", label: "Amount", formatter: formatCurrencyCell, className: "number" },
{ key: "vat", label: "VAT", formatter: computeAndFormatVat,
className: "number" },
{ key: "total", label: "Total", formatter: computeAndFormatTotal, className: "number" }
],
caption: “Invoice List”
});

table.render(“#invoices”);

});
[/crayon]