The DataTable widget displays data in a tabular format. Use plugins and
extensions to add features and functionality to the Y.DataTable class.
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.
<div class="example yui3-skin-sam"> <!-- You need this skin class -->
<div id="simple"></div>
<div id="labels"></div>
</div>
A basic table can be rendered into a given container by passing in a simple array of columns and an array of data objects into the constructor. As long as the columns map directly to the keys of the data objects, the table will be generated automatically from the data provided.
YUI().use("datatable", function (Y) {
// A table from data with keys that work fine as column names
var simple = new Y.DataTable({
columns: ["id", "name", "price"],
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" }
],
summary: "Price sheet for inventory parts",
caption: "Example table with simple columns"
});
simple.render("#simple");
});
Your column definitions may also be objects if additional column
configuration is needed. For example, the following column definitions
include header labels and set the <th>'s abbr attribute. Use the key
property to relate a column to its corresponding data field.
YUI().use("datatable", function(Y) {
// Data with less user friendly field names
var data = [
{
mfr_parts_database_id : "ga_3475",
mfr_parts_database_name : "gadget",
mfr_parts_database_price: "$6.99"
},
{
mfr_parts_database_id : "sp_9980",
mfr_parts_database_name : "sprocket",
mfr_parts_database_price: "$3.75"
},
{
mfr_parts_database_id : "wi_0650",
mfr_parts_database_name : "widget",
mfr_parts_database_price: "$4.25"
}
];
// Column definitions that use configured header labels, abbrs.
// Use "key" to identify which data field has its content.
var columnDef = [
{
key : "mfr_parts_database_id",
label: "Mfr Part ID",
abbr : "ID"
},
{
key : "mfr_parts_database_name",
label: "Mfr Part Name",
abbr : "Name"
},
{
key : "mfr_parts_database_price",
label: "Wholesale Price",
abbr : "Price"
}
];
var withColumnLabels = new Y.DataTable({
columns: columnDef,
data : data,
summary: "Price sheet for inventory parts",
caption: "These columns have labels and abbrs"
}).render('#labels');
});
The datatable module includes a number of features not used in this
example. For a smaller module payload, use the datatable-base module.
// datatable-base includes only basic table rendering, but in this case,
// that's enough.
YUI().use("datatable-base", function (Y) {
// A table from data with keys that work fine as column names
var simple = new Y.DataTable({
columns: ["id", "name", "price"],
data : [ ... ]
}).render("#simple");
});