+ The DataTable widget displays data in a tabular format. Use plugins and
+ extensions to add features and functionality to the Y.DataTable class.
+
Simple DataTable Use Cases
+
+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');
+
+});
+
+
+Lighten the module payload
+ +
+ 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");
+
+});
+
+