This example shows a few ways to configure your columns to populate cells with formatted values.
Formatting with Template Strings
Note: be sure to add the yui3-skin-sam classname to the
page's <body> element or to a parent element of the widget in order to apply
the default CSS skin. See Understanding Skinning.
<body class="yui3-skin-sam"> <!-- You need this skin class -->
Data can be stored in one format but displayed in a different format. For instance, prices can be stored as numbers but displayed as "$2.99", and birthdays can be stored as Date objects but displayed as "12/9/2009".
Simple formatting can be defined with a string template on the column definition.
YUI().use("datatable", function (Y) {
var table = new Y.DataTable({
columns: ["id", "name", { key: "price", formatter: "${value}" }],
data: [
{ id: "ga-3475", name: "gadget", price: 6.99 },
{ id: "sp-9980", name: "sprocket", price: 3.75 },
{ id: "wi-0650", name: "widget", price: 4.25 }
],
caption:"Data formatting with string template"
}).render('#template');
});
Formatting with Functions
When a calculation is needed, define a custom function that generates
markup for the data cell. The custom formatter function receives an object
with the properties listed in Appendix
B in the DataTable user guide. Also see the section on
setting content with formatter
functions.
YUI().use("datatype-date", "datatable", function (Y) {
function calculate(o) {
return "$" + (o.data.price - o.data.cost).toFixed(2);
}
var table = new Y.DataTable({
columns: ["id", "name", { label: "profit", formatter: calculate }],
data: [
{ id: "ga-3475", name: "gadget", price: 6.99, cost: 4.99 },
{ id: "sp-9980", name: "sprocket", price: 3.75, cost: 2.75 },
{ id: "wi-0650", name: "widget", price: 4.25, cost: 3.25 }
],
caption:"Data formatting with custom function"
}).render("#function");
});
Populating Cells with HTML
By default, DataTable will HTML escape cell values (regardless of
formatters). If you want HTML to be preserved, include allowHTML: true
in the column configuration.
YUI().use('datatable', function (Y) {
var table = new Y.DataTable({
columns: [
{ key: "id",
formatter: '<input type="checkbox" name="item" value="{value}">',
label: '<input type="checkbox" id="id-all" value="all">',
allowHTML: true
},
"name",
{ key: "price", formatter: '${value}' }
],
data: [
{ id: "ga-3475", name: "gadget", price: 6.99 },
{ id: "sp-9980", name: "sprocket", price: 3.75 },
{ id: "wi-0650", name: "widget", price: 4.25 }
],
caption: "Allowing HTML content in cells"
}).render("#allowhtml");
// Delegated because the table header might be re-rendered
table.delegate('click', function (e) {
this.get('contentBox').all('input[name]')
.set('checked', e.currentTarget.get('checked'));
}, '#id-all', table);
table.delegate('click', function (e) {
Y.one('#id-all').set('checked', false);
}, '.yui3-datatable-data input', table);
});
Using emptyCellValue for Missing Data
Use the emptyCellValue column configuration to supply a custom cell value
in the case of missing data. If the emptyCellValue includes HTML
formatting, be sure to also set allowHTML: true for the column. Note,
the DataType utility is also used by the formatter in this example.
YUI().use("datatype-date", "datatable-base", function (Y) {
function formatDates(o) {
return o.value &&
Y.DataType.Date.format(o.value, { format: "%m/%d/%Y" });
}
var table = new Y.DataTable({
columns: [
"id",
"name",
{ key: "date", formatter: formatDates, emptyCellValue: "(unknown)" }
],
data: [
{ id: "ga-3475", name: "gadget", date: new Date(2006, 5, 1) },
{ id: "sp-9980", name: "sprocket", date: new Date(2004, 8, 16) },
{ id: "wi-0650", name: "widget" } // No date, uses emptyCellValue
],
caption: "Data formatting with DataType.Date"
}).render("#dates");
});