DataTable Widget: Basic DataTable
The DataTable widget displays data in a tabular format. Use plugins and extensions to add features and functionality to the
Y.DataTable.Base class. A basic table can be rendered by passing in a simple array of columns and an array of data objects. 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", function(Y) { var cols = ["a","b","c"], data = [ {a:"1A", b:"1B", c:"1C"}, {a:"2A", b:"2B", c:"2C"}, {a:"3A", b:"3B", c:"3C"} ], dt = new Y.DataTable.Base({columnset:cols, recordset:data}).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.
YUI().use("datatable-base", function(Y) { var cols = [ {key:"a", label:"Column A"}, {key:"b", label:"Column B"}, {key:"c", label:"Column C"} ], data = [ {a:"1A", b:"1B", c:"1C"}, {a:"2A", b:"2B", c:"2C"}, {a:"3A", b:"3B", c:"3C"} ], dt = new Y.DataTable.Base({columnset:cols, recordset:data}).render("#example"); });
Columns may also be nested. When a Column is a parent to other Column, it doesn't directly represent data, so a key is unnecessary. Defining a label determines what will be shown in the TH element.
This next example also demonstrates how a Columnset instance can be first created and then passed in to the DataTable constructor.
YUI().use("datatable-base", function(Y) { var cols = [ {label:"Grandparent", children:[ {key: "a"}, {label:"Parent", children: [ {key:"b"}, {key:"c"} ]} ]} ], data = [ {a:"1A", b:"1B", c:"1C"}, {a:"2A", b:"2B", c:"2C"}, {a:"3A", b:"3B", c:"3C"} ], dt = new Y.DataTable.Base({columnset:cols, recordset:data}).render("#example"); });
