NOTICE: This example is for the deprecated version of DataTable. The components referred to here will be removed in future versions of YUI. If you are unable to upgrade to the latest DataTable version due to unresolvable feature conflicts from version 3.4.1 or prior, please file a ticket.
The DataTable widget displays data in a tabular format. Use plugins and extensions to add features and functionality to the Y.DataTable.Base class.
<div id="example" class="yui3-skin-sam"></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-base-deprecated", function(Y) {
var cols = ["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"}
],
dt = new Y.DataTable.Base({
columnset: cols,
recordset: data,
summary: "Price sheet for inventory parts",
caption: "Example table with simple columns"
}).render("#example");
});
Your column definitions may be an array of object literals in order to support any number of configurations that are supported by the Y.Column class. For instance, you may wish to define a label that will be displayed in each column header. Use the key property to define where data for the column will be coming from.
YUI().use("datatable-base-deprecated", function(Y) {
var cols = [
{ 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"}
],
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"}
],
dt = new Y.DataTable.Base({
columnset: cols,
recordset: data,
summary: "Price sheet for inventory parts",
caption: "These columns have labels and abbrs"
}).render("#example");
});